Tipos de estilos
Estilos individuales
Los estilos individuales afectan a una sola etiqueta y se colocan con el
atributo style. El siguiente ejemplo define un estilo con tipo de letra courier
de 19 puntos para la etiqueta h1
<h1 style="font-size: 19pt; font-family:
courier">Título</h1>
La sintaxis general es la siguiente
<etiqueta style="propiedad: valor; propiedad: valor; ...">
En los estilos individuales, el estilo definido únicamente afecta al
elemento para el que se define, y no al resto de elementos del mismo tipo.
Estilos genéricos
Para aplicar un estilo a todas las apariciones de un elemento en la
página y no a una sola se utiliza un estilo genérico. Los estilos
genéricos se definen mediante el elemento style en la cabecera de la
página. Por ejemplo,
<head>
<style type="text/css">
<!--
h1 {
font-size: 24pt;
font-family: arial;
text-align: center;
}
h2 {
font-size: 18pt;
font-family: arial;
text-align: left;
}
-->
</style>
</head>
En este caso todas las veces que se use un h1 o un h2 aparecerán con
este estilo.
Enlace a una hoja de estilos externa
Los estilos pueden almacenarse en un documento independiente llamado hoja de
estilos y enlazarse desde el documento html mediante el elemento link
<link rel="stylesheet" type="text/css"
href="dirección url del css">
La hoja de estilos es un fichero de texto que contiene únicamente las
definiciones de los estilos con el método genérico. Por ejemplo,
los estilos anteriores podrían definirse en un fichero estilos.css que
contendría lo siguiente
h1 {
font-size: 24pt;
font-family: arial;
text-align: center;
}
h2 {
font-size: 18pt;
font-family: arial;
text-align: left;
}
Esto genera mucha independencia al diseño, ya que permite generar
diferentes estilos para una misma página sin necesidad de retocar el
código, únicamente asignando diferentes hojas de estilos a un
mismo documento html. También se puede asignar la hoja de estilos a
todas las páginas de un sitio consiguiendo que todo el sitio web
contenga los mismos estilos y mantenga la concordancia. Otro aspecto a tener en
cuenta es que el tamaño de los documentos html se reduce al eliminar el
contenido que anteriormente definía los estilos de la página.