Scribd
Carregar
13 visualizações16 páginas

Exercícios Módulo Iniciando Com o CSS

O documento apresenta exercícios práticos para iniciantes em CSS, abordando desde a aplicação de estilos básicos até manipulação de dimensões e overflow. Cada exercício inclui instruções para criar arquivos HTML e CSS, além de exemplos de código. O objetivo é ensinar a aplicar estilos, criar layouts e entender propriedades CSS fundamentais.

Enviado por

operacional.aguiats
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
13 visualizações16 páginas

Exercícios Módulo Iniciando Com o CSS

O documento apresenta exercícios práticos para iniciantes em CSS, abordando desde a aplicação de estilos básicos até manipulação de dimensões e overflow. Cada exercício inclui instruções para criar arquivos HTML e CSS, além de exemplos de código. O objetivo é ensinar a aplicar estilos, criar layouts e entender propriedades CSS fundamentais.

Enviado por

operacional.aguiats
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 16

Exercícios Módulo Iniciando com o CSS

1. Iniciando com o CSS

Exercício: Aplicando Estilos Básicos

Crie um arquivo HTML básico e aplique os seguintes estilos diretamente no arquivo:

1. Altere a cor de fundo do corpo da página para azul-claro.


2. Defina a cor do texto como branco.
3. Aplique uma borda de 2px sólida ao redor de um parágrafo.

2. Estilos externos, IDs e classes

Exercício: Criando e usando IDs e classes

1. Crie um arquivo CSS externo e vincule-o a um arquivo HTML.


2. Crie um ID chamado header e defina uma cor de fundo verde para ele.
3. Crie uma classe chamada destaque e aplique:
○ Cor de texto amarela.
○ Negrito.
4. Aplique o ID a um título <h1> e a classe a um parágrafo.

3. Criando um menu básico e manipulando novas propriedades

Exercício: Criando um menu horizontal

1. Crie uma lista não ordenada (<ul>).


2. Adicione 4 itens à lista (Home, Sobre, Serviços, Contato).
3. Use CSS para:
○ Remover os marcadores das listas.
○ Tornar os itens horizontais.
○ Adicionar espaçamento entre os itens.
○ Alterar a cor de fundo ao passar o mouse sobre cada item.

4. Manipulando fontes e texto

Exercício: Personalizando textos

1. Aplique as seguintes personalizações a um texto:


○ Fonte: Arial.
○ Tamanho: 20px.
○ Alinhamento: Justificado.
○ Cor: Cinza.

5. Letter spacing

Exercício: Espaçamento entre letras

1. Crie um título <h2> com o texto "CSS é incrível".


2. Use CSS para aumentar o espaçamento entre as letras para 2px.
3. Altere o espaçamento para 5px ao passar o mouse sobre o título.

6. Manipulando dimensões

Exercício: Redimensionando elementos

1. Crie um bloco <div> com as dimensões 200px x 200px.


2. Use CSS para alterar:
○ A largura para 50% do tamanho da tela.
○ A altura para 300px.
○ Adicione uma borda para facilitar a visualização.

7. Listas e níveis de importância no CSS

Exercício: Personalizando listas

1. Crie uma lista ordenada (<ol>) com 3 itens.


2. Aplique CSS para:
○ Alterar a cor dos números para vermelho.
○ Adicionar uma margem de 10px entre os itens.
8. Reutilizando a mesma classe

Exercício: Usando classes em vários elementos

1. Crie uma classe chamada botao que aplique:


○ Cor de fundo azul.
○ Cor do texto branca.
○ Bordas arredondadas.
2. Use a mesma classe em botões de uma página (Exemplo: "Enviar", "Cancelar",
"Voltar").

9. Limitando as dimensões

Exercício: Definindo limites

1. Crie uma imagem e limite sua largura para 300px e altura para 200px usando CSS.
2. Use a propriedade max-width para evitar que a imagem ultrapasse 90% da largura
da tela.

10. Mais sobre espaçamentos

Exercício: Trabalhando com margens e padding

1. Crie um bloco <div> com texto dentro.


2. Aplique CSS para adicionar:
○ Margem externa de 20px.
○ Padding interno de 15px.
○ Bordas sólidas de 1px.

