Este artículo será el punto de partida de una serie de artículos sobre CSS3. Al igual que con HTML5, iré publicando regularmente para aprender a usar CSS3 desde cero.
CSS corresponde a las siglas de Cascade Style Sheet o Hojas de Estilos en Cascada en cristiano. Como indica su nombre CSS3 corresponde a la tercera revisión del mismo y los primeros módulos se convirtieron en recomendaciones oficiales de W3C en 2011.
La World Wide Web Consortium o W3C es la encargada de formular las especificaciones de las hojas de estilos que servirán de estándar para los navegadores o los agentes de usuario.
El CSS3 es el lenguaje utilizado para definir los estilos de los documentos HTML o XML. Su desarrolló partió de la idea de separar la estructura de un documento de su presentación, haciendo así mucho mas fácil su mantenimiento.
La información de los estilos puede ser definida en el mismo HTML con el elemento <style> o en un archivo separado con la terminación .css. Evidentemente, este último es el utilizado a día de hoy, precisamente aprovechando el fin para el que fue creado CSS, no mezclar el HTML con los estilos en un mismo documento y que resulte mucho mas fácil su mantenimiento.
El funcionamiento de CSS consiste en definir, mediante su propia sintaxis, el formato de presentación que se aplicará a un sitio web completo, una página o documento HTML, a una parte de un documento HTML o a una etiqueta en concreto.
Para escribir un CSS, al igual que en HTML, te bastará con un simple editor de texto plano como por ejemplo Gedit.
Siguiendo el ejemplo del tutorial de HTML5, si por ejemplo tenemos una etiqueta H1 de título como esta:
<h1>Título de tu página</h1>
Podemos darle estilos de esta forma:
h1 {
font-size : 12px;
font-family : verdana;
text-decoration : underline;
text-align : left;
}
Con esto, le estaríamos dando un tamaño de fuente de 12 pixeles, un tipo de fuente Verdana, un subrayado y una alineación a la izquierda.
Pero no te preocupes, que veremos todos estos elementos poco a poco. Esto solo es un ejemplo para que al menos sepas reconocer un código CSS cuando lo veas.
¿Cuáles son las novedades de CSS3?
Tal vez, la principal y más importante es la separación de la especificación en módulos, al contrario que en CSS2 donde se definía toda la especificación en un solo documento. Cada módulo añade nuevas funcionalidades a las especificaciones de CSS2, de esta forma se mantiene la compatibilidad.
Algunas de las novedades mas importantes respecto a CSS2 son:
- Esquinas redondeadas
- Sombras
- Transparencias de color
- Texto en varias columnas
- Nuevo modelo de cajas flexibles
- Nuevos selectores
- Nuevas pseudo-clases
- Animaciones
En el próximo artículo nos pondremos ya manos a la obra con los estilos de caja en CSS3.
