Quiero añadir o modificar estilos CSS a una página web... ¿Cómo lo hago? ¿Qué ficheros debo modificar?

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:

CSS externo

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

<link rel="stylesheet" type="text/css" 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 del documento), pero esta regla sólo es recomendable en ciertas situaciones puesto que su utilización afecta al rendimiento de carga de la página, así que nos centraremos sólo en la anterior.

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>
...

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.

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. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).