Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML.
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.
CSS sirve para dar estilo y diseño a las páginas web — cambiar de tipo de letra, color, tamaño y espaciado del contenido, mostrar múltiples columnas, añadir animaciones y otras funcionalidades. Este módulo nos introducirá en el dominio de las reglas básicas de CSS, selectores, propiedades, reglas de escritura de CSS, aplicación de CSS a HTML, introducción de medidas, color y otras unidades en CSS, cascadas y herencias; y depuración de CSS.
En este módulo comenzaremos con la base teórica, viendo qué es CSS y cómo el navegador transforma HTML en un DOM, y cómo se aplica el CSS a las partes del DOM, algunos ejemplos muy básicos de sintaxis y el código necesario para incluir nuestro CSS en nuestra página web.
Sintaxis CSS A continuación, profundizaremos todavía más en la sintaxis, viendo cómo las propiedades y sus valores forman bloques declarativos, y cómo los bloques declarativos y los selectores forman reglas CSS completas. Terminaremos señalando otras características de la sintaxis CSS como los comentarios y los espacios en blanco. SelectoresYa han sido mencionados en el anterior artículo, pero ahora los veremos en mucho más detalle, viendo los tipos de selectores existentes y su funcionamiento.Unidades y valores CSS Hay muchos valores de propiedades CSS, valores numéricos, colores o funciones que realizan una acción (como mostrar una imagen de fondo o rotar un elemento). Algunos dependen de las unidades en que se expresen los valores a representar — como la medida de una caja: ¿30 pixels, 30 cm. o 30 ems? En esta guía veremos valores usuales como longitud, color y funciones simples, y otros menos comunes como grados o valores numéricos sin unidades.Cascada y herencia
CSS dispone de dos sistemas relacionados para resolver situaciones con conflictos entre selectores (distintos selectores seleccionando los mismos elementos; ¿Cuál será el que se aplique finalmente?) y elementos anidados en otros elementos (¿Qué estilos se heredarán por los hijos y cuáles no?). Este artículo tratará de exponer ambos sistemas con el suficiente detalle para que resulte útil sin llegar a ser pesado.
El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas — que es lo que veremos en este artículo.
En el último artículo de este módulo, veremos los principios básicos de la depuración en CSS, incluyendo la exploración del CSS aplicado a una página, y otras herramientas que nos ayudarán a encontrar errores de codificación CSS.
Prerrequisitos:
Antes de empezar deberías tener:
- Uso básico de ordenadores, y uso pasivo de la Web (navegar y ver contenido).
- Entorno básico de trabajo como el descrito en Instalación del SW básico, y saber crear y manipular archivos como lo detallado en Manejo de archivos.
- Conocimiento básico de HTML, contenido en el módulo Introducción a HTML.
Aplicar CSS a nuestro HTML
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;
}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, el CSS estará repetido en todas las páginas y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.
3. Estilos en linea
| <ul style = «color: green;»> <li><a href=»#» >Inicio</a></li> <li> <a href=»libros.html»>Libros de programación</a> </li> <li> <a href=»cursos.html»>Cursos de programación</a> </li> <li> <a href=»humor.html»>Humor informático</a> </li> </ul> |
El resultado obtenido lo vemos a continuación:
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>Por favor, no lo 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, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos tipos de código separados y puros, facilitará la tarea a aquellos que vayan a trabajar posteriormente en el código.
Solamente está justificado el uso de estilos en la misma línea cuando los entornos de trabajo son muy restrictivos (el CMS solo permite editar el cuerpo del HTML).
Los elementos básicos CSS: reglas, selectores y propiedades
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:
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.
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.
Podríamos haber hecho lo mismo con cualquier otro elemento HTML. En general, las clases (atributo “class” en HTML) son muy útiles para tratar los mismos elementos HTML de una manera diferenciada según su lugar y función en la página.
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.
Por si lo necesitas, dejare un video.
Viajera 