Introducción a los selectores

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 10 de 76.

En CSS, los selectores son patrones utilizados para seleccionar los elementos HTML a los que deseas aplicar estilo. Son una parte crucial de las reglas de CSS, ya que determinan a qué elementos se aplicarán los estilos.

Existen varios tipos de selectores, cada uno de los cuales se dirige a los elementos de diferentes maneras. Comprender los selectores es fundamental para dominar CSS y crear páginas web con un buen estilo.

Aquí tienes una regla CSS básica con un selector:

selector {
    property: value;
}

selector: Selecciona los elementos HTML a los que se les aplicará el estilo.
property: El atributo de estilo que deseas cambiar (por ejemplo, color, font-size).
value: El valor que deseas establecer para la propiedad (por ejemplo, blue, 16px).

Por ejemplo:

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

En este ejemplo, p es el selector, que apunta a todos los elementos de párrafo. Las declaraciones establecen el color del texto en azul y el tamaño de fuente en 16 píxeles para todos los párrafos.

Desafío

Fácil

Se te proporciona un documento HTML. Utiliza CSS interno para dar estilo al documento con las siguientes propiedades:

Establece el color de fondo de todos los encabezados h1 a green.
Establece el color de texto de todos los encabezados h1 a white.
Establece el tamaño de fuente de todos los párrafos (p) a 18px.

Se te proporciona código CSS inicial para ello.

Hoja de referencia

Los selectores de CSS son patrones utilizados para seleccionar los elementos HTML a los que deseas aplicar estilos. Determinan a qué elementos se aplicarán los estilos.

Estructura básica de una regla CSS:

selector {
    property: value;
}

selector: Apunta a los elementos HTML a los que se les aplicará el estilo
property: El atributo de estilo que deseas cambiar (por ejemplo, color, font-size)
value: El valor que deseas establecer para la propiedad (por ejemplo, blue, 16px)

Ejemplo que apunta a todos los elementos de párrafo:

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

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>