¿Qué es CSS?
CSS (Cascading Style Sheets u hojas de estilo en cascada) es el mecanismo para definir la apariencia de los contenidos web. A través de las hojas de estilo, y mediante una o más reglas (o conjuntos de reglas), definiremos la manera en la que un elemento o grupo de elementos será mostrado dentro del navegador web.
h1 { color: #334455; } /* Definición de un encabezado de nivel 1 */
p { font-size: small; font-family: sans-serif;} /* Definición de un párrafo */
Cada regla de estilo está compuesta por dos partes: el selector, que determina a qué elementos afectará la regla (qué elementos se formatearán), y un conjunto de uno o más pares propiedad/valor, que establecerán qué se deberá modificar. el conjunto de pares propiedad/valor estará encerrado entre llaves. En el caso de tener más de un par propiedad/valor, éstos estarán separados por un punto y coma (aunque no es necesario incluirlo en el último par, es conveniente hacerlo, puesto que así será más difícil olvidarlo en otro caso). Se pueden incluir comentarios dentro de las hojas de estilo encerrados entre los caracteres /* y */.
El selector determina el elemento o elementos sobre los que se aplicará la regla de estilo. Por tanto, es posible que se incluya más de un elemento en el selector. El selector puede definir diferentes criterios para especificar el elemento o elementos sobre los que se aplicará:
- Un elemento del lenguaje HTML:
h1 { color: #334455; } - Un contexto dentro de un elemento:
h1 em { color: #334455; } - Una clase o un identificador de un elemento:
#menu { color: #334455; } - Unaa pseudo-clase de un elemento o el propio pseudo-elemento:
a:link { color: #334455; } - Un atributo concreto de un elemento:
a [name] { color: #334455; }
Inclusión de estilos en una página web
Existen 3 formas de especificar los estilos para los distintos elementos de una página web.
- Estilos incrustados
- Hojas de estilo internas
- Hojas de estilo externas
- Separar múltiples definiciones de propiedades con un punto y coma.
- Encerrar las definiciones entre comillas.
- Los estilos cargados en último lugar tienen prevalencia sobre los cargados anteriormente.
- Los estilos aplicados localmente tienen precedencia sobre el resto de estilos.
- Si la definición del estilo precisa del uso de comillas (por ejemplo en el tipo de fuente, se deben utilizar comillas sencillas para evitar conflictos con las comillas dobles de la definición del estilo.
- A la hora de utilizar nombres de identificadores o clases es conveniente nombrarlos de acuerdo a su contenido, no a su diseño.
Con el fin de separar el código HTML del código CSS o, lo que es lo mismo, con el fin de separar el contenido de la presentación, la manera más aconsejable es la utilización de hojas de estilo externas.
Estilos incrustados
Se establecen dentro de cada etiqueta HTML sobre la que se aplican. Si se define más de un estilo cada par propiedad/valor irá separado por punto y coma.
<h1 style=»color: #334455″>Encabezado de nivel 1</h1>
Hojas de estilo internas
Se establecen dentro de la sección <head> del documento. Además de no ayudar a la separación contenido/presentación, si se desea aplicar un estilo a varias páginas sería necesario repetir el código en cada página.
<head>
<meta charset=»utf-8″ />
<title>Ejemplo hojas de estilo</title>
<style type=»text/css»>
h1 {
color: #334455;
}
</style>
</head>
Hojas de estilo externas
La manera más aconsejada para especificar estilos aplicables a una web es mediante hojas de estilo externas. Como ventaja principal está que la modificación de un único fichero (hoja de estilo externa) será visible desde todas las páginas que vinculen esa hoja de estilo. Por otro lado, y como se acaba de mencionar, esta forma de utilizra estilos ayuda a separar contenido de presentación, uno de los principios básicos de la web actual.
Las hojas de estilo externas se pueden vincular o importar. Para vincular una hoja de estilos externa se utiliza el siguiente código:
<link rel=»stylesheet» type=»text/css» href=»estilo.css» />
Si bien en la actualidad el atributo type=»text/css» no es necesario. Mediante el atributo href se puede especificar la url (absoluta o relativa) del fichero que contiene la hoja de estilo. Es posible vincular más de una hoja de estilos externa. Eso sí, las reglas establecidas en las últimas prevalecen sobre las primeras.
Las hojas de estilo importadas son una forma de ocultar las hojas de estilo a navegadores que no las soportan correctamente (simplemente no las cargarán). La importación debe realizarse antes de cualquier otra regla de estilo definida en la sección style o antes de incluir cualquier otra regla en el mismo fichero (si se utilizan hojas vinculadas). Para importar una hoja de estilos externa se utiliza el siguiente código:
@import «estilo.css»
Hojas de estilo alternativas
Es posible ofrecer hojas de estilo alternativas, de manera que el usuario pueda elejir cuál de ellas quiere utilizar para visualizar los contenidos. Para ello se utilizará el atributo rel=»alternate stylesheet». En este caso es conveniente utilizar el atributo titlepara identificar cada hoja de estilo.