Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.
<html> <body>
<head>
<title>Ejemplo
de estilos para toda una
página</title>
<STYLE
type="text/css">
<!--
H1 {text-decoration:
underline; text-align:center}
P {font-Family:arial,verdana;
color: white; background-color: black}
BODY
{color:black;background-color: #cccccc; text-indent:1cm}
//
-->
</STYLE>
</head>
<h1>Página con
estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera,
pero esto es un ejemplo sin más
importancia</p>
</body>
</html>
Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará
Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--Declaración de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.
Pulsa para ver el ejemplo anterior.
Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos. Puedes verla pinchando aquí.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.
P { H1
{ TD
{ BODY
{
font-size :
12pt;
font-family : arial,helvetica;
font-weight :
normal;
}
font-size : 36pt;
font-family :
verdana,arial;
text-decoration : underline;
text-align :
center;
background-color : Teal;
}
font-size : 10pt;
font-family :
verdana,arial;
text-align : center;
background-color :
666666;
}
background-color : #006600;
font-family :
arial;
color :
White;
}
2- Enlazamos la página web con la hoja de estilos
Para
ello, vamos a colocar la etiqueta <LINK> con los atributos
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <body> </body>
<head>
<link rel="STYLESHEET"
type="text/css"
href="estilos.css">
<title>Página que lee
estilos</title>
</head>
<h1>Página que lee
estilos</h1>
Esta página tiene en la cabecera la
etiqueta necesaria para enlazar con la hoja de estilos. Es muy
fácil.
<br>
<br>
<table width="300"
cellspacing="2" cellpadding="2"
border="0">
<tr>
<td>Esto
está dentro de un TD, luego tiene estilo propio, declarado en
el fichero
externo</td>
</tr>
<tr>
<td>La segunda fila del
TD</td>
</tr>
</table>
</html>
El resultado conseguido se puede ver aquí
En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:
Compartir en redes sociales
| Por: David | 20/7/2004
|
| Por: Borja | 27/1/2005
|
| Por: zerjy | 08/2/2007
|
 german_... | css | 06/6/2009 |
earbole... | Muy Util | 21/7/2009 |
| Gracias Por: Fiorela | 26/8/2009
|
| Excelente Por: Rommy | 30/9/2009
|
stargat... | sencillo, pero muy practico | 30/3/2010 |
Seifus | Estupendo | 12/8/2010 |
| Que es TD? Por: Empanada | 22/8/2010
|
| Selector TD | 23/8/2010 |
manzurm... | Genial | 16/10/2010 |
| Exceltente trabajo!! | 03/11/2011 |
Usuarios: 
01 de enero de 2001
Valoración del artículo:
