[Projeto] Lista de exercícios

Olá colegas...venho deixar novamente aqui mais uma possível forma de estar codificando seus projetos (essa forma que eu encontrei até o momento)

1. Estilizando elementos com classes CSS

.texto-destaque{
    color: rgb(0, 81, 255);

}

Nesse exemplo, utilizei a cor azul (estava usando a colaração branca no fundo, então serviu tranquilamente para fazer destaque)

1. Destacando títulos com CSS

.titulo-blog{
    font-weight: bold;
    color: blueviolet;
    }

Nesse... coloquei em negrito e alterei a cor para violeta

1. Estilos situacionais com classes CSS

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

Esse foi mais simples...apenas alterei a cor para vermelho e novamente o coloquei em negrito para dar ênfase na "noticia urgente"

1. Entendendo e aplicando o reset CSS

*{
    margin: 0;
    padding: 0;
}

Como mencionado nas video-aulas...essa é a maneira mais rapida e facil para resetar as boxs models (que vem já com um valor padrão no HTML)

1. Inspecionando elementos e entendimento do modelo de caixa

margin = é equivalente a área mais externa border = é equivalente as bordas (cujas podem ser estilizadas, como por exemplo alterando a cor das mesmas) padding= é o preenchimento, básicamente com ele pode-se alterar o espaçamento das letras content = é o conteúdo, nele se altera o que está em exibição (relacionado a textos) em HTML

1. Aplicando o modelo de caixa na prática

.titulo-blog{
    font-weight: bold;
    margin: 10px;
    border: 1px solid aqua;
    border-radius: 10px;
    padding: 10px;
    color: blueviolet;
}

Nesse exemplo... tivemos o texto em questão convertido para negrito. com uma margem de 10 pixels uma fina borda de 1px com solida de cor aqua (com o raio da borda setado em 10px) preenchimento equivalente a 10px e por fim com a cor escolhida sendo a blueviolet