Hojas de estilo en cascada CSS
Las hojas de estilo en cascada CSS son utilizadas junto con el lenguaje HTML para la creación de sitios web, CSS ayuda en el diseño de las páginas.
¿Qué es CSS?
Es un lenguaje para describir la presentación de páginas web, entre los que podemos destacar colores, estructura, tipografía, etc.
Características
- Describe como se mostrarán en pantalla los elementos HTML.
- Pueden controlar el diseño de múltiples páginas web a la vez.
- Es independiente de HTML.
- Puede ser usado en cualquier lenguaje de marcado basado en XML.
- Los archivos CSS separados del HTML facilita el mantenimiento.
Podría interesarte HTML o Lenguaje de marcado de hipertexto
Sintaxis CSS
- El selector apunta al elemento HTML que desea diseñar.
- Bloque de declaración contiene una o más declaraciones separadas por punto y coma.
- Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
- Una declaración de CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados de llaves.
Código CSS
Veamos un ejemplo del lenguaje CSS no incrustado en las etiquetas HTML:
p {
border: 1px solid blue;
color: red;
text-align: center;
}Línea 1- definimos el selector, pueden ser etiquetas HTML, clases e ID; abrimos llave.
2- Declaramos todos los atributos para la etiqueta definida.
5- Cerramos llave
En el ejemplo anterior establecemos que el contenido entre las etiquetas <p>:
- Borde azul
- Letras de color rojo
- Texto alineado al centro
Formas de insertar CSS
En una página web tenemos 3 formas de insertar CSS.
Podría interesarte Insertar fotos de Google Fotos en un sitio web
Hoja de estilo externo
Se crea un archivo de estilo externa, cambia el diseño de una o varias páginas modificando un único archivo CSS.
Cada página debe incluir una referencia al archivo CSS mediante las etiquetas <link> dentro de la sección <head>.
Ejemplo:
<head>
<link rel="stylesheet" type="text/css" href="hojaEstilo.css" />
</head>Ejemplo practico
En un bloc de notas escribe el siguiente código CSS:
p {
border: 1px solid blue;
color: red;
text-align: center;
}Guarda el archivo en formato .css, por ejemplo hojaEstilo.css.
Hoja de estilo interno
Es funcional para páginas que tienen diseños propios.
El código CSS se define entre las etiquetas <style> dentro de la sección <head>.
Ejemplo:
<head>
<style>
p {
border: 1px solid blue;
color: red;
text-align: center;
}
</style>
</head>Hoja de estilo en línea
Es utilizado para aplicar un estilo propio a una etiqueta HTML.
Para utilizar CSS es necesario agregar el atributo style en la etiqueta, en el valor de la propiedad contendrá los elementos CSS.
Ejemplo:
<p style="color:red; text-align:center;"> Segundo párrafo. </p>Orden de las hojas de estilo
Si una página utiliza las tres formas de insertar CSS, ¿Cuál se aplica?, ¿se aplican las tres?, ¿Cuál va primero?
Todas las hojas de estilo se conectarán en cascada respetando la siguiente prioridad:
- Hoja de estilo en línea.
- Hoja de estilo interna y externa (dependiendo de la posición del encabezado).
La hoja de estilo de mayor prioridad anula las demás, por lo tanto, es el diseño que veremos en la página.
Podría interesarte Prefijos CSS
Prioridad de las hojas de estilo interno y externo
Si declaramos primero la hoja de estilo interna y debajo de este la hoja de estilo externa:
<head>
<style>p {color: red;}</style>
<link rel="stylesheet" type="text/css" href="hojaEstilo.css">
</head>Se respetará la hoja de estilo externa.
Si declaramos primero la hoja de estilo externa y debajo de este la hoja de estilo interna:
<head>
<link rel="stylesheet" type="text/css" href="hojaEstilo.css">
<style>p {color: red;}</style>
</head>Se respetará la hoja de estilo interna.