Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML.
Conceptos básicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc…
IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 están siendo implementadas en las últimas versiones de los navegadores más populares, pero algunas de ellas se encuentran aún en estado experimental.
Aplicar CSS a nuestro HTML
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;
}CSS INTERNO
En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML head. 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>ESTILOS EN UNA LÍNEA
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>Elementos básicos en CSS
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.
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>.
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.
El blog de Jeanette 