Ejercicio de programación con CSS: Selectores básicos

Código

Práctica

0h 20m

Ejercicios CSS Selectores Básicos. Domina el uso de selectores básicos en CSS mediante ejercicios prácticos y ejemplos detallados.

Para completar este reto, aquí tienes una estructura HTML de ejemplo a la que debes aplicar tus estilos:

<!DOCTYPE html>
<html>
<head>
    <title>Reto CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="contenedor">
        <h1>Encabezado 1</h1>
        <h2 class="subtitulo">Encabezado 2</h2>
        <p>Este es un párrafo.</p>
        <ul>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
        </ul>
        <a href="#">Enlace</a>
    </div>
    <div>
        <h2>Otro Encabezado 2</h2>
        <p class="importante">Este es un párrafo importante.</p>
    </div>
</body>
</html>

Utiliza los diferentes selectores de CSS para aplicar los siguientes estilos:

El encabezado <h1> debe tener el color de texto azul.
Todos los elementos con la clase .subtitulo deben tener el color de texto rojo.
El elemento con id #contenedor debe tener un borde negro.
Todos los elementos deben tener un margen de 0 y un relleno de 0.
Todos los enlaces <a> que tienen un atributo href deben tener el color de texto morado.
Todos los párrafos <p> que son descendientes de un <div> deben tener el color de texto naranja.
Los elementos <li> que son hijos directos de un <ul> deben tener una lista con marcadores de tipo cuadrado.
El primer <h2> que sigue inmediatamente a un <h1> debe tener el color de texto rosa.
Todos los <h2> que son hermanos de un <h1> deben tener el color de texto cian.