Definir el estilo de una página
Si queremos que todos los títulos de nuestra página,
definidos con una etiqueta del tipo <h1>,
sean de color azul, podemos indicarlo en cada etiqueta como acabamos de
aprender o podemos definirlo para toda la página en el encabezado de ésta, es
decir, dentro de la etiqueta <head>.
Para
definir estos estilos comunes a toda la página se utiliza la etiqueta <style> de
la siguiente manera:
<html>
<head>
<title>Mi página web</title>
<style type="text/css">
...
</style>
</head>
<body>
...
</body>
</html>
El
atributo type="text/css"
indica al programa que se trata de una hoja de estilo (Cascade Style Sheet).
Dentro
de la etiqueta <style> escribiremos las distintas
etiquetas y entre llaves sus propiedades según vimos en el apartado anterior. Veamos un ejemplo:
<style type="text/css">
body {
background:
yellow;
font-family:
monospace;
}
h1,h2,h3,h4,h5 {
color: navy;
}
</style>
Es
posible también definir estilos diferentes para la misma etiqueta. Observa el
siguiente ejemplo:
<style type="text/css">
p {font-family: serif;}
p.azul {color: navy;}
</style>
En
el ejemplo anterior hemos definido el tipo de fuente de la etiqueta <p> como serif,
pero hemos definido una ”subetiqueta“
o clase de <p> llamada azul
y que tendrá color azul marino.
Para indicar que un párrafo definido por <p>
es de la clase azul lo indicaremos con el atributo class="azul".
Observa como queda el código y el resultado final:
|
Código
|
<p>Este es un párrafo normal</p>
<p class="azul">...y este azul marino.</p>
|
|
Resultado
|
Este es un párrafo normal
...y este azul marino.
|
También
es posible definir una clase genérica que podrá ser utilizada dentro de
cualquier etiqueta. Por ejemplo:
<style type="text/css">
.centrado {text-align: center;}
</style>
Con
esta clase podemos centrar cualquier texto definido por una etiqueta de bloque
escribiendo, por ejemplo <p class="centrado">
o <h1 class="centrado">.
| 
