1) Estilizando elementos com classes CSS
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilizando Elementos com Classes CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="texto-destaque">Este é um texto destacado usando a classe "texto-destaque".</p>
</body>
</html>
CSS
/* styles.css */
.texto-destaque {
color: #ff6600; /* Laranja vibrante */
font-weight: bold;
font-size: 18px;
}
2) Destacando títulos com CSS
HTML
<h1 class="titulo-blog">Título de uma Postagem do Blog</h1>
CSS
.titulo-blog {
color: #0044cc; /* Azul forte */
font-size: 32px;
text-transform: uppercase;
text-align: center;
}
3) Estilos situacionais com classes CSS
HTML
<p class="urgente">⚠️ Última Hora: Grandes mudanças no mercado financeiro!</p>
CSS
.urgente {
color: #d00000; /* Vermelho intenso */
font-weight: bold;
background-color: #ffe5e5; /* Fundo suave para mais destaque */
padding: 10px;
border-radius: 5px;
}
4) Entendendo e aplicando o reset CSS
HTML
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
O código remove os estilos padrão do navegador, proporcionando um layout mais previsível.
5) Inspecionando elementos e entendimento do modelo de caixa
Feito no navegador, no Google Chrome, usando o botão direito do mouse e clicando em "inspecionar".
6) Aplicando o modelo de caixa na prática
HTML
<div class="box-modelo">
<p>Este é um parágrafo com ajustes no modelo de caixa.</p>
</div>
CSS
.box-modelo {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 15px auto;
background-color: #f0f0f0;
text-align: center;
}
Foi feito ajustes no , e para visualizar como eles afetam o posicionamento e a aparência do elemento.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
