1 - Estilizando elementos con clases CSS

1. Estilizando elementos con clases CSS
   Para este ejercicio, la clave es crear una clase CSS llamada texto-destacado y aplicarla a un elemento de párrafo en HTML.

Archivo HTML

HTML

Este es un párrafo normal.

Este es un párrafo con texto destacado.

Este es otro párrafo normal.

CSS

.texto-destacado {
color: #007BFF; /* Un azul vibrante /
font-weight: bold; / Para hacerlo más visible */
}

2 - Destacando títulos con CSS

Imagina que estás desarrollando un blog y necesitas resaltar los títulos de las publicaciones. Crea una clase CSS llamada "titulo-blog" y aplícala a elementos

en tu archivo HTML. Luego, personaliza esta clase en el archivo CSS para cambiar el color del texto y darle más énfasis.

se crea una clase específica para los títulos de blog, titulo-blog, que se aplica a un elemento <h1>.

Archivo HTML

HTML

Título de la primera publicación

Contenido de la primera publicación...

Título de la segunda publicación

Contenido de la segunda publicación...

CSS

.titulo-blog {
color: #28a745; /* Un verde que evoca naturaleza /
text-transform: uppercase; / Para darle más énfasis */
}

3 - Estilos situacionales con clases CSS


3. Estilos situacionales con clases CSS

Este ejercicio utiliza una clase CSS, urgente, para cambiar el color del texto a rojo, alertando al lector sobre una noticia importante.

Archivo HTML

HTML

Noticia no urgente: La bolsa de valores cierra al alza.

¡Noticia urgente! Se emite alerta de tormenta para la región.

Noticia no urgente: El equipo local gana el campeonato.

CSS

.urgente {
color: red;
font-weight: bold;
}

4 - Entendiendo y aplicando el reset CSS

4. Entendiendo y aplicando el reset CSS

El reset CSS se aplica usando el selector universal (*) para eliminar los márgenes y rellenos predeterminados de todos los elementos, lo que te permite tener un control total sobre el diseño.

Archivo HTML

HTML

Este es un título

Este es un párrafo.

CSS

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Esto es una buena práctica adicional */
  }

  5 - Inspeccionando elementos y entendiendo el modelo de caja

Este ejercicio no requiere código específico para la implementación, ya que es una tarea de inspección con las herramientas del desarrollador (DevTools) de tu navegador. Debes abrir las DevTools (presionando F12 o Ctrl+Shift+I), seleccionar un elemento en tu página y observar las propiedades del modelo de caja (margin, border, padding, content) en la pestaña "Computed" o "Layout".

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

Este ejercicio aplica el conocimiento del modelo de caja para ajustar el espaciado de un elemento, en este caso un párrafo. Manipulas las propiedades margin, border y padding para ver cómo cambian su apariencia y posición.

Archivo HTML

HTML

Este párrafo tiene un estilo de caja único.

CSS

.caja-ejemplo {
background-color: lightblue;
padding: 20px; /* Relleno interior /
border: 5px solid darkblue; / Borde alrededor /
margin: 30px; / Margen exterior */
}