CSS3 (Hojas de Estilo en Cascada )

CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, gradientes , transiciones o animaciones, y nuevos layouts como multi-columnas, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).

Entonces ¿qué es CSS, realmente?

Como HTML, CSS no es realmente un lenguaje de programación. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:

p {

  color: red;

}

Anatomía de una regla CSS

Observemos al CSS de arriba, un poco más a detalle:

La estructura completa es llamada regla predeterminada (pero a menudo "regla" para abreviar). Nota también los nombres de las partes individuales:

Selector

El elemento HTML en el que comienza la regla. esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos p ). Para dar estilo a un elemento diferente, solo cambia el selector.

Declaración

Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.

Propiedades

Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento p.) En CSS, seleccionas que propiedad quieres afectar en tu regla.

Valor de la propiedad

A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de red).

Nota las otras partes importantes de la sintaxis:

Cada una de las reglas (aparte del selector) deben estar encapsulada entre corchetes ({}).

Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.

Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

Asi que para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

p {

  color: red;

  width: 500px;

  border: 1px solid black;

}

Seleccionando varios elementos

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas(,). Por ejemplo:

p,li,h1 {

  color: red;

}

Diferentes tipos de selector

Existen muchos tipos diferentes de selectores. Antes, solo vimos los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo podemos hacer selecciones más específicas que esas. Enseguida están algunos de los tipos de selectores más comunes: