Fundamentos del lenguaje CSS

Ya hemos revisado las etiquetas principales del lenguaje HTML y ahora es el momento de embellecer. Sería ideal tener la capacidad de cambiar el color del texto, su tamaño, el fondo y mucho más. Esto se hace mediante el lenguaje CSS.

Normalmente, los comandos CSS (estilos) se almacenan en un archivo separado, que se conecta mediante una etiqueta especial a todas las páginas HTML de nuestro sitio web.

La ventaja de este enfoque es que el archivo CSS es único, mientras que puede haber cualquier cantidad de archivos HTML, incluso mil. Si hacemos un cambio en un lugar del archivo CSS, por ejemplo, pintamos todos los párrafos en color rojo, estos cambios se aplicarán en todas las mil páginas HTML que tengan conectado nuestro archivo CSS. Muy conveniente y rápido.

El archivo de estilos debe tener la extensión .css. Para conectar dicho archivo a una página HTML, en la etiqueta head se debe escribir la siguiente construcción:

html<link rel="stylesheet" href="fileName.css">

En el siguiente ejemplo, a nuestro archivo HTML se conecta el archivo CSS styles.css:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>
      This is a paragraph with text.
    </p>
  </body>
</html>