Hojas de estilo en cascada (CSS)

Las hojas de estilo son útiles para definir atributos visuales en documentos HTML (lenguaje de marcas hipertextual). Esto proporciona al autor métodos poderosos para definir el estilo visual del documento mientras separa la parte semántica (HTML) de la de presentación (hojas de estilo). En este tutorial aprenderás a implementar atributos de estilo en documentos HTML.

Propiedades de estilo

Las propiedades y sus valores son definidos utilizando una sintaxis simple de CSS (hojas de estilo en cascada). Estas definiciones no pertenecen al estándar HTML, pero están pensados para reemplazar los atributos de presentación que HTML ha adquirido en sus primeros tiempos.

nombre-propiedad: valor-propiedad;

De esta forma, puedes definir múltiples valores para múltiples propiedades en un mismo bloque dado que una definición básica es separada de la siguiente por el punto y coma. Un grupo de propiedades y valores puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento en todo el documento. En este ejemplo un conjunto de propiedades visuales son definidas para el tag HTML p. Para lograr esto, el nombre de este elemento aparece ante las declaraciones de propiedades que se encuentran encerradas entre corchetes ("{" y "}").

p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}

Declarar este código en tu documento HTML hará que todos los párrafos tomen estas propiedades. En algunos casos necesitas establecer propiedades solo para algunos párrafos en lugar de para todos. Si ese es el caso puedes usar el atributo "style" o clases.

Para encontrar más propiedades, por favor refiérete a este índice de propiedades para CSS 2.

Definiciones de estilo

Puedes definir propiedades de estilo de tres formas: dentro del tag de apertura de un elemento específico (usando el atributo "style"), dentro de un bloque en el encabezado del documento (usando el tag HTML style) o en archivos externos (usando eltag HTML link).

Usando el atributo "style"

El atributo "style" provee una forma de declarar propiedades de estilo en una línea como valor de un atributo. Es útil cuando el autor necesita declarar un grupo único de atributos para un elemento específico. La sintaxis para las propiedades CSS es la misma y deben ser declaradas de esta forma:

Código	Visualización
Contenido del párrafo	Contenido del párrafo

Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior, la diferencia es que este último afecta solo al objeto contenedor y el primero afecta implícitamente a todos los párrafos.

Usando el tag HTML style

El tag HTML style define un bloque donde las declaraciones de hojas de estilo pueden ser contenidas. El bloque "style" debe ubicarse en algún lugar del encabezado del documento (tag HTML head) y definirá estilos y clases para el documento actual.

Nota que estas dos definiciones afectarán a todos los elementos "a" y "p" presentes en el documento actual.

Usando archivos externos

Los archivos externos también pueden ser utilizados para definir propiedades de estilo para uno o más documentos. El archivo, usualmente lleva una extensión "css" (por ejemplo, basico.css) y un conjunto de propiedades que puede ser definido en la misma forma que el contenido del tag HTML style. Esta práctica separa completamente la semántica de la presentación en un documento, mientras ayuda a los autores a compartir definiciones de estilo entre todas las páginas de un sitio.

Para referirse a este archivo CSS desde un documento HTML, puedes usar el tag HTML link. Esto especifica al agente procesador dónde pueden encontrarse las declaraciones de estilo para este documento.

< link type="text/css" href="basico.css" />

Como puedes ver, puedes utilizar este método para referirte a un solo archivo CSS desde múltiples documentos HTML. Esto te ayudará a definir atributos comunes en todo el sitio, mientras facilitará el trabajo de cambiar y actualizar las definiciones de estilo.

Clases en CSS

Una clase en CSS es una forma de agrupar propiedades que pueden posteriormente ser aplicadas a un elemento específico usando su atributo "class". Estos grupos reciben nombres y pueden ser definidos para elementos específicos o para todos ellos. Para definir una clase los autores deben escribir el elemento para el cual es declarada, seguido de un punto y del nombre de la clase. El bloque de propiedades es encerrado por corchetes como en los ejemplos anteriores.

En el siguiente ejemplo definiremos tres clases: la primera llamada "importante" para el elemento "p", la segunda llamada "chica" para todos los elementos y la tercera llamada "grande" para todos los elementos también.

p.importante {
color: red;
}

*.chica {
font-size: 8px;
}

.grande {
font-size: 12px;
}

Nota que el uso del asterisco como elemento indica que esta clase puede ser aplicada a cualquier tipo de elemento (es igual a no usar nada). También toma en cuenta que la primera declaración no especifica que la clase debe ser automáticamente aplicada a todo elemento "p" en el documento a menos que tengan el nombre de la clase como valor del atributo "class".

Usando el atributo "class"

Usemos el ejemplo anterior para mostrar como aplicar las propiedades agrupadas en clases a los elementos en un documento HTML. En el ejemplo siguiente, aplicaremos las tres clases a tres párrafos respectivamente.

Importante

Chica

Grande

Recuerda que la clase "importante" ha sido solo definida para el elemento "p" de modo que ha funcionado correctamente en el ejemplo anterior, pero no funcionaría si la aplicáramos a otro tipo de elemento.

Vínculo importante

En este caso, el agente procesador intentará encontrar una clase con el nombre "importante" que haya sido definida para el elemento "a" (a.importante {...) o para todos los elementos (.importante {...), y como no existe una clase con dichas características, ninguna propiedad será aplicada al elemento.

El atributo "class" también soporta una lista de clases separada por espacios como valor, lo que puede ser útil para aplicar múltiples propiedades de diferentes clases a un solo elemento y de una sola vez.

Importante y grande

Este párrafo no solo tendrá un color rojo (de la clase "importante") sino que además tendrá un tamaño de fuente de "12px" (de la clase "grande").