Leccion 8: Hojas de Estilo en Cascada

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Hojas de estilo se utilizan para controlar la apariencia de sus páginas xhtml.

Para tener una idea de lo que CSS puede hacer por su página web, eche un vistazo a esta página que contiene una tabla de propiedades CSS común: Propiedades de CSS (hojas de estilo). Ahora mire en la misma página con todos los CSS eliminados: Propiedades de CSS (sin hoja de estilo).

selector (propiedad: valor)

CSS sytax consta de una colección de pares propiedad-valor que se aplicado a un selector. Un selector puede ser una etiqueta xhtml (o una clase o nombre de identificacion, que no vamos a discutir aquí). El valor de la propiedad pares se adjuntan en corchetes ({}) y separados por un punto y coma (;).

Aquí hay un ejemplo de un estilo que se aplica a la etiqueta h1:

h1 {
    color: #ff0000;
    background-color: #ffffff;
    text-align: center;
    font-style: italic;
}

Los dos primeros pares de propiedad-valor fijado el texto de color a rojo y el fondo color a blanco. La tercera centra el texto, y la última le da un estilo de letra cursiva. Cada una de estas propiedades se aplicarán a h1 etiquetas de todo el documento.

El espacio en blanco no importa en CSS, de modo que todo podría haber sido escrito de esta manera:

h1 { color: #ff0000; background-color: #ffffff; text-align: center;
font-style: italic; }

el cual no es tan fácil de leer.

Incluyendo Hojas de Estilo

Existen 3 maneras de incluir hojas de estilo en su documento xhtml:

Hoja de Estilo en linea

Un estilo puede aplicarse a una sola etiqueta poniéndola entre comillas style= después en el interior de la etiqueta

<h1 style="text-align: center;">A Centered Title</h1>

Hoja de Estilo Interior

Para aplicar un estilo a un documento, pongalo en el interior de la cabeza del documento (entre <style></style> etiquetas) como este:

<head>
<title>Example Page with Internal Style Sheet</title>
<style type="text/css">
body {
    margin: 50px 50px 50px 50px;
    background-color: #ffffcc;
}
h1 {
    text-align: center;
    color: #009900;
    background-color: #ffffcc;
}
p {
    text-align: justify;
}
</style>
</head>

Hoja de Estilos Externa

También puede colocar su estilo en un archivo separado y enlasarlo de este modo:

<head>
<title>Example Page with External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

El archivo que contiene la hoja de estilo en este ejemplo se llama style.css, pero usted puede nombrar el archivo como desee.

Adición de Validación de Botones

Añadir esto a la parte inferior de sus páginas (justo encima de la etiqueta </body>) para incluir la validación de los botones tanto para XHTML 1.1 y CSS:

<p style="text-align: center;">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1"
style="border: 0;" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" style="border: 0;" /></a></p>

Ejercicios:

Utilice <span></span> etiquetas para cambiar el color de una sola palabra en su página de inicio para el rojo (# FF0000).
Aplicar text-decoration: line-through en un estilo en línea a un solo párrafo (<p></p> etiquetas).
Copiar paginal_basica.html a estilo_interior.html. Añadir una hoja de estilo interna a este nuevo documento.
Copiar estilo_interior.html a estilo_externa.html . Copie el interior de estilo que ha creado en el ejercicio anterior a un archivo nombrado externa.css y modifique external_style.html utilizando esta hoja de estilos externa.
Añadir la validacion de botones de cada uno de sus páginas web. Compruebe que cada uno de ellos sea válido XHTML 1.1 y CSS 2.1.
Utilize sus nuevos conocimientos de CSS para darle vida a sus páginas web!

Felicidades, usted a terminado la Leccion 8;

siguiente pagina | pagina principal