Como insertar CSS

El código CSS puede ser insertado de 3 maneras diferentes como se muestra a continuación:

 

Insertar código CSS en la etiqueta HTML (CSS en linea):

Insertar CSS en línea significa incluir el código en el atributo style dentro de la etiqueta HTML.

Las étiquetas HTML son las que permiten insertar el contendo y darle un sentido lógico. Ejemplo de estas son <section>, <article>, <a>, <img>, <video>, <div>, <body> y todas las demás (ver HTML).

Para insertar CSS es necesario incluir en estas etiquetas el atributo style así:

<div style="background-color:#F00;">Texto</div>

En el ejemplo anterior insertamos el atributo style en una etiqueta div (<div>) a la que le asignamos un fondo de color rojo.

Esta forma debe ser evitada, ya que complica el trabajo de edición y es la que mayor importancia tiene al aplicar el estilo como veremos más adelante.

Insertar código CSS en la cabecera HTML:

Esta forma es muy usual ya que el código CSS se puede administrar fácilmente cuando el sitio tiene una sola página o cuando los estilos aquí incluidos solo aplican a la página en cuestión, pero es poco recomendado para sitios con muchas páginas.

El código se inserta en la etiqueta <head> </head> entre la etiqueta <style type="text/css"> </style> de la siguiente manera:

<html>

   <head>

       <style type="text/css">

            ...El código CSS va aquí...

        </style>

   </head>

   <body>

   </body>

</html>

Para utilizar este método es necesario utilizar selectores que indican a que se le aplica cada estilo como lo veremos más adelante.

 

Insertar código CSS en un archivo aparte:

Otra forma de insertar código CSS es desde un archivo independiente que sólo tiene código CSS. Para esto es necesario contar con el archivo HTML del contenido desde el que enlazamos la hoja de estilos y el archivo CSS con los estilos así:

Archivo HTML que llamaremos home.html

<html>

   <head>

       <link rel="stylesheet" type="text/css" href="estilo.css"/>

   </head>

   <body>

   </body>

</html>

Como se puede ver, la etiqueta link enlaza al archivo estilo.css en el atributo href que es el que contiene todo el código CSS.

 

Archivo CSS que llamaremos estilo.css

... el CSS va aquí...

 

Atributo media:

La etiqueta link también puede llevar el atributo media que permite asignar el tipo de uso que se le da a la hoja de estilos, como por ejemplo para pantallas, impresión, braile, proyección, etc.

El siguiente ejemplo incluye un estilo CSS para impresión y uno para pantalla así:

El archivo HTML que llamaremos inicio.html

<html>

   <head>

       <link media="screen" rel="stylesheet" type="text/css" href="estilo_pantalla.css"/>

       <link media="print" rel="stylesheet" type="text/css" href="estilo_impresion.css"/>

   </head>

   <body>

   </body>

</html>

Como se puede ver, las etiquetas link enlazan a dos archivos diferentes, uno a estilo_pantalla.css con el atributo media con valor screen (pantalla) y el otro con al archivo estilo_impresion.css con el atributo media con valor print (impresión). De esta forma el sitio web establece que estilos se aplican cuando se muestra en una pantalla y cuales cuando esta se imprime.

 

En este caso tenemos un archivo CSS para pantallas que llamaremos estilo_pantalla.css que enlaza desde el HTML.

... el CSS para pantallas va aquí...

 

y un archivo CSS para impresión que llamaremos estilo_impresion.css que enlaza tambien desde el HTML.

... el CSS para impresión va aquí...

 

Conclusiones:

  • Cuando se trabaja con CSS la mejor forma de insertar el código es enlazandolo desde un archivo independiente para facilitar la administración del diseño del sitio.
  • Si el sitio web es de una sóla página, la mejor forma es insertar el CSS en el head.
  • En el peor de los casos el código debe ser insertado en el atributo style de la etiqueta a la que se va a aplicar.