Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación.
Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso.
La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.
1. CSS externo
Un CSS externo es cuando el CSS se encuentra en un archivo separado con una extensión .css, y lo referenciamos desde HTML con un elemento <link>. El archivo HTML se parecerá a lo siguiente:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My CSS experiment</title><link rel="stylesheet" href="style.css"></head><body><h1>Hello World!</h1><p>This is my first CSS example</p></body></html>
Y el archivo CSS:
h1 {color: blue;background-color: yellow;border: 1px solid black; }p {color: red; }
2. CSS interno
En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML AHEAD. Así, el HTML se escribirá:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My CSS experiment</title><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}</style></head><body><h1>Hello World!</h1><p>This is my first CSS example</p></body></html>
3. Estilos en linea
Los estilos en una línea son declaraciones CSS que afectan solo a un elemento que está contenido dentro de un atributo style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
Los diferentes términos se definen a continuación:
- Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de «selectores», un símbolo de «llave de apertura» (
{), otra parte denominada «declaración» y por último, un símbolo de «llave de cierre» (}). - Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
- Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
- Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
- Valor: establece el nuevo valor de la característica modificada en el elemento.
El concepto fundamental de las hojas CSS son las reglas.
Con las reglas podemos definir cosas como éstas:
- “El título principal de cada página (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente “Montserrat” con un tamaño de 40 pixeles”
- “Los subtítulos de cada página de nivel dos (<h2>) deben estar alineados a la izquierda, color negro ligeramente más claro y usar también el tipo de letra “Montserrat”, pero con un tamaño de 32 pixeles.”
- “Las imágenes dentro de la columna principal deben expandirse siempre al ancho máximo de dicha columna.”
Si te fijas, es lo mismo que hacemos de manera visual con cualquier editor de texto, pero expresado de una manera literal y en un lenguaje que no es nuestro lenguaje natural, sino un lenguaje especial.
Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían este aspecto:
h1 {
font-family: Montserrat;
font-size: 40px;
color: #333;
text-align: center;}
h2 { font-family: Montserrat;
font-size: 32px;
color: #444;}
div.contenido img {
width: 100%;}
Las reglas
En primer lugar fíjate cómo esta hoja de estilos se divide en tres bloques diferenciados, envueltos en llaves, “{…}”.
Esto son las reglas. Cada una implementa una directiva concreta de la pequeña lista de reglas que había formulario de una manera redactada un poco más arriba.
Los selectores
Para especificar a qué partes de la página HTML se aplica cada regla en cuestión, le precede un selector. Este selector especifica el ámbito de aplicación de la regla, es decir, a qué partes de la página aplica.
Si nos imaginamos un documento HTML como sus elementos como un árbol (recuerda que están organizados de manera jerárquica), este ámbito de aplicación van a ser una o varias ramas de ese árbol.
En las dos primeras reglas (selectores “h1” y “h2”) el ámbito de aplicación es muy amplio porque los selectores son elementos HTML. Es decir, estamos diciendo que la primera regla se aplique a todos los elementos <h1> y que la segunda se aplique a todos elementos <h2>.
El último selector hila un poco más fino: éste nos está diciendo que la tercera regla se aplica solamente a elementos <img> que sean hijos de un elemento <div>. Esto se hace con la posición de los elementos, es decir, al poner “img” a la derecha de “div” estamos diciendo que img tiene que tener un <div> como padre.
Las propiedades
Por último están las propiedades, esto es lo que vemos encerrado dentro de las llaves de una regla.
Las reglas siguen la sintaxis de [propiedad]:[valor].
Por ejemplo:
font-size: 40px;
Aquí estamos diciendo que a los elementos que entran dentro del ámbito de la regla se les aplique un tamaño de letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>, <h2>, <p>, etc. Pero aunque entre algún elemento dentro del ámbito de la regla que no sea tipo texto, no pasa nada. En ese caso, se ignora esa propiedad concreta y listo.
Stalkill 