Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Hojas de estilo en cascada (CSS)

Bypass main content

Hojas de estilo en cascada (CSS)

Las hojas de estilo son útiles para definir los atributos visuales en documentos HTML. Esto le da a los autores métodos poderosos para definir el aspecto visual del documento, mientras que separa la parte semántica (HTML) de la presentacional (style sheets). En este tutorial aorenderás a implementar atributos de estilo en documetos HTML.

Páginas:123>
Bypass main content

Propiedades de estilo

Las propiedades y sus valores son definidos usando una sintaxis de CSS simple. Estas definiciones no pertenecen al estándar HTML, pero están pensadas para reemplazar los atributos presentacionales que HTML ha juntado durante sus primeros tiempos.

nombre-propiedad: valor-propiedad;

De este modo puedes definir muchos pares de valores y propiedades en un mismo bloque, dado que una definición básica es separada de la próxima por un punto y coma. Un conjunto de propiedades puede entonces ser aplicado, por ejemplo, a un elemento, lo que establecerá el aspecto visual de ese elemento dondequiera que aparezca en el documento.

En el siguiente ejemplo un conjunto de propiedades visuales es definido para el elemento elemento HTML p. Para lograr esto, el nombre del elemento debe aparecer antes de la declaración de propiedades, las cuales irán encerradas entre llaves ("{" y "}").

p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}

Al declarar este código en un documento HTML, todos los párrafos tomarán estas propiedades. En algunos casos necesitas establecer características sólo para algunos párrafos en lugar de para todos. Si este es el caso, puedes usar el atributo "style", las clases o los selectores ID.

Nota: las propiedades CSS y sus posibles valores no ser´na tratados en profundidad en este sitio. Para encontrar más información acerca de este tema, refiérete a este índice de propiedades para CSS 2.

Definiciones de estilo

Puedes definir propiedades de estilo de tres formas: dentro del rag de apertura de un elemento específico (usando el atributo "style"), dentro de un bloque en el encabezado del documento (usando el elemento HTML style) o en archivos externos (usando el tag HTML link).

Usando el atributo "style"

El atributo "style" permite a los autores declarar propiedades de estilo "en línea" como valor de un atributo. Es útil cuando el autor necesita declarar un conjunto único de propiedades para un elemento específico. La sintaxis para las propiedades CSS son las mismas.

Código
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Contenido del párrafo</p>
Vista

Contenido del párrafo

Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior. La diferencia es que este último sólo afecta al elemento contenedor y el primero afecta implícitamente a todos los párrafos.

Usando el elemento HTML style

El elemento HTML style define un bloque donde las declaraciones de estilo pueden ser contenidas. El bloque de estilo debe ser declarado en algún lugar del encabezado del documento (elemento HTML head) y definirá estilos y clases para el documento actual.

<style type="text/css">
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}

a {
font-size: 12px;
font-weight: bold;
}
</style>

Nota que estas dos definiciones afectarán a todos los elementos "a" y "p" presentes en el documento.

Usando archivos externos

Los archivos externos también pueden ser utilizados para definir propiedades de estilo para uno o más documentos. El archivo, usalmente presenta la extensión "css" (por ejemplo, "basic.css") y el conjunto de propiedades puede ser definido de la misma forma que en el contenido del elemento HTML style. Esta práctica separa completamente la parte semántica de la presentación del documento, mientras ayuda a los autores a compartir definiciones de estilo entre varias páginas de sitio.

Para hacer referencia a un archivo CSS desde el documento HTML, puedes usar el tag HTML link en el encabezado del mismo. Esta declaración le dice al agente de usuario, dónde se pueden encontrar las declaraciones de estilo de este documento.

<link type="text/css" href="basico.css" />

Usar esta misma línea en diferentes documentos, te permitirá especificar atributos comunes a un conjunto de páginas (o inclusive a un sitio entero), lo que puede resultar en actualizaciones más sencillas.

Páginas:123>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona