Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (X)



9.7. Dónde declarar los estilos

Podemos declarar un estilo CSS en varios lugares:

1- Enlazado en otro archivo. Es la opción más recomendable. Consiste en crear un archivo de texto plano, preferiblemente, con la extensión .css, y escribir dentro la hoja de estilo. Para enlazar este archivo desde la página web escribiremos una etiqueta link, por ejemplo:

<link rel="stylesheet" href="mi_hoja.css" >

El atributo rel debe tener el valor stylesheet, el atributo type="text/css" es opcional desde la versión 5 de HTML. La etiqueta link va dentro de la etiqueta head.

Podemos incluir un atributo media para que la hoja de estilo se aplique sólo bajo determinadas condiciones. En el siguiente ejemplo se enlazará la hoja de estilo sólo si la anchura del dispositivo es menor o igual a 800px.

<link rel="stylesheet" media="(max-width: 800px)" href="mi_hoja.css" />

Definir la hoja de estilo en otro archivo tiene varias ventajas, por una parte tenemos el estilo CSS separado del código HTML y por otro lado podemos enlazar el mismo estilo desde muchas páginas web y para cambiar un estilo que afecta a muchas páginas sólo tenemos que hacerlo en un lugar.

2- Interno en la cabecera.

Mediante la etiqueta style podemos declarar un estilo dentro de la etiqueta head de un archivo HTML.

<head>
  <style h2, p { color: red } </style>
</head>

El atributo type="text/css" es opcional desde la versión HTML 5.

Este sistema también mantiene el estilo CSS separado del código HTML, pero tiene el inconveniente que si tenemos que aplicarlo a más de un archivo HTML, deberemos repetirlo varias veces, y por lo tanto será más laborioso modificarlo.

Sin embargo puede haber casos en que esté justificado su uso, por ejemplo, en un sitio web con muchas páginas web con una hoja de estilo en un archivo externo, si hay una sóla página, llamada ejemplo.html, que necesita unos estilos determinados, puede interesar crearlos dentro de esa página para evitar que aumente el tamaño del archivo de la hoja de estilo, ya que ese archivo se va a cargar muchas veces y casi nunca se utilizarán los estilos de la página ejemplo.html.

3- Dentro de la etiqueta.

Podemos definir un estilo CSS dentro de una etiqueta HTML, el estilo sólo afectará a esa etiqueta, no actuará sobre otras etiquetas. No se puede definir una clase dentro de una etiqueta.

Se escribe con el atributo style y las parejas de atributo: valor separadas por punto y coma, por ejemplo:

<div style="color: red; background-colo: white"> Ejemplo </div>

Esta es la forma menos utilizada para definir estilos CSS ya que implica un acoplamiento máximo entre el estilo CSS y el código HTML, es decir, no mantiene el estilo CSS separado del código HTML. El inconveniente es que debemos escribir el estilo tantas veces como queramos que se aplique a cada etiqueta, y por lo tanto modificarlo sería muy laborioso. También haría aumentar el tamaño del archivo .html de forma innecesaria.


Enero-2019 (V 2.0)
Pág. 9.10
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.