Antes de que las Hojas de Estilo (CSS) viesen la luz, los desarrolladores web usaban la etiqueta <font> dar color, tamaño y estilo al texto.
<font face="Verdana, Arial" size="+3" color="black">La situación actual...</font>
Aunque el método descrito sea adecuado para cambiar la apariencia del tipo de letra; ¿qué ocurre cuando lo usamos para manipular sitios web completos?.
Problemas:
- La actualización del sitio consume más tiempo.
- Puede incrementar el número de errores al maquetar.
CSS nos ayuda a eliminar esos problemas de diseño y mantenimiento. Este problema lo podemos resolver de distintas formas, como por ejemplo colocando el contenido dentro de la etiqueta <p>:
<p> La situación actual... </p>
Después usamos CSS en la cabecera del documento para dar estilo al elemento <p>
<style type="text/css" media="all">
p {
color:blue;
font-size: small;
font-family: Verdana, Arial, sans-serif;
}
Hemos conseguido separar la estructura y la presentación visual del documento. El proceso de mantenimiento y modificación del sitio web resulta mucho más simple.
Podemos especificar los tipos de fuente, colocándolas una detrás de otra separadas por un punto y coma (;). Si el navegador no puede encontrar la primera fuente de la lista, intentará encontrar la siguiente y así sucesivamente, hasta encontrar una fuente.
Si el nombre de la fuente contiene espacios, encerramos el nombre entre comillas simples o dobles. Al final de la lista, deberíamos de insertar un tipo de fuente genérico. CSS ofrece cinco familias con sus valores a elegir.
Fuentes genéricas
serif (Georgia, Times, Times New Roman, Gramound, Century Schoolbook)
sans-serif (Verdana, Arial, Helvetica, Trebuchet, Tahoma)
monospace (Courier, MS Courier New, Prestige)
fantasy (Comic sans, Whimsey, Critter, Cottonwood)
Los elementos hijos heredan las propiedades del padre. Por ejemplo:
<p style="font-family: serif;">El hombre es celoso si ama; <em>la mujer</em> también, aunque no ame.</p>
El párrafo anterior contiene un elemento <em> como hijo de <p>. El texto de <em> también contiene las propiedades de <p>.