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