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 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.
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
- 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;
}Este método es sin duda el mejor, pues podemos usar un único documento de estilos en múltiples documentos y, si queremos cambiarlo, solo necesitaremos actualizar el CSS desde un sitio.
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 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>Este método puede ser práctico en algunas ocasiones (puede que estemos trabajando con un gestor de contenido que no permite modificar el archivo CSS directamente), pero no es tan eficiente como el CSS externo — en una web.
3.Estilos de 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>
No hagamos a menos que sea estrictamente necesario. Su mantenimiento es verdaderamente complicado (podríamos tener que actualizar la misma información muchas veces en cada documento), además de mezclar la información de estilo con la información estructural del HTML,
Elementos básicos de CCS
- 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
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
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.
Pero, además, con el sufijo de “.contenido” estamos diciendo que ese “div” no puede ser cualquier div, sino que, a su vez, este <div> tiene que pertenecer a la clase “contenido”. Esto nos es útil para diferenciar distintos bloques <div> y en el ejemplo lo usaremos para diferenciar la columna principal de contenido de la columna de la barra lateral.
Las propíedades
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.
Mixup2.0 