Estás en:

Oficina Española

» Documentos y Guías

» Guias Breves

» Hojas de Estilo

Volver al índice

Guía Breve de CSS

Saltar
Navegación.

[¿Qué
es?] [¿Para qué
sirve?] [¿Cómo
funciona?] [Ejemplos] [Más
información]

¿Qué es CSS?

Saltar
Introducción.

Hojas de Estilo en Cascada (Cascading Style
Sheets), es un mecanismo simple que describe cómo se va a mostrar un
documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser
pronunciada la información presente en ese documento a través de un dispositivo
de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el
control total sobre estilo y formato de sus documentos.

¿Para qué sirve?

Saltar
Uso.

CSS se utiliza para dar estilo a documentos HTML y XML, separando el
contenido de la presentación. Los Estilos definen la forma de mostrar
los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el
estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio
en el estilo marcado para un elemento en la CSS afectará a todas las páginas
vinculadas a esa CSS en las que aparezca ese elemento.

¿Cómo funciona?

Saltar
Funcionamiento.

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno
o más elementos. Las hojas de estilo están compuestas por una o más de esas
reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un
selector y la declaración. A su vez la declaración está compuesta por una
propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo,
especificando los elementos que se van a ver afectados por esa declaración. La
declaración es la parte de la regla que establece cuál será el efecto. En el
ejemplo anterior, el selector h1 indica que todos los elementos
h1 se verán afectados por la declaración donde se establece que la
propiedad color va a tener el valor red (rojo) para
todos los elementos h1 del documento o documentos que estén
vinculados a esa hoja de estilos.

Las tres formas más conocidas de dar estilo a un documento son las
siguientes:

Utilizando una hoja de estilo externa que estará vinculada a un documento
a través del elemento <link>, el cual debe ir situado en la
sección <head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>

Utilizando el elemento <style>, en el interior del
documento al que se le quiere dar estilo, y que generalmente se situaría en la
sección <head>. De esta forma los estilos serán reconocidos
antes de que la página se cargue por completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo interna</title>
<style type="text/css">

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}

h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}

</style>
</head>
<body>
<h1>Aquí se aplicará el estilo de letra para el Título</h1>
</body>
</html>

Utilizando estilos directamente sobre aquellos elementos que lo permiten a
través del atributo <style> dentro de
<body>. Pero este tipo de definición del estilo pierde las
ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la
presentación.

Algunas normas básicas a la hora de crear una CSS son las siguientes:

En el siguiente ejemplo, h1{color: red;}, el
selector, <h1>, le dice al navegador la parte del
documento que se verá afectada por esa regla. Los selectores pueden aparecer
individualmente o agrupados, separándolos con comas:
h1, h2, h3 {
color: red;
}

o lo que es lo mismo
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

La propiedad, que en este caso sería color,
especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada
será el color. Las propiedades que se desean modificar en una CSS para un
mismo selector pueden agruparse, pero será necesario separar cada una de ellas
con un punto y coma.
p {text-align:center;color:red}
Normalmente se describe una
propiedad por línea, de la siguiente manera:
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}

El valor, representado a la derecha de los dos puntos
(:), establece el valor de la propiedad. Es importante recordar
que si el valor está formado por más de una palabra, hay que ponerlo entre
comillas.
p {font-family: "sans serif";}

Ejemplos

Saltar
Ejemplos.

A continuación se muestran tres ejemplos de Hojas de Estilo diferentes, en
las que se cambian algunas características, vinculadas a este mismo documento:
La Guía Breve de CSS. Comprueba el cambio de aspecto:

Guía Breve de CSS sin
vincular a una CSS

Guía Breve de CSS. Ejemplo
de Estilo 1

Guía Breve de CSS. Ejemplo
de Estilo 2

Más información sobre CSS

Guía de
Referencia Rápida de CSS 2

Incluye una referencia de todos los selectores, propiedades, valores, etc.

Página principal de
CSS

Incluye multitud de recursos sobre CSS.

Especificaciones
CSS

Conjunto de todas las especificaciones de CSS existentes.

Tutorial introductorio de CSS

Breve tutorial desarrollado por Bert Bos para quienes
desean utilizar CSS y no tienen experiencia.

Añadir un toque
de estilo

Guía desarrollada por Dave Raggett que
te ayudará de forma sencilla a dar estilo a tus documentos.

Consejos y
Trucos de CSS

Colección de ejemplos CSS con una breve descripción de cómo utilizarlos.

CSS Zen
Garden

El Jardín Zen del CSS es un ejercicio de aprendizaje y demostración de las
posibilidades de diseño que ofrece CSS, para ello se presentan diferentes
hojas de estilo para un mismo contenido y así podremos ver los cambios de
estilo que se producen sin tener que modificar el documento.

Camaleón CSS

Proyecto de origen hispano inspirado en la misma idea y concepto original
del CSS Zen Garden.

Validador de CSS

Servicio del W3C online y gratuito que
nos permite comprobar la validez de las Hojas de Estilo.

Volver al
inicio.

Webmaster · Última
modificación: 09/01/2008 13:51

Copyright © 1994-2005 W3C® (MIT, ERCIM, Keio). Todos los derechos reservados. Son aplicables las
reglas de responsabilidad, marcas registradas, utilización de documentos y licencias de software. Las interacciones con este sitio están
de acuerdo con nuestra declaración de privacidad de usuarios y miembros.