Ejercicio 6 — Selectores básicos en CSS

En este ejercicio se aplican diferentes tipos de selectores CSS para dar formato a elementos HTML: selectores de elemento, clase, ID, universal y de atributo.

Código HTML

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejercicio 6 - Selectores Básicos en CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="titulo">Ejemplo de Selectores Básicos en CSS</h1>

  <p>Este párrafo está estilizado con el selector de elemento, cambiando su color a azul.</p>

  <p class="importante">
    Este párrafo usa el selector de clase para resaltar el fondo en amarillo.
  </p>

  <form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </form>
</body>
</html>

Código CSS

/*Selector de Elemento*/
p {
  color: blue;
}

/*Selector de Clase*/
.importante {
  background-color: yellow;
}

/*Selector de ID*/
#titulo {
  color: green;
  font-size: 24px;
}

/*Selector Universal*/
* {
  margin: 0;
  padding: 0;
}

/*Selector de Atributo*/
input[type="text"] {
  border: 2px solid red;
}

Puedes visualizar el resultado final de este ejercicio en el siguiente enlace:

🚀 Ver resultado del ejercicio