CSS o las Hojas de estilo en cascada (en inglés de Cascading Stylesheets) es la forma que tenemos en diseño web de aplicar estilos a los elementos HTML. Aunque inicialmente puede resultar complejo, una vez nos familiaricemos con la forma de trabajar y estructurar las reglas, conseguiremos para que el navegador las interprete correctamente y dar ese diseño propio y personalizado a cada punto de nuestra web con CSS.
Comenzamos esta segunda parte del tutorial Cómo se hace una web. Puedes leer la primera parte sobre HTML aquí.
Versiones de CSS. ¿Qué es CSS3?
Al igual que sucede con HTML, CSS ha ido evolucionando y añadiendo nuevas propiedades a su ya extensa lista de opciones. Algunas propiedades sin embargo caen en desuso o nunca se llegan a utilizar por los navegadores, por lo que se decide retirarlas. Así, cada nueva versión de CSS incorpora nuevas propiedades pero también hereda la mayoría de las definidas en su anterior versión.
Actualmente el estándar es CSS3, ya que la mayoría de navegadores ofrecen una compatibilidad casi completa para la mayoría de las propiedades y efectos. ¿Significa que si no se CSS3 no podré diseñar o modificar el diseño de mi web? No, no es cierto. Puedes trabajar con las propiedades de CSS2.1 sin problemas y los navegadores interpretará todo correctamente. Sin embargo no podrás aplicar efectos como transiciones, sombras avanzadas o degradados, ya que son algunas de las propiedades que se incorporaron en la versión 3 de CSS como por los degradados en fondos.
Sintaxis básicas en CSS.
Para saber cómo diseñar una web, es necesario conocer la estructura en CSS, que siempre es la misma y está formada por tres elementos bien diferenciados: selector, propiedad y valor. Con el selector indicamos que elementos en nuestro HTML van a ser objetos de estos estilos. Y con la propiedad y el valor establecemos estos cambios en forma de par, por ejemplo color: rojo o tamaño de texto: 16px. Siempre propiedad: valor.
h1 { color: green; font-size: 18px; }
Podemos escribir los estilos en una sola línea o en una forma más estructurada, para que sea más fácil su lectura.
h1 {
color: green;
font-size: 18px;
}
Es importante aquí conocer que cada regla en CSS empieza con uno o varios selectores y los valores siempre están comprendidos entre dos llaves, una de apertura y otra de cierre. Para las propiedades y valores siempre usamos dos puntos para asignar un valor a la propiedad y un punto y como entre cada declaración.
Estas normas de puntuación son importantes, pues un error en ellas puedes causar que el resto de las reglas que vienen a continuación en la hoja de estilos no sean interpretadas por el navegador.
Tipos de selectores en CSS
Es uno de los puntos más importantes en CSS y que todo maquetador debería conocer. Además, no todos los tipos de selectores tienen la misma importancia para el navegador, por lo que si no sabemos utilizar correctamente el orden de importancia de cada uno, el navegador podría aplicar estilos incorrectos heredados de otro selector, cosa que no queremos que ocurra en nuestro diseño.
Hay varios tipos de selectores aunque los más comunes son los identificadores (id), clases (class) y elementos HTML. Cada uno de ellos como hemos comentado tiene un orden de importancia, siendo de mayor a menor:
- Identificadores (id)
- clases
- elementos HTML
Además estos selectores pueden ser agrupados y combinados para conseguir selectores más específicos y por lo tanto con más peso a la hora de aplicar estilos. Veamos cada uno de ellos.
Identificadores como selector en CSS
El id o identificador es el selector que tiene mayor peso y siempre que lo usemos para definir una propiedad, esta se aplicará por encima de la clase o elemento de igual nivel. Hay que tener en cuenta que los identificadores son por definición elementos únicos y que no se repiten en el HTML, por lo que solo estaremos aplicando dicho estilo a un único elemento.
Suponiendo que tenemos el siguiente HTML:
<h1 id="heading" class="alert">Título del artículo</h1>
el identificador del elemento será #heading
. Siempre utilizaremos en símbolo almohadilla delante del nombre del identificador.
#heading {
color: green;
}
Clases como selectores de CSS
Las clases son selectores CSS muy flexibles, ya que si se pueden repetir, por tanto podemos aplicar un mismo estilo a varios elementos en el HTML, simplemente repitiendo la asignación de dicha clase. Las clases van precedidas de un punto delante de la misma. Tomando el mismo HTML de antes, vamos a asignar un color por la clase.
.alert {
color: red;
}
Elementos HTML como selectores en CSS
Los elementos HTML también pueden ser usados como selectores en CSS. Snn embargo es el menos recomendable, pues si el HTML cambia en el futuro, algunos estilos ya definidos en el CSS pueden aplicarse a los nuevos, no teniendo la libertad de editar el HTML libremente. Los selectores de HTML se utilizan sin ningún elemento externo, simplemente en nombre del elemento. Definiremos el color amarillo a nuestro h1:
h1 {
color: yellow;
}
Selectores CSS avanzados
Además de los identificadores, las clases y los elementos, existen selectores CSS avanzados como los atributos [attr=value]
, donde lo que se busca es el nombre de atributo y que coincida con el valor especificado en el HTML.
También son interesantes conocer los pseudo-selectores, donde podremos especificar el primer o último elemento de un grupo o incluso la primera letra de un elemento. Por ejemplo con :first-child
o :first-letter
Error de sintaxis en CSS
Una de las partes más importantes cuando se empieza a trabajar en diseño web con CSS es conocer las nomenclaturas correctas con las que podemos nombrar a las clases y a los identificadores, para no tener problemas entre navegadores. Por ello, nunca debemos comenzar a nombrar clases con números o utilizar mayúsculas. Puedes encontrar más recomendaciones para escribir un mejor CSS en este artículo.
Siguientes pasos con CSS y lecturas recomendadas
Ahora te toca probar y experimentar con CSS para familiarizarte con la sintaxis, los selectores y las propiedades. Pare ello lo importante es contar con un buen editor de código que nos ayude y nos resalte el código cuando está mal escrito. Junto a esto, el inspector de tu navegador es de gran ayuda.
Para usuarios más avanzados que quieran experimentar a construir un proyecto web y con vistas a un futuro, los frameworks de CSS son también de gran ayuda y un buen punto de apoyo para no comenzar ningún proyecto desde 0. Igualmente, como sabrás es necesario que toda web se adapte tanto a dispositivos móviles, tablets y equipos de escritorios con diseño web responsive. Para ello las mediaqueries de CSS juegan un papel fundamental, puedes leer más sobre esto aquí.
Espero que te haya servido de ayuda y ahora tengas claro cómo funciona una web y qué es el CSS!
Una buena guía para los que empezamos en Diseño web. Controlar el CSS es fundamental. Un saludo y gracias por la información