Mtro. Fernando Arciniega

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Tipos de hojas de estilo

Tipos de hojas de estilo

Hojas de estilo

Las hojas de estilo son un mecanismo que permiten aplicar formato a los documentos escritos en HTML, separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información.

Hojas de estilo incrustadas

Este método es el más recomendable y el que permite mayor flexibilidad: los estilos pueden cambiarse sin tocar el código HTML y la CSS puede ser compartida por varias páginas.

También existe la posibilidad de poner la hoja de estilo dentro de una página HTML usando el elemento style que se usa dentro del encabezado <head> </head>

<STYLE type="text/css">
   H1 { color: blue }
   ... (aquí se agregan todas las reglas de estilo) ...
</STYLE>

Este método permite aplicar la hoja de estilo solamente a la página que la contiene. Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en nuestro sitio tenemos algunas pocas páginas que usan un formato distinto al resto.

En muchos casos convendrá usar ambos métodos simultáneamente: poner un link a una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en la que solamente deberemos definir las reglas específicas para esa página. Por las leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada) con distintos valores, tiene preponderancia la definida en la hoja incrustada.

Hoja de estilo línea

No es la manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del último ejemplo constituye por sí misma una hoja de estilo por lo que debemos declarar en el encabezado de la página el tipo de CSS que estamos usando.

<STYLE type="text/css"></STYLE>

significa que si en nuestra hoja de estilo hemos definido:

P {text-align: left}

Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:

<P align="center">

El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más fuerza que el formato aplicado con HTML.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *