El HTML no estaba destinado a ser una herramienta de diseño gráfico. Fue creado como una simple manera de mostrar el texto en un navegador, más bien como un procesador de textos muestra el texto en una página. Las etiquetas fueron añadidas a lo largo de los años para añadir un poco de color y la vida en la página blanca básica (en realidad, gris al principio). Así que llegaron las cosas como imágenes, tablas, marcos y formas. Todo esto podría ser presentado en el usando código HTML directo.

Los diseñadores web clamaron por una mejor manera de presentar su trabajo en una página web. El simple HTML no era suficiente. Después de todo, con el HTML, para obtener texto o una imagen exactamente donde la quieres, tienes que recurrir a tablas complicadas para forzar la alineación. Y supongamos que quieres color detrás de un solo párrafo de texto, y no tener que colorear toda la página? Es muy difícil con el HTML directo. ¿Y qué hay de los hipervínculos? ¿Hay alguna forma, con el HTML, de que podamos convertir la subrayado de vez en cuando?

Estas preguntas, y muchas más, fueron finalmente abordadas por la introducción de hojas de estilo en cascada. Un estilo es, básicamente, sólo otra forma de manipular elementos en una página, para dar una chispa de vida a su diseño web.

¿Qué es una hoja de estilo? (etiqueta__7)

Si estuvieras usando un procesador de palabras como Microsoft Word, podrías decir que el procesador de palabras cómo quieres que se formateen los bloques de texto. Por ejemplo, todos los de los encabezados de sus páginas podría ser en 28 puntos Times, en negrita y en color rojo. Si que querías el mismo encabezado de nuevo, puedes hacer clic en una lista desplegable y seleccionar el estilo de dirección que has establecido.

Usando HTML directo, no puedes hacer eso. No hay forma de aplicar el mismo formato con una sola etiqueta. Las hojas de estilo en cascada, sin embargo, te permiten hacer precisamente eso ...cambiar bloques enteros de texto con una sola etiqueta. Esto no sólo hace que tu código más fácil de leer, también es muy simple cambiar todos los bloques formateados de para decir un tamaño o color de fuente diferente.

Por ejemplo, en HTML, si se quiere establecer el primer párrafo de cada página en negrita y cursiva, tendrías que hacer esto para cada uno de los párrafos que necesita ...lo..:

...y el de los niños... Este es el primer párrafo de la página uno. Los mismos estilos de fuentes son necesarios para cada página de mi sitio web.

Con las Hojas de Estilo, puedes deshacerte de todo ese código, y colocarlo en la CABEZA de su página. Entonces simplemente aplicarías el Estilo a cualquier párrafo que lo necesita. Así:

Clase P = "Primer Párrafo"
Este es el primer párrafo de la página uno. Los mismos estilos de fuente se necesitan para cada página de mi sitio web.

El nuevo código, estoy seguro de que estarás de acuerdo, se ve mucho más limpio. Y si deciden que el color del texto debe ser azul, puedes hacer un cambio en tu hoja de estilo y todos los primeros párrafos de sus páginas cambiarían.

Una hoja de estilo se establece usando la palabra ESTILO entre dos corchetes de ángulo. Se necesita una etiqueta final de STYLE para decirle al navegador que deje de formatear el estilo:

El código de tu hoja de estilo va entre las dos etiquetas de estilo. Aquí hay un estilo que puede cambiar el texto en azul:

Font1 { Color: Azul }

Clase P =" Font1">

Este es mi texto.

Aunque todavía no entienda la disposición del código, el punto es que usted puede añadir otros estilos al anterior que hemos llamado Font1. Podemos añadir un estilo audaz y un estilo de tamaño:

.Font1 {
Color: Azul;
Tamaño de la letra: 24pt;
Peso de la fuente: Negrita;
}

Ahora la parte del código donde aplicamos el estilo (Clase P = Font1) será ...que su texto sea actualizado. No tenemos que hacer ningún cambio en absoluto en la parte P del código.

Así que un estilo es una forma de cambiar bloques de código (o incluso palabras individuales) y aplicar formateando el bloque en su conjunto. No necesitas etiquetas HTML individuales en el CUERPO de su página; sólo usando el nombre del estilo una vez se asegurará de que su formato se aplica a todo el bloque.

En la próxima lección, aprenderás sobre las reglas del CSS.

Listas de HTML y reglas de CSS.