Ejercicio de programación con CSS: Selectores básicos
Código
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 atributohref
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.
Todos los ejercicios de programación de CSS
Evalúa tus conocimientos con ejercicios de programación en CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Modelo de caja
Código
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Propiedades de posicionamiento
Puzzle
Clases de bordes de Tailwind CSS
Código
Evaluación conocimiento Código Tailwind CSS
Código
Hover, focus y estado de Tailwind CSS
Código
Metodologías de escritura CSS: BEM, SMACSS, OOCSS
Puzzle
Clases de colores y fondo de Tailwind CSS
Código
Animaciones y transiciones
Test
Introducción a CSS
Test
Selectores avanzados
Puzzle
Sintaxis básica
Test
Sintaxis
Código
Página web completa con Bootstrap
Proyecto
Estilos de fuente
Test
Sintaxis avanzada
Puzzle
Clases de tamaño de Tailwind CSS
Puzzle
Diseño responsive con media queries
Test
Instalación de Tailwind CSS
Código
Certificados de superación de CSS
Supera todos los retos de CSS y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
CSS
Selectores básicos
Sintaxis de selectores y propiedades