Vamos a sumergirnos en la sintaxis básica de CSS de manera sencilla:
Selectores
Los selectores son como el nombre de las habitaciones en tu casa. Te permiten elegir qué partes de tu página web quieres estilizar. Aquí hay algunos ejemplos:
Selector de Elemento: Selecciona todos los elementos de un tipo específico. Por ejemplo:
p {
color: blue;
}
Esto cambiará el color del texto en todos los párrafos a azul.
Selector de Clase: Selecciona elementos con un atributo de clase específico. Por ejemplo:
.destacado {
font-weight: bold;
}
Esto hará que todos los elementos con la clase «destacado» tengan texto en negrita.
Selector de ID: Selecciona un elemento con un ID específico. Por ejemplo:
#encabezado {
font-size: 24px;
}
Esto cambiará el tamaño del texto del elemento con el ID «encabezado».
Las propiedades son como las características de tu habitación, como el color de la pintura o el tamaño de la cama. Los valores son las opciones que puedes elegir para esas características. Aquí hay algunos ejemplos:
Propiedad de Color: Define el color del texto o del fondo. Por ejemplo:
color: red;
background-color: yellow;
Propiedad de Tamaño de Fuente: Define el tamaño del texto. Por ejemplo:
font-size: 16px;
Propiedad de Margen y Relleno: Define el espacio alrededor de un elemento. Por ejemplo:
margin: 10px;
padding: 5px;
Una regla CSS está formada por un selector seguido de un bloque de declaración que contiene una o más propiedades y sus valores. Por ejemplo:
selector {
propiedad1: valor1;
propiedad2: valor2;
}
Vamos a explorar cómo enlazar CSS con HTML:
Crear un Archivo CSS
Primero, necesitas tener un archivo CSS donde escribirás tus estilos. Puedes crearlo con cualquier editor de texto, como Bloc de notas o Visual Studio Code. Solo asegúrate de guardarlo con la extensión «.css». Por ejemplo, podrías llamarlo «estilos.css».
Dentro de tu archivo CSS, puedes escribir tus estilos como mencionamos antes, usando selectores, propiedades y valores para dar estilo a tu página web. Por ejemplo:
/* estilos.css */
body {
background-color: lightblue;
}
h1 {
color: navy;
}
Ahora que tienes tus estilos CSS listos, necesitas enlazarlos con tu documento HTML para que se apliquen. Para hacer esto, necesitas usar la etiqueta <link> en la sección <head> de tu documento HTML. Aquí está cómo se hace:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
<!-- Enlace a tu archivo CSS -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>¡Bienvenido a mi página web!</p>
</body>
</html>
En esta línea <link rel="stylesheet" href="estilos.css">, el atributo href especifica la ubicación del archivo CSS que quieres enlazar. Asegúrate de que la ruta coincida con la ubicación de tu archivo CSS en tu proyecto.
Comprobación
Guarda tus archivos HTML y CSS en la misma carpeta y ábrelos en tu navegador web. Deberías ver que los estilos definidos en tu archivo CSS se aplican a tu documento HTML. ¡Y eso es todo! Has enlazado con éxito tu CSS con tu HTML, dando estilo a tu página web de la manera que deseas.
Los selectores CSS son como las herramientas que utilizas para elegir qué partes de tu página web quieres estilizar. Imagina que estás pintando una habitación y quieres decidir qué partes pintar de qué color. Los selectores te ayudan a hacer eso en tu página web. Vamos a ver algunos de los selectores más comunes:
Este selector selecciona todos los elementos de un tipo específico en tu página web. Es como decir «pinta todas las puertas de la casa de color azul». Aquí tienes un ejemplo:
/* Selecciona todos los párrafos y los hace rojos */
p {
color: red;
}
Este selector te permite seleccionar elementos que tienen una clase específica. Es como decir «pinta todas las sillas con un cojín rojo de color verde». Aquí tienes un ejemplo:
/* Selecciona todos los elementos con la clase "destacado" y les da un fondo amarillo */
.destacado {
background-color: yellow;
}
Este selector te permite seleccionar un elemento con un ID específico. Es como decir «pinta la puerta principal de la casa de color verde». Aquí tienes un ejemplo:
/* Selecciona el elemento con el ID "encabezado" y le cambia el tamaño de la fuente */
#encabezado {
font-size: 24px;
}
Estos selectores te permiten seleccionar elementos basados en sus atributos. Por ejemplo, puedes seleccionar todos los enlaces que apunten a una URL específica. Aquí tienes un ejemplo:
/* Selecciona el elemento con el ID "encabezado" y le cambia el tamaño de la fuente */
#encabezado {
font-size: 24px;
}
Estos selectores te permiten estilizar elementos en ciertos estados o partes específicas de un elemento. Por ejemplo, puedes estilizar un enlace cuando el usuario pasa el mouse sobre él. Aquí tienes un ejemplo:
/* Estiliza los enlaces cuando el usuario pasa el mouse sobre ellos */
a:hover {
text-decoration: underline;
}
