1. Estilizando elementos con clases CSS HTML:

Este es un párrafo con texto destacado.

.texto-destacado { color: #4A90E2; /* Azul claro */ font-weight: bold; } 2. Destacando títulos con CSS HTML:

Título de la Publicación del Blog

.titulo-blog { color: #D0021B; /* Rojo brillante */ font-size: 2.5em; font-weight: bold; } 3. Estilos situacionales con clases CSS HTML:

Esta es una noticia urgente.

.urgente { color: red; font-weight: bold; } 4. Entendiendo y aplicando el reset CSS CSS (reset.css):

• { margin: 0; padding: 0; box-sizing: border-box; } HTML:

1. Inspeccionando elementos y entendiendo el modelo de caja Para inspeccionar un elemento y entender su modelo de caja:

Abre tu sitio web en un navegador (como Chrome). Haz clic derecho en el elemento que quieres inspeccionar y selecciona "Inspeccionar" o usa el atajo de teclado. En las DevTools, selecciona la pestaña "Elements". Observa el panel Styles y el Box Model. Verás las propiedades margin, border, padding, y content.

1. Aplicando el modelo de caja en la práctica

css

.box-model { margin: 20px; border: 2px solid #000; padding: 15px; width: 300px; background-color: #f0f0f0; }