STYLES puede ser insertado en tres lugares: En línea, incorporado y externo.

Hojas de estilo en línea

Puedes colocar una etiqueta de estilo directamente en una etiqueta HTML. Esto se llama Inline. Los estilos en línea anularán los colocados en otro lugar. Aquí hay un ejemplo de un estilo Inline:

<H1 STYLE = $0027Color: Rojo$0027*; My Heading </H1>

Para colocar un estilo en una etiqueta HTML, haga lo siguiente:

  • Escriba la etiqueta que desea cambiar
  • A continuación, escribe un espacio y luego la palabra ESTILO (etiqueta__4)
  • Escriba un signo igual ( = ) después de la palabra ESTILO
  • Escriba una comilla doble
  • Escriba la propiedad seguida de dos puntos
  • Escriba el valor (etiqueta__4)
  • Escriba la otra comilla doble (etiqueta__4)
  • Escriba el corchete de ángulo recto ( > ) del tag HTML

Hojas de estilo incrustadas

Los estilos incrustados van en la sección HEAD de tu página HTML. Cuando incrustas un estilo en la sección HEAD, utilizas las dos etiquetas para indicar al navegador dónde empieza y termina el estilo. Puedes añadir un atributo TYPE, si lo deseas. Pero los navegadores modernos no lo necesitan.

An example of an embedded style.

Luego, entre las dos etiquetas STYLE, escribirías tus reglas CSS.

Hojas de estilo externo

En lugar de escribir las etiquetas <STYLE ]; y el código de todas sus reglas CSS en la sección HEAD, puede escribirlo todo en un archivo de texto separado. Luego le dices al navegador dónde está el archivo de texto. El archivo de texto (junto con su código) se trata entonces como si estuviera en la sección HEAD. Configura una hoja de estilo externa como esta:

An example of an external style.

Para incrustar una hoja de estilo se utiliza la etiqueta LINK. El atributo REL le dice al navegador que quiere enlazar con una hoja de estilo; el TYPE le dice al navegador qué tipo de archivo se está utilizando; el atributo HREF le dice al navegador el nombre del archivo, y dónde está el archivo. (Aún no has hecho la referencia del archivo, así que no te preocupes por la HREF por el momento).

Las hojas de estilo externas tienen una gran ventaja sobre las incrustadas porque pueden ser usadas para todas las páginas de su sitio web. Todo lo que necesitas hacer es insertar la etiqueta LINK en la sección HEAD de las páginas de tu sitio web. Con las hojas de estilo incrustadas, tendrías que tener el mismo código de ESTILO en la sección HEAD de cada página. Las hojas de estilo externas pueden ahorrarte mucho trabajo de escritura (o de copiar y pegar).

Las hojas de estilo externas son sólo archivos de texto, así que puedes escribirlas en cualquier editor de texto. Algo como el Bloc de Notas de Windows es ideal. Aquí tienes una captura de pantalla de una hoja de estilo externa escrita con el Bloc de notas:

An example of an external style in a text editor.

Tengan en cuenta que no se utilizan TAGS en la hoja de estilo externa. No hay etiquetas de "ESTILO" o "HTML", sólo los selectores y sus propiedades y valores.

Note, también, que se han establecido tres estilos. También puedes hacer esto con etiquetas de ESTILO incrustadas. Puedes tener tantos estilos diferentes como quieras entre un par de etiquetas de <STYLE

Si está usando hojas de estilo externas, no está limitado a una sola. Puedes usar tantas hojas de estilo externas como necesites. Todo lo que se requiere es una etiqueta LINK diferente para cada hoja de estilo.

Al guardar tus hojas de estilo externas, no tienes que guardarlas con la extensión .css. Puedes guardarla con la extensión .txt. En la parte HREF de tu etiqueta LINK, tendrías esto:

HREF = style1.txt

en lugar de

HREF = style1.css

En la siguiente parte, aprenderás a usar tus selectores CSS.

| Usando los selectores CSS |