Cómo añadir CSS en nuestra web

Cómo añadir CSS en nuestra web

estilos-cssEn nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros archivos HTML. A continuación, veremos tres formas diferentes para incluir CSS en un documento HTML.

1- Incluir CSS en el mismo documento HTML

Esto se hace en el HEAD del documento, es decir, entre las etiquetas <head></head>. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar una a una todas las páginas que incluyen el estilo que se va a modificar.

En nuestra página html quedarían incluidos así:

 

<!DOCTYPE html >
<html lang="es">
<head>

<title>Estilos CSS - Ejemplo</title>
<style type="text/css">
p { color:green; font-size: 13px }
</style>
</head>
<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

 

2- Inlcuir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS. El cual se enlaza al HTML mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css. Se pueden enlazar a las páginas HTML tantos archivos CSS como sean necesarios.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

  1. Crea un archivo de texto con el siguiente contenido: p { color:green; font-size: 13px }
  2. Guarda el archivo de texto con el nombre estilos.css.
  3. En el HTML debes enlazar el archivo CSS mediante la etiqueta <link>:


<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

Cuando el navegador carga la página HTML, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.  En este caso es solo para «screen». Pero también se pueden enlazar estilos especificos para imprimir utilizando «print».

Este es el modo más correcto y utilizado de añadir estilos CSS.

El principal motivo es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que nos permite tener  los mismos estilos en todas las páginas que forman un sitio web.

Este método simplifica el mantenimiento de un sitio al máximo, ya que un solo cambio en un solo archivo CSS permite modificar de forma rápida y sencilla los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las diferentes formas de incluir la hoja de estilos del ejemplo anterior serían así:


@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

3- Incluir CSS en los elementos HTML

La tercer forma de incluir estilos CSS en documentos HTML es hacer sobre las etiquetas de html.

Ejemplo:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
</head>

<body>
<p style="color:green; font-size: 13px">Un párrafo de Ejemplo.</p>
</body>
</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto o en los html que se usan en plantillas de e-mails. Resulta un método muy dificultoso para realizar modificaciones en un futuro, ya que se deberían hacer una a una por etiqueta.

Hemos mencionado la técnica que nos parece mejor (caso 2), pero no hay que dejar de lado las demás, ya que cada caso puede ser particular y conocer todas las opciones con las que contamos nos permitirá saber cual se adapta mejor para cada situación. Nosotros utilizamos las tres de forma combinada para obtener el mayor provecho según sea necesario.

Si quieres puedes compartir con nosotros tus experiencias con cada método!

Saludos!

Deja un comentario

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