¿Cómo usar CSS?

Antes de empezar con CSS, debemos saber las formas en las que podemos incluir contenido CSS en nuestros documentos HTML. Existen tres formas diferentes principales:

En la cabecera del HTML, el bloque <head></head>, incluimos una relación al archivo CSS en cuestión:

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

De esta forma, los navegadores sabrán que deben aplicar los estilos de este archivo (index.css) al documento HTML actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa sensación de página no cargada por completo.

Esta es la manera recomendada de utilizar un archivo CSS en nuestros documento y la que utilizaremos principalmente.

También es posible incluir archivos CSS mediante la regla @import (las cuales deberían ir al principio de un archivo CSS), pero el uso de esta regla, en algunas situaciones, puede afectar al rendimiento de carga de la página, así que nos centraremos en ella más adelante.

Etiqueta "style" (CSS Interno)

Otra de las formas que existen para incluir estilos en un documento HTML es la de añadirlos directamente en la cabecera HTML del documento:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <style type="text/css">
      div {
        background: #ffffff;
      }
    </style>
  </head>
  ...
</html>

Este sistema puede servir en algunos casos, pero hay que tener en cuenta que utilizándolo, arruinamos la ventaja de tener los estilos en un documento independiente, por lo que siempre es preferible guardarlo en un archivo externo CSS.

Atributo style (CSS embebido)

Por último, la tercera forma de aplicar estilos en un documento HTML es hacerlo directamente en las propias etiquetas, a través del atributo style:

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

Al igual que en el método anterior, se recomienda no utilizarse salvo casos muy específicos, ya que se pierde la independencia de la presentación y contenido. Sin embargo, es una opción que puede venir bien en algunos casos.

Consejo: Si quieres comenzar a hacer pruebas con propiedades básicas de CSS, puedes utilizar CodePen, una plataforma web que te permite crear contenido HTML5, CSS3 y Javascript, previsualizando al vuelo el documento final, sin necesidad de recargar el documento.

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.