1 - Estilizando elementos com classes CSS
HTML:
<body>
<main>
<h1> Poema de Carlos Drummond de Andrade </h1>
<h2> No Meio do Caminho </h2>
<p> No meio do caminho tinha <strong class = "texto-destaque"> uma pedra </strong>
tinha <strong class = "texto-destaque"> uma pedra </strong> no meio do caminho
tinha <strong class = "texto-destaque"> uma pedra </strong>
no meio do caminho tinha <strong class = "texto-destaque"> uma pedra </strong> </p>
<p> Nunca me esquecerei desse acontecimento
na vida de minhas retinas tão fatigadas.
Nunca me esquecerei que no meio do caminho
tinha <strong class = "texto-destaque"> uma pedra </strong>
tinha <strong class = "texto-destaque"> uma pedra </strong> no meio do caminho
no meio do caminho tinha <strong class = "texto-destaque"> uma pedra. </strong> </p>
</main>
</body>
</html>
CSS:
* {
text-align: center;
}
body {
background-color: #7A5D3D;
color: white;
}
main {
background-color: #A57037;
}
.texto-destaque {
color: #FA8100;
}
2 - Destacando títulos com CSS
<body>
<main>
<h1> Postagem 1 - <strong class = "titulo-blog"> Peixe Vivo </strong> </h1>
<p> Como pode o peixo vivo
Viver fora da água fria
Como pode o peixe vivo
Viver fora da água fria
Como poderei viver
Como poderei viver
Sem a tua, sem a tua
Sem a tua companhia
Sem a tua, sem a tua
Sem a tua companhia
Os pastores desta aldeia
Já me fazem zombaria
Os pastores desta aldeia
Já me fazem zombaria
Por me verem assim chorando
Por me verem assim chorando
Sem a tua, sem a tua
Sem a tua companhia
Sem a tua, sem a tua
Sem a tua companhia </p>
<h1> Postagem 2 - <strong class = "titulo-blog"> Escravos de Jó </strong> </h1>
<p> Escravos de Jó
Jogavam caxangá
Tira, bota, deixa ficar
Guerreiros com guerreiros fazem zigue-zigue-zá
Guerreiros com guerreiros fazem zigue-zigue-zá. </p>
</main>
</body>
</html>
CSS:
* {
text-align: center;
}
body {
background-color: #477A3D;
}
main {
background-color: #29FA00;
}
h1 {
color: black;
}
.titulo-blog {
color: #FAF900;
}
3 - Estilos situacionais 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> Jornal Nacional </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1 class="titulo-central"> Jornal Nacional </h1>
<h1> <a href="https://g1.globo.com/mundo/ao-vivo/israel-anuncia-ataque-ao-ira.ghtml"> Estados Unidos estão
prontos para agir após chance de escalada no conflito entre Israel e Irã </a></h1>
<p> [...] </p>
<h1> <a href="https://g1.globo.com/politica/blog/valdo-cruz/post/2025/06/18/em-vez-de-aprovar-projetos-de-interesse-da-populacao-congresso-vai-na-contramao-derruba-vetos-de-lula-e-pode-fazer-a-conta-de-luz-subir.ghtml">
Câmara derruba vetos do presidente Lula sobre <element class = "urgente"> cortes na conta de luz </element> </a> </h1>
<p> A Câmara dos Deputados aprovou hoje a derrubada dos vetos do presidente sobre o
<element class ="urgente"> aumento da conta de luz. </element>
Resultado foi de ? a favor e ? contra
</p>
</main>
</body>
</html>
CSS:
body {
background-color: #0018A3;
}
main {
background-color: white;
}
.titulo-central {
color: black;
text-align: center;
}
.urgente {
color: red;
}
a {
text-decoration: none;
color: black;
border: black solid 5px;
padding: 5px;
}
4 - Entendendo e aplicando o reset CSS
CSS:
* {
margin: 0;
padding: 0;
}
5 - Inspecionando elementos e entendimento do modelo de caixa && 6 - Aplicando o modelo de caixa na prática
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!