🎯 Objetivos de aprendizaje

Entender qué es CSS y para qué sirve.
Conocer qué son los selectores y cómo identificar a qué elementos aplican.
Aprender qué son las propiedades y cómo definir valores para cambiar el estilo.
Saber cómo escribir reglas CSS básicas para modificar el aspecto de una página web.

📚 Contenidos teóricos con ejemplos claros y explicativos

CSS (Cascading Style Sheets) es el lenguaje que permite darle estilo visual a una página web. Mientras que HTML define la estructura y contenido, CSS controla cómo se ve ese contenido: colores, tamaños, posiciones, etc.

Una regla CSS está formada por tres partes principales:

Selector: Es el "objetivo" o el elemento HTML al que queremos aplicar el estilo.
Propiedad: Es la característica visual que queremos cambiar, como el color, tamaño de letra, borde, etc.
Valor: Es la especificación que damos a esa propiedad, por ejemplo, color rojo, tamaño 16 píxeles, borde sólido.

Ejemplo básico de regla CSS:

p {
  color: blue;
  font-size: 16px;
}

Aquí el selector es p (todos los párrafos).
La propiedad color cambia el color del texto y le damos el valor blue.
La propiedad font-size cambia el tamaño de la letra y le damos el valor 16px (16 píxeles).

Tipos de selectores más comunes:

Selector de tipo o elemento: selecciona todas las etiquetas de un tipo. Ejemplo: h1, p, div.
Selector de clase: selecciona todos los elementos que tengan un atributo class específico. Se escribe con un punto . seguido del nombre de la clase. Ejemplo: .resaltado.
Selector de ID: selecciona un único elemento que tenga un atributo id específico. Se escribe con una almohadilla # seguido del nombre del ID. Ejemplo: #principal.

💻 Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Ejemplo Selectores CSS</title>
  <style>
    /* Selector de tipo: aplica a todos los títulos h1 */
    h1 {
      color: darkblue;
      font-family: Arial, sans-serif;
    }

    /* Selector de clase: aplica a todos los elementos con class="resaltado" */
    .resaltado {
      background-color: yellow;
      font-weight: bold;
      padding: 5px;
    }

    /* Selector de ID: aplica sólo al elemento con id="principal" */
    #principal {
      border: 2px solid black;
      padding: 10px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <h1 id="principal">Título principal de la página</h1>

  <p class="resaltado">Este párrafo está resaltado con fondo amarillo y negrita.</p>

  <p>Este párrafo no tiene estilos especiales y se ve por defecto.</p>

  <p class="resaltado">Otro párrafo resaltado para mostrar el uso de clases.</p>

</body>
</html>

📝 Resumen de los conceptos aprendidos

CSS sirve para dar estilos visuales a los elementos HTML.
Los selectores son la forma de elegir a qué elementos aplicar los estilos: por etiqueta, clase o ID.
Las propiedades indican qué vamos a cambiar (color, tamaño, borde, etc).
Los valores definen cómo se cambia la propiedad (ejemplo: rojo, 14px, sólido).

🛠️ Ejercicio práctico final

Crea un archivo HTML llamado estilos.html que contenga:

Un título <h1> con un ID principal que tenga un borde y padding aplicados desde CSS.
Al menos tres párrafos <p>, donde al menos dos tengan la clase resaltado que aplique un fondo amarillo y texto en negrita.
Un párrafo sin estilos especiales para comparar.

Abre el archivo en el navegador y verifica que los estilos se aplican correctamente.

8 - CSS: Selectores, propiedades y valores

Subscribe to my newsletter

Carlos BC

Carlos BC