¿Cómo usar CSS?

Antes de comenzar a trabajar con CSS hay que conocer las diferentes formas para incluir estilos en nuestros documentos HTML, ya que hay varias, cada una con sus particularidades y diferencias.

En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la última la menos habitual:

Nombre Método Descripción
CSS Externo Etiqueta <link> El código se escribe en un archivo .css a parte. Método más habitual.
CSS Interno Etiqueta <style> El código se escribe en una etiqueta <style> en el documento HTML.
Estilos en línea Atributo style="..." El código se escribe en un atributo HTML de una etiqueta.

Veamos cada una de ellas detalladamente:

En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>, podemos incluir una etiqueta <link> con la que establecemos una relación entre el documento actual y el archivo CSS que indicamos en el atributo href:

<link rel="stylesheet" href="index.css" />

De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la página está en blanco y no ha sido cargada por completo.

Esta es la manera recomendada de utilizar estilos CSS en nuestros documentos.

Incluir CSS en el HTML (style)

Otra de las formas habituales que existen para incluir estilos CSS en nuestra página es la de añadirlos directamente en el documento HTML, a través de una etiqueta <style> que contendrá el código CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <style>
      div {
        background: hotpink;
        color: white;
      }
    </style>
  </head>
  ...
</html>

Este sistema puede servirnos en ciertos casos particulares, pero hay que darle prioridad al método anterior (CSS externo), ya que incluyendo el código CSS en el interior del archivo HTML arruinamos la posibilidad de tener el código CSS en un documento a parte, pudiendo reutilizarlo y enlazarlo desde otros documentos HTML mediante la etiqueta <link>.

Aunque no es obligatorio, es muy común que las etiquetas <style> se encuentren en la cabecera <head> del documento HTML, ya que antiguamente era la única forma de hacerlo.

Estilos en línea (atributo style)

Por último, la tercera forma de aplicar estilos en un documento HTML es hacerlo directamente, a través del atributo style de la propia etiqueta donde queramos aplicar el estilo:

<p>¡Hola <span style="color:red">amigo lector</span>!</p>

De la misma forma que en el método anterior, se recomienda no utilizarse salvo casos muy específicos, ya que los estilos se asocian a la etiqueta en cuestión y no pueden reutilizarse. Sin embargo, es una opción que puede venir bien en algunos casos.

Consejo: Si quieres comenzar a hacer pruebas rápidas con HTML, CSS y Javascript puedes utilizar CodePen, una plataforma web que te permite crear contenido HTML, CSS y Javascript, previsualizando al vuelo el resultado del documento final, sin necesidad editores.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.