hojas de estilo html 5

HOJAS DE ESTILO
Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática.
Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio, incluso a veces
permiten definir características que no permiten definir los estilos HTML, como el color de fondo para el texto por
ejemplo.
Al estar la definición de los estilos en unarchivo externo a las páginas y común a todas las páginas del sitio (es
recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de
manera segura e inmediata cambiando únicamente la hoja de estilos.
Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la
etiqueta (que corresponde a los hiperenlaces). Deeste modo, todos los hiperenlaces de la página o del sitio
adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe
el estilo de todos los enlaces en todas las páginas vinculadas a este estilo.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran,
aunque estos navegadoressuelen ser versiones antiguas, por lo que ocurrirá en pocos casos.
Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden
guardarse con la extensión TXT.

¿Cómo se pueden incluir estilos en un documento html?
Podemos hacerlo de tres maneras, aunque la primera de ellas, en las últimas recomendaciones de la W3C no está
recomendada, como ahoraveremos.
1. Añadiendo instrucciones de estilo sólo a etiquetas concretas. De esta manera tenemos el mismo
problema que teníamos con HTML que para cambiar cualquier formato tenemos que cambiar cientos de etiquetas
en cientos de documentos, por lo cual aunque nos permite un mayor control que el HTML, no lo recomendamos.
Se hace añadiendo el atributo style a la propia etiqueta:


2. Incluyendolas instrucciones de estilo en el encabezado de un documento HTML, tal y como vimos
en el ejemplo anterior, que nos permite cambiar la apariencia de toda la página, simplemente retocando el
encabezado.








[conjunto de todas las etiquetas que componen la página]



Cómo podéis ver, todo el código está dentro de etiquetas de comentarios html (), al igual que se hace enjavascript, y la razón es la misma. Si accede a tu página alguien utilizando un navegador que no soporta javascript,
ignorará estas órdenes, en lugar de mostrarlas en pantalla.
El atributo TYPE especifica el lenguaje que vamos a utilizar para definir los estilos.
Lo malo de esta opción es que si tienes un “look” uniforme y tienes varios documentos tienes que incluirlo en todos
los documentos, con eltiempo los “styles” de los diversos documentos empiezan a diversificarse y acabas con un lío
monumental. Lo sé por trabajosa experiencia
3. Utilizando una “hoja de estilos” externa y enlazando los documentos html a ella. De esta manera, se
puede cambiar la apariencia de múltiples páginas retocando un solo fichero. Así si queremos que nuestra web tenga
una apariencia uniforme, definiremos una hojade estilos para todos nuestros documentos.
Para crear un archivo externo que podamos enlazar, utilizamos un documento de texto que guardamos con la
extensión .css, por ejemplo: mi_estilo.css
Copiamos el código que antes habíamos puesto en el encabezado y lo pegamos en nuestro nuevo archivo:




Cuando se trata de enlazar con una hoja de estilos externa, no hay que poner las etiquetaspuesto
que al incluirla en nuestro documento html ya le decimos que se trata de una hoja de estilos, así que mi_estilo.css
nos quedaría con este código:

H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; }

P{
font-family: tahoma, arial, sans-serif;
color: #666666;
font-size: 1p2x; }
Ahora tenemos que decirle a nuestro documento html que utilice esta hoja...