Saltar navegación

Incluír CSS na páxina HTML

Antes de comezar...

Unha das principais características de CSS é a súa flexibilidade e as diferentes opcións que ofrece para realizar unha mesma tarefa. De feito, existen tres opcións para incluír CSS nun documento HTML.

  • Incluír os estilos dentro dunha etiqueta. So afectarán a esa etiqueta
  • Incluír os estilo só nunha mesma páxina HTML (follas de estilo internas). So afectarán a esa páxina HTML
  • Definir os estilos nun arquivo externo (follas de estilo externas). Poderá afectar a varias páxinas, incluso a todo o sitio Web.

Estilos dentro dunha etiqueta html

Podemos inserir as regras de estilo directamente dentro de calquera etiqueta HTML mediante o atributo style.

Para utilizar os estilos en liña, engadir o atributo de estilo na etiqueta correspondente. O atributo de estilo pode conter calquera propiedade CSS. O exemplo mostra como cambiar a cor dun parágrafo:

<!doctype html>
<html>
  <head> 
  ...
  </head>
  <body>
    <p style="color: blue;"> Isto é un parágrafo de cor azul. </p>
   ....

Esta forma de incluír estilos perde moitas das vantaxes dunha folla de estilo xa que mestura o contido coa presentación. Non debemos de empregar este método salvo que sexa necesario por calquera circunstancia.

Follas de estilo internas (so lle afecta a un único html)

Os estilos defínense nunha zona específica do propio documento HTML. Emprégase a etiqueta <style> de HTML e soamente se poden incluír na cabeceira do documento (só dentro da sección <head>).

Esta etiqueta se emprega sempre co atributo type="text/css", que indica que o tipo de arquivo que estamos a incluír e un arquivo css.

Entre <style type="text/css"> e </style> definimos as regras de estilos que so afectarán á páxina Web que estou a facer. Así, por exemplo:

<!doctype html>
<html>
  <head> 
  ...
    <style type="text/css">
      p {
        color: blue;
      }
    </style>
  ...
  </head>
  <body>
    <p>Este texto irá en cor azul. </p> 
   ....

O principal inconveniente é que se se quere facer unha modificación nos estilos definidos, é necesario modificar todas as páxinas que inclúen o estilo que se vai modificar.

 Non debemos de empregar este método salvo que sexa necesario por calquera circunstancia.

Exemplo:

See the Pen CSS - Estilos Internos 01 by Diego Rodicio (@drodicio) on CodePen.

Exemplo da utilización da etiqueta style

Exemplo da utilización da etiqueta title. Diego Rodicio Álvarez. CC BY-SA

 Aínda que non é recomendable, por comodidade e para facer capturas de pantalla e explicacións máis intuitivas, na maioría dos exemplos deste manual empregaranse follas de estilo internas

Follas de estilo externas

Consiste en almacenar os estilos nun arquivo aparte da páxina web.

Pensemos nun sitio web con 20 páxinas ás que lle imos dar unha aparencia común. Para usar as follas de estilo internas teriamos que copiar o conxunto de regras e pegalo en cada unha das páxinas. Sería viable, pero cada vez que fósemos a modificar algún detalle dos estilos, teriamos que abrir as 20 páxinas e aplicar os cambios. Isto é pouco racional.

Para evitar este problema, o mesmo que ten a aplicación de estilos dentro dunha etiqueta HTML, temos as follas de estilo externas. De todas as formas de incluír CSS nas páxinas HTML, esta é a máis utilizada con moita diferenza. A principal vantaxe é que se pode incluír un mesmo arquivo CSS en multitude de páxinas HTML, polo que se garante a aplicación homoxénea dos mesmos estilos a todas as páxinas que forman un sitio web.

Con este método, o mantemento do sitio web simplifícase ao máximo, xa que un só cambio nun só arquivo CSS permite variar de forma instantánea os estilos de todas as páxinas HTML que enlazan ese arquivo.

Este é o método que empreguemos en case todas as situacións.

Para facer unha folla de estilos externa so temos que incluír as regras de estilo que necesitemos dentro dun arquivo de texto (ao igual que os arquivos onde facemos as páxinas HTML) pero nesta ocasión con extensión .css (en lugar de .htm ou .html).

Pódense crear todos os arquivos CSS que sexan necesarios e cada páxina HTML pode enlazar tantos arquivos CSS como necesite.

Ao igual que coa páxinas web, os arquivos CSS non deixan de ser arquivos de texto sinxelos, polo que podemos utilizar diferentes editores sobre un mesmo arquivo. Poderiamos comezar con BlueGriffon, Adobe Brackets, KompoZer, Adobe Dreamweaver ou similar por exemplo, para rematar logo facendo algúns cambios cun editor sinxelo.

Dos editores mencionados arriba o máis completo e sinxelo de empregar é Adobe Dreamweaver pero é un editor de pago. O resto de editores son gratuítos (aínda que BlueGriffon pode ter algún complemento de pago).

Exemplo arquivo CSS externo

Exemplo arquivo CSS externo. Diego Rodicio. CC BY-SA

Para que o arquivo cos estilos teña efecto nunha páxina HTML debemos indicar que vamos empregar eses estilos. Para iso empregamos a etiqueta <link> (só dentro da sección <head>).

Se desexamos que un mesmo arquivo .css afecte a varias páxinas, teremos que incluír ese arquivo en todas as páxinas HTML.

A etiqueta <link> emprégase sempre con estes atributos:

  • rel="stylesheet": Indica que estamos a incluír unha folla de estilos na páxina Web
  • type="text/css": Indica que o tipo de arquivo que estamos a incluír e un arquivo de texto css.
  • href="x": Este é o atributo principal que nos indica a ruta do arquivo css que vamos a incluir na páxina Web. Temos que substituír a x pola ruta ao arquivo. Lembra que a ruta se ten que especificar segundo se explica no punto "Especificación da ruta a un arquivo" que se explica no manual de "HTML" ou no de "Bases de Desenvolvemento Web".

Un exemplo desta etiqueta é: 

<!doctype html>
<html>
  <head> 
  ...
    <link rel="stylesheet" type="text/css" href="o_meu_estilo.css">
  ...
  </head>
  
  <body> 
   ....

Cando o navegador carga a páxina HTML anterior, antes de mostrar os seus contidos tamén descargará os arquivos CSS externos enlazados mediante a etiqueta <link> e aplica os estilos aos contidos da páxina.

Arquivo CSS externo

Exemplo de como engadir un arquivo CSS externo. Diego Rodicio. CC BY-SA

Exemplo:

See the Pen CSS - Estilos Externos 01 by Diego Rodicio (@drodicio) on CodePen.