[Projeto] Desafio 1 HTML-CSS Curso-2

1) Estilizando elementos com classes CSS

HTML:

<h1 class="titulo-blog">Título da postagem</h1>

CSS:

.titulo-blog {
    color: #3366cc; /* Azul */
}

2) Destacando títulos com CSS

HTML:
<h1 class="titulo-blog">Título da postagem</h1>

CSS:
.titulo-blog {
    color: #3366cc; /* Azul */
}

3) Estilos situacionais com classes CSS
    
HTML:
<p class="urgente">Notícia urgente: lorem ipsum...</p>

CSS:
.urgente {
    color: red;
}

4) Entendendo e aplicando o reset CSS

CSS:
* {
    margin: 0;
    padding: 0;
}

1. Inspecionando elementos e entendimento do modelo de caixa.

   Utilizando as ferramentas de desenvolvimento do navegador, pode-se inspecionar um elemento e visualizar o modelo de caixa, que inclui propriedades como margin, border, padding e content. Posso ver que um parágrafo tem uma determinada margem ao redor do conteúdo, um preenchimento interno, uma borda e o conteúdo real do parágrafo.

2. Aplicando o modelo de caixa na prática.

   Posso selecionar um elemento, como um parágrafo, e ajustar suas propriedades de margin, border, padding e content no CSS para observar como cada alteração afeta o elemento na página. Por exemplo, aumentar o preenchimento pode aumentar o espaço ao redor do texto, enquanto adicionar uma borda pode criar um contorno ao redor do elemento. Posso experimentar diferentes valores para entender como o modelo de caixa CSS funciona na prática.