Descrição:
Crie uma página HTML com um parágrafo (<p>) que contenha texto. Use um seletor de elemento para alterar a cor do texto para verde e o tamanho da fonte para 18px.
Resposta:
<!DOCTYPE html>
<html>
<head>
<title>Exercício de Seletores</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Este é um texto verde com fonte de tamanho 18px.</p>
</body>
</html>
Descrição:
Crie uma <div> com texto dentro. Estilize essa <div> para ter uma borda azul sólida de 2px, um preenchimento interno (padding) de 20px, e uma margem externa (margin) de 15px. Defina um fundo amarelo claro.
Solução:
<!DOCTYPE html>
<html>
<head>
<title>Exercício Box Model</title>
<style>
div {
border: 2px solid blue;
padding: 20px;
margin: 15px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div>Texto dentro de uma div com Box Model aplicado.</div>
</body>
</html>
Descrição: Crie um container flexível com três itens dentro. Use Flexbox para organizar esses itens horizontalmente com espaço igual entre eles.
Solução:
<!DOCTYPE html>
<html>
<head>
<title>Exercício Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Descrição: Utilizando CSS Grid, crie um layout de galeria com duas colunas. Inclua quatro itens (divs) nessa galeria.
Solução:
<!DOCTYPE html>
<html>
<head>
<title>Exercício Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
height: 100px;
background-color: lightcoral;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
Descrição: Adicione uma media query ao exercício de Grid para que, em telas menores que 600px, a galeria mostre apenas uma coluna.