11. A propriedade display e técnicas de espaçamentos

Exercício: Manipulando display

1. Crie dois blocos <div> lado a lado.


2. Use a propriedade display para torná-los:
○ Inline-block.
○ Flexíveis, alinhados ao centro do container.
12. Utilizar float e as vantagens

Exercício: Flutuando elementos

1. Crie três blocos <div> de tamanhos diferentes.


2. Use float para alinhar os três à esquerda.
3. Adicione um rodapé abaixo dos blocos, garantindo que ele não sobreponha os
blocos flutuantes.

13. O que é overflow e como utilizar

Exercício: Lidando com overflow

1. Crie um bloco <div> com conteúdo maior que seu tamanho (ex: 200px x 200px).
2. Use as seguintes propriedades de overflow e observe o comportamento:
○ overflow: hidden;
○ overflow: scroll;
○ overflow: auto;
ATENÇÃO - NA PRÓXIMA PÁGINA
IREMOS APRESENTAR A RESOLUÇÃO
DOS EXERCÍCIOS.

ATENÇÃO - NA PRÓXIMA PÁGINA


IREMOS APRESENTAR A RESOLUÇÃO
DOS EXERCÍCIOS.

ATENÇÃO - NA PRÓXIMA PÁGINA


IREMOS APRESENTAR A RESOLUÇÃO
DOS EXERCÍCIOS.
Resolução dos Exercícios
1. Iniciando com o CSS

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Básico</title>
<style>
body {
background-color: lightblue;
color: white;
}
p {
border: 2px solid black;
}
</style>
</head>
<body>
<p>Este é um parágrafo com borda.</p>
</body>
</html>
2. Estilos externos, IDs e classes

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>IDs e Classes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Título Principal</h1>
<p class="destaque">Parágrafo destacado.</p>
<p>Parágrafo comum.</p>
</body>
</html>

CSS (arquivo styles.css):

#header {
background-color: green;
color: white;
}

.destaque {
color: yellow;
font-weight: bold;
}

3. Criando um menu básico

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Menu Básico</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Contato</li>
</ul>
</body>
</html>

CSS (arquivo menu.css):

.menu {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
}

.menu li {
padding: 10px 20px;
background-color: #007bff;
color: white;
cursor: pointer;
}

.menu li:hover {
background-color: #0056b3;
}

4. Manipulando fontes e texto

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Estilizando Texto</title>
<style>
p {
font-family: Arial, sans-serif;
font-size: 20px;
text-align: justify;
color: gray;
}
</style>
</head>
<body>
<p>Texto estilizado com CSS.</p>
</body>
</html>

5. Letter spacing

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Letter Spacing</title>
<style>
h2 {
letter-spacing: 2px;
}
h2:hover {
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>CSS é incrível</h2>
</body>
</html>

6. Manipulando dimensões

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Dimensões</title>
<style>
.box {
width: 50%;
height: 300px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

7. Listas e níveis de importância no CSS

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Listas</title>
<style>
ol {
color: red;
margin: 10px;
}
</style>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>

8. Reutilizando a mesma classe

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Classes</title>
<style>
.botao {
background-color: blue;
color: white;
border-radius: 5px;
padding: 10px 20px;
}
</style>
</head>
<body>
<button class="botao">Enviar</button>
<button class="botao">Cancelar</button>
<button class="botao">Voltar</button>
</body>
</html>

9. Limitando dimensões

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Dimensões</title>
<style>
img {
max-width: 300px;
height: auto;
}
</style>
</head>
<body>
<img src="exemplo.jpg" alt="Exemplo">
</body>
</html>

10. Mais sobre espaçamentos

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Espaçamentos</title>
<style>
.box {
margin: 20px;
padding: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">Texto com espaçamento.</div>
</body>
</html>

11. A propriedade display

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Display</title>
<style>
.container {
display: flex;
justify-content: center;
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

12. Float e vantagens

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Float</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<footer>Rodapé</footer>
</body>
</html>
13. Overflow

HTML (arquivo index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Overflow</title>
<style>
.box {
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<p>Texto muito longo que ultrapassa o tamanho do box...</p>
</div>
</body>
</html>

Você também pode gostar