Resumen CSS3

CSS3

Es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.

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. 

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).

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: