Introducción a CSS
Contenidos
Introducción
CSS (Cascading Style Sheets) es un lenguaje que describe el estilo de un documento HTML, indicando cómo se deben mostrar todos los elementos de la página.
De esta forma, existe una separación completa los contenidos de la página (en HTML) y el estilo que tienen esos contenidos (en CSS).
Cualquier programación web moderna intenta evitar lo más posible separar contenidos y estilo. Por eso la etiqueta <font>, que se utilizaba con frecuencia para aplicar colores, tipografía, etc. se considera obsoleta y una mala práctica.
Sintaxis
CSS se escribe como un conjunto de reglas, cada una de las cuales tiene:
- Selector
- Indica la etiqueta/s del código HTML a la que se va a aplicar el estilo.
- Decaración
- Es una modificación de estilo que se aplica al selector. Cada declaración siempre acaba en punto y coma.
El siguiente ejemplo hace que todos los párrafos aparezcan con el texto centrado y de color rojo.
p {
color: red;
text-align: center;
}
Insertar CSS
Para que el código CSS se aplique a una página HTML, es necesario insertarlo correctamente. Existen tres formas para ello:
- Hoja de estilo externa
- Hoja de estilo interna
- Estilo en línea (inline)
La hoja de estilo externa es posiblemente la más utilizada y flexible, ya que permite separar por completo el código HTML en un fichero .html y el código CSS en un fichero .css. Para ello sólo hay que referenciar el fichero CSS desde el HTML de esta manera:
<head>
<link rel="stylesheet" href="miestilo.css">
</head>
Y crear el fichero miestilo.css que contenga únicamente código CSS:
p {
color: red;
}
La hoja de estilo interna se crea añadiendo la etiqueta <style> dentro del <head> de la página para contener código CSS. Es muy cómodo para trabajos pequeños, y es el que recomendamos para este manual.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Este es mi párrafo</p>
</body>
</html>
El estilo inline permite añadir código CSS en el atributo style dentro de una etiqueta HTML. Esta forma de incluis estilo no es recomendable, ya que rompe la principal función de CSS de separar el contenido del estilo.
<p style="color: red;">Este es mi párrafo</p>
Selectores
Existen varios tipos de selectores que podemos utilizar para que nuestro código CSS afecte a ciertas partes del código HTML.
Seclector de elemento
Poniendo el nombre de una etiqueta HTML, las reglas CSS se aplicarán a todas las etiquetas de ese tipo en la página.
h1 {
background-color: lightgray;
}
Identificadores
Este tipo de selector se refiere a un elemento único en la página. Se identifica con el atributo id en cualquier etiqueta HTML.
<p id="introduccion">Párrafo de introducción</p>
<p>Otro párafo</p>
Cada identificador debe ser único en toda la página. No se debe nunca repetir un identificador en dos etiquetas.
Para hacer referencia a un identificador se utiliza la almohadilla # antes de su nombre.
#introduccion {
color: blue;
}
Un identificador no puede comenzar por un número, pero puede contenerlos.
Los identificadores no son muchas veces la mejor opción, e incluso hay programadores que opinan que deberían dejar de usarse en CSS para utilizar únicamente clases, que en cualquier caso son la opción más utilizada.
Clases
Los selectoes de clase permiten seleccionar a todos los elementos marcados con una clase. A diferencia del identificador, que debe ser único en toda la página, una clase se puede repetir en varias etiquetas. De esta forma, el código CSS afectará a todas las etiquetas que tengan esa clase.
Para marcar una etiqueta HTML con una clase, se hace de la siguiente manera:
<p class="mi-clase">Párrafo</p>
Para cambiar el estilo de la clase anterior desde CSS se usa el punto . antes del nombre de la clase.
Primer párrafo
Segundo párrafo
Tercer párrafo
.remarcado {
color: #fcfcfc;
background-color: #007849;
}
<p class="remarcado">Primer párrafo</p>
<p>Segundo párrafo</p>
<p class="remarcado">Tercer párrafo</p>
Una clase no puede comenzar por un número, pero puede contenerlos.