Se puede precisar, en la cabecera del documento, estilos para que sean aprovechados en toda la página. Es una forma muy agradable de darle representación al documento y muy poderosa, ya que estos estilos serán mantenidos en toda la página y se ahorrarán así muchas etiquetas HTML que apliquen forma al documento. Igualmente, si desean modificar los estilos de la página lo harán de una sola vez.
Este ejemplo es más complejo, ya que se maneja la sintaxis CSS de forma más avanzada. Pero no se preocupen puesto que con los ejemplos irán aprendiendo su manejo y más tarde se comentará la sintaxis en profundidad.
En el ejemplo se ve que se maneja la etiqueta <STYLE> situada en la cabecera de la página para concretar los diferentes estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se pone el nombre de la etiqueta en la que se quiere precisar los estilos y entre llaves -{}- se coloca en sintaxis CSS las peculiaridades de estilos.
<html>
<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>
<body>
<h1>Página con estilos</h1>
Sean bienvenidos..
<p>Siento ser tan escudilla, pero esto es un ejemplo sin más calidad</p>
</body>
</html>
Como pueden ver en el código, se ha determinado que la etiqueta <H1> se mostrará
- Subrayado
- Centrada
Asimismo, por ejemplo, se ha determinado que el cuerpo entero de la página (etiqueta <BODY>) se le aplique los estilos siguientes:
- Color del texto negro
- Color del fondo grisáceo
- Margen lateral de 1 centímetro
Hay que tener en consideración que si se aplican estilos a la etiqueta <BODY>, estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a concretar esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más abreviada será el que mande. Puede verse este dato en la etiqueta <P>, que tiene determinados estilos que ya fueron concretos para <BODY>. Los estilos que se deben tomar en cuenta son los de la etiqueta <P>, que es más definida.
Para finalizar, ha de apreciarse los comentarios HTML que abarcan toda la declaración de estilos: <!–Declaración de estilos–>. Estos comentarios se manejan para que los navegadores viejos, que no comprenden la sintaxis CSS, no contengan ese texto en el cuerpo de la página. Si no se colocara, los navegadores antiguos (por ejemplo Netscape 3) redactarían ese “feo código” en la página.
Estilo determinado para todo un sitio web
Una de las peculiaridades más fuertes de la programación con hojas de estilos reside en que, de una vez, se puede determinar los estilos de todo un sitio web. Esto se logra fundando un archivo donde tan sólo se colocará las declaraciones de estilos de la página y vinculando todas las páginas del sitio con ese archivo. De esta manera, todas las páginas colaboran en una misma declaración de estilos y, por tanto, si se modifica, cambiarán todas las páginas. Con las ventajas incluidas de que se ahorra en líneas de código HTML (lo que disminuye el peso del documento) y se evita la molestia de determinar una y otra vez los estilos con el HTML.
Ahora bien, verán cómo el proceso para añadir estilos con un fichero externo.
1- Se crea el fichero con la declaración de estilos
Es un fichero de texto normal, que puede poseer cualquier extensión, sin embargo, le pueden asignar la extensión .css para aclarar qué tipo de archivo es. El texto que debe tener tiene que ser escrito únicamente en sintaxis CSS, es decir, sería erróneo añadir un código HTML en el: etiquetas y demás. Se puede visualizar un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
