[Projeto]Mão na massa: Seletores e posicionamentos

1 Estilizando elementos com classes CSS

<strong class="texto-destaque">React, HTML e
            CSS</strong>.

.texto-destaque{
color:#fdf622;
}

2 Destacando títulos com CSS

<strong class="titulo-blog">com um Front-end de qualidade!
            </strong>

.titulo-blog{
    color: #fdf622;
}

3 Estilos situacionais com classes CSS


<strong class="urgente">Vamos 
            conversar?</strong>`

.urgente{
color: red;
}

4 Entendendo e aplicando o reset CSS

*{
    margin:0;
    padding:0;    
}

5 Inspecionando elementos e entendimento do modelo de caixa

Observei que a propriedade margin se refere a margem dos dois lados da página. Já a border se refere a borda do elemento que estamos trabalhando. A propriedade padding se refere ao espaço entre o conteúdo e a borda. content seria o conteúdo em si.

6 Aplicando o modelo de caixa na prática

p{
    margin: 15px;    
    border: 3px solid yellow;
    padding: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

Olá Renato, tudo bem com você?

É muito bom ver sua dedicação nos exercícios. A prática é a chave para o aprendizado.

Para saber mais

Margin (Margem):
- Definição: Controla o espaço entre o elemento e os elementos ao seu redor.
- Aplicação: Afeta as margens externas do elemento.
- Uso: margin: valor; ou margin: cima direita baixo esquerda;.
Border (Borda):
- Definição: Define a borda ao redor do elemento.
- Aplicação: Afeta a borda do elemento.
- Uso: border: largura estilo cor; (por exemplo, border: 1px solid #000;).
Padding (Preenchimento):
- Definição: Controla o espaço entre o conteúdo do elemento e sua borda.
- Aplicação: Afeta o espaço interno do elemento, entre o conteúdo e a * borda.
- Uso: padding: valor; ou padding: cima direita baixo esquerda;.
Content (Conteúdo):
- Definição: Refere-se ao conteúdo real do elemento (texto, imagens, etc.).
- Aplicação: Representa o conteúdo dentro da borda do elemento.
- Uso: O conteúdo é definido diretamente no HTML e pode ser estilizado usando outras propriedades CSS.

Continue praticando e conte com a Alura nesta jornada!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!