Selector de ID

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 13 de 76.

El selector de ID se utiliza para seleccionar un elemento HTML específico basándose en el valor de su atributo id. A diferencia de los selectores de clase, que pueden utilizarse para dar estilo a múltiples elementos, los selectores de ID son únicos y solo pueden aplicarse a un único elemento en una página. Esto los hace útiles para dar estilo a elementos individuales con estilos específicos que no deberían aplicarse a ningún otro elemento.

Para seleccionar un elemento con un ID específico en tu CSS, utilizas un símbolo de almohadilla (#) seguido del valor del ID. Aquí tienes la sintaxis básica para usar un selector de ID:

#idname {
    property: value;
}

Por ejemplo:

#intro {
    color: blue;
    font-size: 20px;
}

En este ejemplo, el selector de ID #intro apunta al elemento con el ID "intro". Las declaraciones establecen el color del texto en azul y el tamaño de fuente en 20 píxeles para este elemento.

Desafío

Fácil

Se te proporciona un documento HTML con varios elementos, incluyendo un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar un selector de ID para dar estilo a un elemento de división. Sigue los pasos a continuación:

Agrega un atributo id con el valor "special" al elemento <div>.
Escribe una regla CSS usando un selector de ID que apunte al elemento con el ID "special". Establece el color de fondo de este elemento a yellow y el color del texto a red.

Pruébalo tú mismo

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>