- Estilizando elementos com classes CSS e Entendendo e aplicando o reset CSS:
✦ Html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Receitas de bolo para você!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Receita de Bolo de Chocolate Simples e Fofinho ── .✦</h1>
<p class="texto-destaque">Ingredientes:</p>
</body>
</html>
✦ CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: beige;
color: slategray;
}
.texto-destaque {
color:sienna;
}
- Destacando títulos com CSS:
✦ Html:
//código omitido
<body>
<h1 class="titulo-blog">Receita de Bolo de Chocolate Simples e Fofinho ── .✦</h1>
<p class="texto-destaque">⋆˚࿔ Ingredientes:</p>
</body>
//código omitido
✦ CSS:
//código omitido
.titulo-blog {
color: slategray;
font-family: 'Arial Narrow';
}
//código omitido
- Inspecionando elementos e entendimento do modelo de caixa:
Inspecionando o elemento <h1> no site, utilizando o DEVTools, tirei as seguintes conclusões:
・Como coloquei no código o reset de CSS, Margin e padding estão ocupando o espaço necessário para o conteúdo da página, sem nenhum espaço adicional ao redor ou dentro deles.
・Já o border está configurado como 2px solid black e o content é onde está o parágrafo: "Ingredientes".
- Aplicando o modelo de caixa na prática + HTML e CSS finalizados:
✦ Html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Receitas de bolo para você!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="titulo-blog">Receita de Bolo de Chocolate Simples e Fofinho ── .✦</h1><br>
<p class="texto-destaque">⋆˚࿔ Ingredientes:</p><br>
<ul class="lista-bolo">
<li>2 ovos</li>
<li>1 e 1/2 xícara chá de açúcar</li>
<li>2 xícaras chá de farinha de trigo</li>
<li>1 xícara chá de chocolate em pó ou achocolatado</li>
<li>2 colheres de sopa de Margarina Doriana com Sal</li>
<li>1 colher sopa de fermento em pó</li>
<li>1 pitada de sal</li>
<li>1 xícara chá de leite</li>
</ul>
</body>
</html>
✦ CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: beige;
color: slategray;
}
.titulo-blog {
color: slategray;
font-family: 'Arial Narrow';
}
.texto-destaque {
color:sienna;
}
.lista-bolo {
margin: 20px;
border: 2px solid rgb(175, 110, 50);
padding: 30px;
background-color:aliceblue;
}
O trecho de CSS da imagem vai trocar a 'bolinha' que fica antes de cada item da lista por um emoji de diamante laranja. Parabéns pela entrega e obrigado por compartilhar seu projeto aqui no fórum.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!