Cores e Planos de Fundo
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 32 de 76.
Desafio
FácilNesta tarefa, você personalizará as cores de fundo de diferentes seções do menu do café. Use sua criatividade para escolher cores que tornem o menu visualmente atraente!
Siga os passos abaixo:
- Aplique uma cor de fundo a toda a página (
body). Escolha qualquer cor que combine com o tema de um café. - Aplique uma cor de fundo e uma cor de texto ao rodapé (
footer) que complementem o design geral da página. - Sinta-se à vontade para alterar a cor de quaisquer outros elementos para aprimorar os estilos.
Experimente você mesmo
<html>
<head>
<title>Café Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Café Delight</h1>
<p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
</header>
<div class="menu-category">
<h2>Appetizers</h2>
<ul>
<li>
<p class="dish-name">Bruschetta $5.99</p>
</li>
<li>
<p class="dish-name">Garlic Bread $3.50</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Main Courses</h2>
<ul>
<li>
<p class="dish-name">Spaghetti Carbonara $12.99</p>
</li>
<li>
<p class="dish-name">Grilled Chicken Salad $9.99</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Desserts</h2>
<ul>
<li>
<p class="dish-name">Chocolate Cake $4.99</p>
</li>
<li>
<p class="dish-name">Cheesecake $5.49</p>
</li>
</ul>
</div>
<footer>
<p>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>Todas as lições de Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis