HTML es genial y todo, hasta que queremos personalizar cómo se ve una página.
Ahí es cuando usamos CSS.
CSS es un estándar web y significa Hojas de Estilo en Cascada.
Aquí tienes un ejemplo de CSS para estilar una etiqueta de párrafo:
p {
color: red;
}
Esta regla CSS establece que todos los párrafos se muestren en rojo en lugar de negro, que es el color predeterminado.
Un conjunto de reglas CSS tiene una parte llamada selector, y la otra parte llamada bloque de declaraciones.
La declaración contiene varias declaraciones, cada una compuesta por una propiedad y un valor.
En este ejemplo, p es el selector. Aplica las siguientes reglas a todos los elementos que utilizan la etiqueta p en la página. Y color: red; es la única declaración contenida en el bloque de declaraciones.
Puedes colocar este CSS en una etiqueta de estilo en el encabezado de un documento HTML:
<style>
p {
color: red;
}
</style>
Y esto se aplicará.
O puedes ponerlo en un archivo style.css separado y luego cargarlo en el encabezado HTML:
<link href="style.css" rel="stylesheet" />
Esto es más común cuando tienes mucho CSS, que es lo que normalmente sucede. El CSS en el encabezado del documento HTML funciona hasta cierto nivel, luego es demasiado doloroso de manejar.
Otra forma, útil para «arreglos rápidos», es usar el atributo style en un elemento HTML:
<p style="color: red">test</p>
Se pueden listar varios CSS uno después del otro:
p {
color: red;
}
a {
color: blue;
}
Un selector puede apuntar a uno o más elementos:
p, a {
color: red;
}
Los espacios son irrelevantes en CSS. Esto significa que podrías escribir el CSS anterior como:
p,a {
color: red;}
p,a { color: red;
}
Y aún así funcionaría.
Es importante que cada declaración termine con un punto y coma ;.
De lo contrario, podrías tener dolores de cabeza ya que el navegador no puede interpretar el CSS.