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.