1. Sintaxis Básica
Una regla CSS consiste en un selector y un bloque de declaración.
selector {
propiedad: valor;
propiedad: valor;
}
Ejemplo:
p {
color: red;
font-size: 16px;
}
2. Selectores Básicos
Los selectores indican a qué elementos HTML se aplicarán los estilos.
Selector de Etiqueta
Selecciona todos los elementos de ese tipo (ej. todos los <p>).
Selector de ID (#)
Selecciona un elemento único con un atributo id específico.
#demo-id {
background-color: #ffeba7;
}Selector de Clase (.)
Selecciona todos los elementos con un atributo class específico.
.demo-clase {
background-color: #c3f0ca;
}3. Selectores Avanzados
Permiten seleccionar elementos de forma más precisa basándose en su relación con otros.
Selector Universal (*)
Selecciona todos los elementos de la página.
* {
margin: 0;
padding: 0;
}Selector Descendiente (espacio)
Selecciona elementos que están dentro de otro.
.descendiente p {
background-color: #2196f3;
}Pseudo-clases (:hover, :nth-child)
Definen un estado especial del elemento.
.btn-hover:hover {
background-color: #4caf50;
}