Selector de ID

Parte de la sección Estilos con 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, incluidos un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar un selector de ID para aplicar estilos a un elemento de división. Sigue los pasos a continuación:

Añade un atributo id con el valor "special" al elemento <div>.
Escribe una regla de CSS usando un selector de ID que seleccione el elemento con el ID "special". Establece el color de fondo de este elemento en amarillo y el color del texto en rojo.

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>