Hoja De Estilo En Cascada o CSS

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales con el elemento «style».

¿Cómo se utiliza?

CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web.

Estructura:

Sintaxis Básica

Reglas

Selectores

Todo elemento HTML es un posible selector CSS1. El selector es simplemente el elemento al que se asocia un determinado estilo. Por ejemplo, el selector en

P { text-indent: 3em }

es P.

Selectores de Clase

Un solo selector puede tener diferentes clases, con esto, se permite al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar código de un color o de otro dependiendo del lenguaje:

code.html { color: #191970 }

code.css  { color: #4b0082 }

En el ejemplo anterior se han creado dos clases, css y html para utilizarlas con el elemento CODE de HTML. El atributo CLASS se utiliza en HTML para indicar la clase de un elemento, p.ej.,

<P class="atencion">Sólo se permite una clase por selector.

Por ejemplo, code.html.propietario sería incorrecto.</p>

Se pueden declarar clases sin ningún elemento asociado. Por ejemplo:

.nota { font-size: small }

En este caso, la clase nota se puede utilizar en cualquier elemento.

Una buena costumbre es nombrar a las clases de acuerdo a su función en vez de a su apariencia. La clase nota del ejemplo anterior bien podría heberse llamado letruca, pero este nombre llevaría a confusiones si el autor decidiera cambiar el estilo de la clase a otro estilo que no tenga una fuente pequeña.

Selectores ID

Los selectores ID se asignan individualmente con el propósito de definir bases sobre un único elemento. Este tipo de selectores debe utilizarse con cautela debido a sus limitaciones de herencia. Un selector ID se asigna utilizando el indicador "#" precediendo al nombre. Por ejemplo, una asignación de selector iD sería la siguiente:

#tab3m { text-indent: 3em }

Esto podría ser referenciado en HTML mediante el atributo ID:

<P ID="tab3m">Texto con tabulación de 3em</P>

Selectores Contextuales

Los selectores contextuales son simples cadenas de caracteres de dos o más selectores separados por un espacio en blanco. A estos selectores se les puede asignar propiedades normales y, debido a las reglas del orden de cascada, pueden tomar precedencia sobre selectores simples. Por ejemplo, el selector contextual en

P EM { background: yellow }

es P EM. Esta regla establece que el texto en cursiva dentro de un párrafo debe tener un color de fondo amarillo; el texto en cursiva en una cabecera no se verá afectado.

Declaraciones

Propiedades

Se asigna una propiedad a un selector para manipular su estilo. Ejemplos de propiedades son color, margin, y font.

Valores

El valor de una declaración es una asignación que recibe una propiedad. Por ejemplo, la propiedad color puede recibir el valor red.