Ejercicio 7 — Selectores CSS

Este ejercicio tiene como objetivo practicar el uso de diferentes tipos de selectores CSS para aplicar estilos específicos a distintos elementos de una página web.

Código HTML

<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de Selectores CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2 id="subtitulo">Subtítulo de la Página</h2>

  <p class="resaltado">Este párrafo tiene que destacarse visualmente.</p>

  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
  </ul>

  <form>
    <label for="usuario">Usuario:</label>
    <input type="text" id="usuario" name="usuario">
    <br>
    <label for="contraseña">Contraseña:</label>
    <input type="password" id="contraseña" name="contraseña">
  </form>
</body>
</html>

Código CSS

#subtitulo {
    color: blueviolet;
}

.resaltado {
    background-color: dimgray;
}

li {
    color: red;
}

[type="password"] {
    border: 2px solid blue;
}

A continuación puedes visualizar el resultado final de este ejercicio en el siguiente enlace:

🚀 Ver resultado del ejercicio