Estilizando elementos con clases CSS

Abrí el archivo HTML y localiza el elemento
que deseas estilizar.

Agregue la propiedad class="texto-destaque" dentro de la etiqueta
.

<p class="texto-destaque"> Hola! Soy Daniela

En el archivo CSS, creé una nueva regla para la clase

.texto-destaque {
color: #34f703; /* color verde Vibrante */
}

Destacando títulos con CSS

En el archivo HTML, añadí class="titulo-blog" a los elementos

que representan los títulos de las publicaciones.

<h1= class="titulo-blog"> Mis Estudios

En el archivo CSS, llamé a la regla para

.titulo-blog. {
 color: #f7f703/* color Amarillo llamativo */
}

Estilos situacionales con clases CSS

En el archivo HTML, identifique los párrafos con noticias urgentes y agregue class="urgente" a esos elementos

<p class="urgente"> Terremoto en Rusia

En el CSS, creé la regla para la clase

    .urgente. {
color: #00ff5; /* color verde llamativo */
}

Entendiendo y aplicando el Reset CSS

Creé el archivo CSS: Creé un nuevo archivo CSS (style.css) para el proyecto.

Escribí el código de Reset CSS: En el archivo style.css, añadí el siguiente código:

    * {
  margin: 0;
  padding: 0;
    }

Vinculé el archivo CSS al HTML:

Probé los cambios: Los espacios por defecto (márgenes y rellenos) fueron eliminados.

Inspeccionando elementos y entendiendo el modelo de caja

Para acceder a las DevTools: seleccioné "Inspeccionar" para abrir las DevTools.

Al analizar el modelo de caja: En la pestaña "Elementos", pasé el ratón sobre las diferentes propiedades (margen, borde, relleno, contenido) para visualizar cómo están afectando al elemento seleccionado.

Describir las observaciones:

```
El margen añade espacio externo, 
```
```
El relleno espacio interno, 
```
El borde define un contorno, y

El contenido es el área donde se muestra el contenido del elemento.

Aplicando el modelo de caja en la práctica

Al Seleccionar un elemento: Elegí un párrafo (
).

Aplique estilos en CSS:
En tu archivo CSS, añadí estilos específicos para el elemento elegido:

.	p {
       margin: 10px;
       border: 2px solid black;
       padding: 5px;
     }

Observe los cambios:

```
Al margen se añade espacio externo, 
```
```
Al borde crea un contorno visual, 
```
```
Al relleno añade espacio interno, y 
```

Al contenido se muestra dentro de estos límites.

Hola Daniela, espero que estés bien

Parece que estás siguiendo una serie de pasos para estilizar elementos en HTML y CSS, pero hay algunos pequeños errores en tu código que podrían estar causando problemas. Vamos a revisarlos juntos:

Estilizando elementos con clases CSS:
- Tu código para el párrafo parece correcto. Asegúrate de que el archivo CSS esté vinculado correctamente al archivo HTML para que los estilos se apliquen.
Destacando títulos con CSS:
- En tu etiqueta <h1>, hay un pequeño error de sintaxis. Debería ser:
```
<h1 class="titulo-blog"> Mis Estudios </h1>
```
- Además, en el CSS, hay un punto extra después del nombre de la clase que debe ser eliminado:
```
.titulo-blog {
  color: #f7f703; /* color Amarillo llamativo */
}
```
Estilos situacionales con clases CSS:
- En el CSS para la clase urgente, hay un error en el código de color hexadecimal. Debería tener seis dígitos. Aquí está la corrección:
```
.urgente {
  color: #00ff55; /* color verde llamativo */
}
```
Entendiendo y aplicando el Reset CSS:
- Parece que esta parte está bien hecha. Solo asegúrate de que el archivo CSS con el reset esté vinculado correctamente al HTML.
Aplicando el modelo de caja en la práctica:
- En tu CSS, hay un punto extra antes de la etiqueta p. Debería ser:
```
p {
  margin: 10px;
  border: 2px solid black;
  padding: 5px;
}
```

Corrigiendo estos pequeños errores, deberías ver los cambios reflejados en tu página. Asegúrate de revisar que todos los archivos CSS estén bien vinculados en tu HTML para que los estilos se apliquen correctamente.

Espero haber ayudado y buenos estudios!