FAQ | Internet y la web | El Diseño web | Páginas web | Lenguaje html | Imágenes | Tablas | Estilos

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.




Diseño web de Hooping