¿Qué es CSS?
CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es un lenguaje
que permite dar estilo a las páginas web. Con CSS, se pueden modificar
colores, fuentes, márgenes y disposición de los elementos para mejorar la
apariencia y la experiencia del usuario.
Métodos de Aplicación de CSS
CSS en línea: Se aplica directamente en los elementos HTML.
CSS interno: Se coloca dentro del mismo archivo HTML, en la etiqueta
<style>.
CSS externo: Se almacena en un archivo separado y se enlaza con HTML, lo
que facilita la organización y reutilización del código.
Tipos de Selectores en CSS
1. Selectores de Etiqueta
¿Qué son?
Afectan a todos los elementos de un tipo específico en la página web.
Ejemplo visual:
Si queremos que todos los títulos de nivel 1 (h1) sean de color azul, un
selector de etiqueta aplicaría el estilo a todos los <h1> en el documento.
-Ejemplo en la vida real: Imagina que todos los letreros de una tienda
tienen que tener el mismo color (por ejemplo, azul). Eso sería un "selector de
etiqueta" aplicándose a todos los letreros.
2. Selectores de Clase
¿Qué son?
Permiten agrupar varios elementos bajo un mismo estilo, aunque no sean
del mismo tipo. Se usan cuando se quiere aplicar el mismo estilo a varios
elementos, sin importar su tipo.
Ejemplo visual:
Supongamos que tienes varios botones en una página web, pero solo
algunos deben tener el mismo estilo (por ejemplo, un fondo rojo). Usarías un
selector de clase para darles el estilo a esos botones específicos.
- Ejemplo en la vida real: Es como si tu tienda tiene diferentes tipos de
letreros (para promociones, ofertas, etc.), pero todos los letreros de "Oferta
Especial" tienen un diseño similar. Los identificas con la misma etiqueta de
"Oferta".
3. Selectores de ID
¿Qué son?
Se usan para aplicar un estilo único a un solo elemento, dado que los ID
son exclusivos en una página.
Ejemplo visual;
Si quieres cambiar el color de fondo solo de un encabezado específico,
usarías un selector de ID para ese encabezado único.
- Ejemplo en la vida real: Imagina que tienes un letrero especial en la
entrada de tu tienda con un diseño único. A este letrero le aplicarías un estilo
específico, diferente al de los demás letreros.
4. Selectores Avanzados (Combinación y Pseudo-clases)
¿Qué son?
Permiten combinar varios tipos de selectores o aplicar estilos basados en
situaciones específicas (como cuando el usuario interactúa con un
elemento).
Ejemplo visual:
Imagina que quieres cambiar el color de los enlaces solo cuando el usuario
pasa el ratón sobre ellos (el efecto hover).
- Ejemplo en la vida real: Sería como si, al pasar tu mano sobre un letrero
de tu tienda, el letrero cambiara de color para llamar la atención del cliente.
¿Por qué es importante CSS?
Mejora la presentación visual de las páginas web.
Separa el contenido del diseño, facilitando el mantenimiento.
Permite diseños responsivos y adaptativos a distintos dispositivos.
Hace que la navegación sea más intuitiva y atractiva.
