Ejercicio de programación con CSS: Reto selectores básicos CSS
Código
0h 3m
Practica con este ejercicio de CSS aplicando selectores básicos para dar estilos precisos a elementos HTML. Ideal para principiantes en diseño web.
Dado el siguiente fragmento HTML, escribe las reglas CSS necesarias para aplicar los siguientes estilos:
<div id="container">
<h1>Título principal</h1>
<p>Este es un párrafo introductorio.</p>
<ul>
<li class="importante">Elemento 1</li>
<li>Elemento 2</li>
<li class="importante">Elemento 3</li>
</ul>
<p class="destacado">Este es un párrafo destacado.</p>
<div class="caja">
<p>Párrafo dentro de una caja.</p>
</div>
</div>
- Todos los párrafos deben tener un color de texto gris (#666) y un tamaño de fuente de 16px.
- El elemento con id "container" debe tener un ancho máximo de 800px y estar centrado con margen automático.
- Los elementos de lista con la clase "importante" deben tener el texto en negrita y color rojo (#FF0000).
- El párrafo con la clase "destacado" debe tener un fondo amarillo claro (#FFFFD0) y un padding de 10px.
- El título h1 debe tener un color azul (#0066CC).
- Los párrafos dentro de elementos con la clase "caja" deben tener un color de texto verde (#006600).
Escribe tu código CSS para lograr estos estilos utilizando los selectores más apropiados para cada caso.
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.
Propiedades de posicionamiento
Puzzle
Modelo de caja
Código
Sombras en texto y cajas
Test
Sintaxis básica
Test
Estilos de fuente
Test
Animaciones y transiciones
Test
Proyecto CSS Landing page simple
Proyecto
Propiedades de texto
Puzzle
Metodologías BEM, SMACSS, OOCSS
Puzzle
Herencia y cascada
Test
Reto fondos background CSS
Código
Reto sintaxis CSS
Código
Flexbox en diseños modernos
Puzzle
Reto grid de columnas en CSS
Código
Selectores avanzados
Puzzle
Reto formulario estilizado
Código
Proyecto CSS crear una navbar
Proyecto
Reto Flexbox Card
Código
Propiedad 'display'
Test
Variables en CSS
Puzzle
Grid en diseños de cuadrícula
Test
Reto tema claro/oscuro con variables
Código
Reto modelo caja CSS
Código
Reto implementación de fuentes web
Código
Diseño responsive con media queries
Test
Reto unidades de medida
Código
Sintaxis avanzada
Puzzle
Elementos 'float' y 'clear'
Test
Pseudo-clases y pseudo-elementos
Puzzle
Reto componente responsive
Código
Proyecto CSS Dashboard Responsive
Proyecto
Reto Flexbox Hero
Código
Propiedades de fondo
Puzzle
Introducción a CSS
Test
Reto propiedades texto
Código
Modelo de caja
Test
Selectores básicos
Test
Reto especificidad y cascada
Código
Tutorial para resolver este ejercicio de programación
CSS
Selectores básicos
Sintaxis de selectores y propiedades