Apostila HTML e CSS Impressionador Oficial

Prévia do material em texto

Curso Completo de HTML e CSS da Hashtag 
Programação
HTML e CSS
IMPRESSIONADOR
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
SUMÁRIO
MÓDULO 2 BOA VINDAS E CONFIGURAÇÕES INICIAIS
01
02
03
O QUE É DESENVOLVIMENTO WEB
BAIXANDO E CONFIGURANDO NOSSO EDITOR DE CÓDIGOS
2 DICAS PARA TODO PROGRAMADOR
006
011
021
2
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
MÓDULO 3 INTRODUÇÃO AO HTML
01
02
03
04
O QUE É HTML
ESTRUTURA DE UM DOCUMENTO HTML
ELEMENTOS DE TEXTO
ÊNFASE, IMPORTÂNCIA E FORMATAÇÃO DE TEXTOS
029
030
038
048
05 LISTAS ORDENADAS E NÃO ORDENADAS 055
06 HIPERLINKS 059
07 IMAGENS E SEUS ATRIBUTOS NO HTML 071
08 FERRAMENTAS DO PROGRAMADOR 075
09
10
11
12
DESAFIO 1 – APRESENTANDO O DESAFIO
DESAFIO 1 – CONSTRUINDO O DESAFIO DO ZERO
DESAFIO 2 – HOME DO HASHTAG TRENAMENTOS
DESAFIO 2 – CRIANDO O CABEÇALHO
077
080
087
089
13 DESAFIO 2 – CRIANDO A SEÇÃO HERO 096
14 DESAFIO 2 – CRIANDO A SEÇÃO CONTEÚDOS GRATUITOS 099
15 DESAFIO 2 – CRIANDO A SEÇÃO DIFERENCIAIS 104
16 DESAFIO 2 – CRIANDO A SEÇÃO O QUE FALAM 110
17 DESAFIO 2 – CRIANDO A SEÇÃO NA MÍDIA 112
18 DESAFIO 2 – CRIANDO A SEÇÃO BLOG DA HASHTAG 113
19 DESAFIO 2 – CRIANDO A SEÇÃO COM AJUDAR 118
20 DESAFIO 2 – CRIANDO A SEÇÃO MINICURSO 120
21 DESAFIO 2- CRIANDO O RODAPÉ 121
SUMÁRIO
MÓDULO 4 INTRODUÇÃO AO CSS
3
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
01
02
03
04
O QUE É CSS
AS TRÊS FORMAS DE ESCREVER CSS
SELETORES NO CSS
COMBINANDO SELETORES
128
129
139
144
05 ESTILIZANDO TEXTOS 147
06 TRABALHANDO COM CORES 152
07 ESTILIZANDO HIPERLINKS 157
08 DESAFIO 1 – FORMATANDO UMA PÁGINA EM HTML 160
09
10
11
12
DESAFIO 1 – RESOLVENDO O DESAFIO
DESAFIO 2- FORMATANDO A HOME DA HASHTAG
DESAFIO 2 – FORMATANDO O CABEÇALHO
DESAFIO 2 – FORMATANDO A SEÇÃO HERO
162
167
168
171
13 DESAFIO 2 – FORMATANDO A SEÇÃO CONTEÚDOS GRATUITOS 173
14 DESAFIO 2 – FORMATANDO A SEÇÃO DIFERENCIAIS 174
15 DESAFIO 2 – FORMATANDO A SEÇÃO O QUE FALAM 180
16 DESAFIO 2 – FORMATANDO A SEÇÃO NA MÍDIA 181
17 DESAFIO 2 – FORMATANDO A SEÇÃO BLOG HASHTAG 182
18 DESAFIO 2 – FORMATANDO A SEÇÃO COMO AJUDAR 185
19 DESAFIO 2 – FORMATANDO A SEÇÃO MINICURSO 187
20 DESAFIO 2 – FORMATANDO O RODAPÉ 188
MÓDULO 5 APROFUNDANDO NO HTML
01
02
03
04
APRESENTAÇÃO DO MÓDULO
CITAÇÕES, ABREVIAÇÕES E DETALHES DE CONTATO
CÓDIGOS E DATAS
ENTRANDO MAIS A FUNDO NA ESTRUTURA DOS DOCUMENTOS
191
192
196
199
05 FORMULÁRIOS 202
06 TABELAS 207
SUMÁRIO
MÓDULO 5 APROFUNDANDO NO HTML
4
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
07
08
09
10
IFRAMES
DESAFIO 1 – APRESENTANDO O DESAFIO
DESAFIO 1 – CONSTRUINDO JUNTOS
DESAFIO 2 – EXPLICANDO AS NOVIDADES
213
217
218
226
11 DESAFIO 2 – COMPLETANDO O CABEÇALHO 227
12 DESAFIO 2 – COMPLETANDO A SEÇÃO HERO 228
13 DESAFIO 2 – COMPLETANDO A SEÇÃO CONTEÚDOS GRATUITOS 231
14 DESAFIO 12– COMPLETANDO A SEÇÃO DIFERENCIAIS 233
15
16
17
18
DESAFIO 2 – COMPLETANDO A SEÇÃO O QUE FALAM E NA MÍDIA
DESAFIO 2- COMPLETANDO A SEÇÃO BLOG DA HASHTAG
DESAFIO 2 – COMPLETANDO A SEÇÃO COMO AJUDAR
DESAFIO 2 – COMPLETANDO A SEÇÃO MINICURSO
235
237
238
239
19 DESAFIO 2 – COMPLETANDO O RODAPÉ 241
1 APRESENTANDO O MÓDULO 245
2 ESPECIFICIDADE NO CSS 246
3 TRABALHANDO COM ESPAÇAMENTOS 253
4 DIMENSÕES E UNIDADES NO CSS 259
5 PSEUDO-CLASSES 267
PSEUDO-ELEMENTOS 2746
MÓDULO 6 APROFUNDANDO NO CSS
7 SELETOR UNIVERSAL E HERANÇA DE ESTILOS 281
8 BOX MODEL NO CSS 286
9
10
11
12
SOMBRAS
ELEMENTOS ARREDONDADOS
TIPOS DE VISUALIZAÇÃO
TIPOS DE POSICIONAMENTO
291
296
299
374
13 BACKGROUND COLOR E IMAGE 313
SUMÁRIO
MÓDULO 6 APROFUNDANDO NO CSS
5
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
14
15
16
17
DESAFIO 1
DESAFIO 1 - FAZENDO JUNTOS
DESAFIO 2 - APROFUNDANDO NO DESAFIO 2
DESAFIO 2 - APROFUNDANDO O CABEÇALHO
324
325
343
344
18 DESAFIO 2 - APROFUNDANDO A SEÇÃO HERO 355
19 DESAFIO 2 – APROFUNDANDO A SEÇÃO CONTEÚDOS GRATUITOS 370
20 DESAFIO 2– APROFUNDANDO A SEÇÃO DIFERENCIAIS 397
21 DESAFIO 2 – APROFUNDANDO A SEÇÃO O QUE FALAM 414
22
23
24
25
DESAFIO 2 – APROFUNDANDO A SEÇÃO NA MÍDIA
DESAFIO 2 – APROFUNDANDO O BLOG DA HASHTAG
DESAFIO 2 – APROFUNDANDO A SEÇÃO COMO AJUDAR
DESAFIO 2 – APROFUNDANDO A SEÇÃO MINICURSO
428
432
439
448
26 DESAFIO 2 – APROFUNDANDO O RODAPÉ 453
Módulo 2
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
6
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 2 – O que é Desenvolvimento Web (1 / 4)
000 000
7
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O desenvolvimento web é o processo de criar e manter sites e aplicativos que você acessa na internet. Envolve coisas como projetar 
como o site vai parecer, escrever o código para torná-lo funcional, cuidar do armazenamento de informações e garantir que ele 
funcione bem em diferentes tipos de computadores e navegadores.
Existem duas partes principais no desenvolvimento web:
• Front-end: É a parte visível do site, onde você interage. Envolve o layout, cores e botões que você vê ao navegar em um site.
• Back-end: É a parte invisível que faz o site funcionar nos bastidores. Aqui, são tratadas coisas como armazenamento de dados, 
autenticação e lógica do servidor, usando linguagens de programação e bancos de dados.
Além disso, é importante configurar um banco de dados para armazenar informações do site, como dados de usuários, produtos ou 
conteúdo.
• Banco de Dados: O banco de dados é uma parte crucial do desenvolvimento web. É onde todas as informações do site, como 
dados de usuários, produtos ou conteúdo, são armazenadas e gerenciadas.
Essas três partes juntas completam o processo de desenvolvimento web, que abrange desde o planejamento inicial até a 
manutenção contínua do site.
Módulo 2 – O que é Desenvolvimento Web (2 / 4)
000 000
8
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Páginas Estáticas:
Páginas estáticas são páginas da web que contêm conteúdo fixo e não mudam a menos que um desenvolvedor intervenha 
manualmente para fazer alterações no código-fonte. Essas páginas são rápidas para carregar, pois o conteúdo permanece 
inalterado e pode ser facilmente cacheado pelos servidores web. São relativamente simples de criar, uma vez que não envolvem a 
complexidade de um banco de dados ou de lógica de programação para gerar conteúdo dinâmico. Isso as torna adequadas para 
sites pequenos ou que não precisam de atualizações frequentes. Exemplos comuns de páginas estáticas incluem páginas de 
informações, como páginas de contato, currículos ou sites de portfólio pessoal.
Páginas Dinâmicas:
Páginas dinâmicas, por outro lado, exibem conteúdo que pode ser gerado ou atualizado em tempo real com base em interações do 
usuário ou dados armazenados em um banco de dados. Essas páginas são altamente interativas e permitem recursos como 
formulários, login de usuário, carrinhos de compras em lojas online e comentários em blogs. Elas são capazes de exibir conteúdo 
personalizado para diferentes usuários, com base em preferências ou informações de perfil. A criação de páginas dinâmicas é mais 
complexa, envolvendo programação e o uso de linguagens como PHP, Python, Ruby, JavaScript e bancos de dados para gerenciar 
informações em tempo real. São ideais para sites maiores, como redes sociais, lojas online, portais de notícias, onde o conteúdo 
precisa ser atualizado constantemente.
Módulo 2 – O que é Desenvolvimento Web (3 / 4)
000 000
9
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Front-end, também conhecido como desenvolvimento front-end ou programação front-end, refere-se à parte de 
um site ou aplicativo web que os usuários finais veem e interagem diretamente. É a interface do usuário e a 
experiência visual que um site proporciona. O front-end é construído principalmente com três tecnologias 
principais:
HTML (HyperText Markup Language): O HTML é a espinha dorsal de uma página web. Ele é usado para estruturar 
o conteúdo da página,como texto, imagens, links e outros elementos. Cada elemento HTML é marcado com tags, 
como <div>, <p>, <img>, e assim por diante. Essas tags definem a estrutura e a hierarquia da página.
CSS (Cascading Style Sheets): O CSS é usado para estilizar e formatar a página web. Ele controla o layout, as cores, 
as fontes e o posicionamento de todos os elementos HTML em uma página. Com CSS, você pode definir o aspecto 
visual do site, tornando-o atraente e acessível.
JavaScript: O JavaScript é uma linguagem de programação que adiciona interatividade e dinamismo a uma 
página web. Com JavaScript, você pode criar efeitos de animação, validar formulários, responder a eventos do 
usuário e atualizar o conteúdo da página em tempo real. Ele permite que as páginas web se comportem de 
maneira mais semelhante a aplicativos de desktop.
Em resumo, o front-end é a camada de um site que lida com a apresentação e a interação com o usuário. O HTML 
estrutura o conteúdo, o CSS estiliza e formata a página, e o JavaScript adiciona interatividade e funcionalidade 
dinâmica. Juntos, essas tecnologias permitem que os desenvolvedores criem interfaces de usuário atraentes e 
funcionais para os visitantes da web.
Módulo 2 – O que é Desenvolvimento Web (4 / 4)
000 000
10
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Existem vários tipos de desenvolvedores, cada um com habilidades e responsabilidades específicas. Aqui estão alguns dos tipos 
mais comuns de desenvolvedores:
Desenvolvedor Front-End: Os desenvolvedores front-end são responsáveis pela criação da interface do usuário de um site ou 
aplicativo web. Eles usam tecnologias como HTML, CSS e JavaScript para desenvolver a parte visível e interativa de uma página 
web. Esses desenvolvedores garantem que o site seja atraente, responsivo e fácil de usar.
Desenvolvedor Back-End: Os desenvolvedores back-end trabalham na parte do servidor de um site ou aplicativo. Eles lidam com 
o processamento de dados, a lógica de negócios e a comunicação com bancos de dados. Linguagens como PHP, Python, Ruby, 
Java e Node.js são comumente usadas no desenvolvimento back-end.
Desenvolvedor Full-Stack: Um desenvolvedor full-stack é alguém que possui habilidades tanto de front-end quanto de back-end 
e pode trabalhar em todas as camadas de um projeto web. Eles têm um amplo conhecimento das tecnologias e geralmente 
podem gerenciar um projeto por completo, desde a criação da interface do usuário até a configuração do servidor.
Desenvolvedor de banco de dados: Especializado em projetar e gerenciar bancos de dados, garantindo a eficiência e segurança 
no armazenamento de informações. Trabalha em conjunto com desenvolvedores back-end. Os desenvolvedores de banco de 
dados podem usar sistemas de gerenciamento de bancos de dados (SGBDs) como MySQL, PostgreSQL, SQL Server ou Oracle.
Módulo 2 – Baixando e Configurando nosso editor de códigos (1 / 10)
000 000
11
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Visual Studio Code
O Visual Studio Code (VS Code) é um editor de código amplamente utilizado para desenvolver sites e aplicativos web usando HTML 
e CSS. Ele oferece uma interface amigável e funcionalidades que facilitam a escrita e edição de código, como realce de sintaxe, 
sugestões de código e integração com extensões que agilizam o desenvolvimento web. O VS Code é altamente personalizável e é 
uma escolha popular entre desenvolvedores front-end devido à sua eficiência e suporte à comunidade.
Baixando o VS Code
1. Acesse o Site Oficial: Abra seu navegador da web e vá para o site oficial do Visual Studio Code em 
https://code.visualstudio.com/.
2. Download: Clique no botão "Download" de acordo com o sistema operacional do seu computador na página inicial do site. No 
nosso caso estaremos instalando para Windows.
https://code.visualstudio.com/
Módulo 2 – Baixando e Configurando nosso editor de códigos (2 / 10)
000 000
12
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
3. Baixe o Arquivo de Instalação: O navegador irá baixar um arquivo de instalação com extensão ".exe". Aguarde até que o 
download seja concluído.
4. Inicie o Instalador: Após o download, clique duas vezes no arquivo ".exe" baixado para iniciar o instalador do VS Code.
5. Aceite os Termos de Uso: Você verá uma tela inicial do instalador. Clique em "Next" (Próximo) para continuar.
6. Selecione as Opções de Instalação: Escolha o local onde deseja instalar o VS Code e selecione as opções adicionais, como 
adicionar ícones à área de trabalho e associar arquivos ".code" ao VS Code. Em seguida, clique em "Next" (Próximo).
7. Selecione Componentes Adicionais (Opcional): O instalador pode oferecer a opção de instalar componentes adicionais, 
como o Git. Se desejar, selecione as opções desejadas e clique em "Next" (Próximo).
Ao chegar na tela ao lado, você poderá adicionar a opção de adicionar a 
ação "Abrir com Code" que permite que você abra pastas ou arquivos 
diretamente no Visual Studio Code (VS Code) a partir do menu de 
contexto (clique com o botão direito do mouse) do Windows Explorer 
ou do gerenciador de arquivos do seu sistema operacional. Isso é 
particularmente útil quando você está trabalhando em projetos e 
deseja abrir pastas ou arquivos específicos diretamente do explorador 
de arquivos do seu sistema operacional, economizando tempo e 
simplificando o processo de desenvolvimento.
Módulo 2 – Baixando e Configurando nosso editor de códigos (3 / 10)
000 000
13
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
8. Inicie a Instalação: Clique em "Install" (Instalar) para iniciar o processo de instalação.
9. Conclua a Instalação: Após a conclusão da instalação, clique em "Finish" (Concluir) para fechar o instalador.
Agora você tem o Visual Studio Code instalado em seu computador Windows e pode começar a usá-lo para desenvolver projetos 
HTML e CSS.
Agora você irá abrir o menu iniciar do seu computador, pesquisar por VS Code e inicializar o programa.
Módulo 2 – Baixando e Configurando nosso editor de códigos (4 / 10)
000 000
14
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As extensões no Visual Studio Code (VS Code) são módulos de software adicionais que você pode instalar para estender a funcionalidade 
padrão do editor.
Para instalar extensões no VS Code, você pode seguir estes passos:
1. Abra o VS Code.
2. Vá para a seção "Extensões" no menu lateral esquerdo (ícone de quebra-cabeça).
3. Pesquise a extensão desejada na barra de pesquisa.
4. Clique em "Instalar" na extensão que deseja adicionar.
5. Depois de instalada, você pode configurar e usar a extensão conforme necessário.
As extensões tornam o VS Code altamente flexível e adaptável às suas necessidades de desenvolvimento, permitindo que você crie um 
ambiente de desenvolvimento personalizado e eficiente.
Módulo 2 – Baixando e Configurando nosso editor de códigos (5 / 10)
000 000
15
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As extensões no Visual Studio Code (VS Code) são módulos de software adicionais que você pode instalar para estender a funcionalidade 
padrão do editor.
Para instalar extensões no VS Code, você pode seguir estes passos:
1. Abra o VS Code.
2. Vá para a seção "Extensões" no menu lateral esquerdo (ícone de quebra-cabeça).
3. Pesquise a extensão desejada na barra de pesquisa.
4. Clique em "Instalar" na extensão que deseja adicionar.
5. Depois de instalada, você pode configurar e usar a extensão conforme necessário.
As extensões tornam o VS Code altamente flexível e adaptável às suas necessidades de desenvolvimento, permitindo que você crie um 
ambiente de desenvolvimento personalizado e eficiente.
Extensões
• Auto Rename Tag: Esta extensão é útil ao trabalhar com HTML/XML. Ela permite que você renomeie uma tag de abertura e a tag de 
fechamento correspondente automaticamente, economizando tempo e evitando erros de digitação.Exemplo: Ao renomear a tag 
<div> para <section>, a extensão também renomeará automaticamente a tag de fechamento </div> para </section>.
Módulo2 – Baixando e Configurando nosso editor de códigos (6 / 10)
000 000
16
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Prettier: O Prettier é uma extensão de formatação de código que ajuda a manter seu 
código HTML, CSS e JavaScript bem formatado e consistente. Ele reformata 
automaticamente seu código de acordo com as convenções de estilo configuradas, 
facilitando a legibilidade e a colaboração em equipes.
• Color Highlight: Com esta extensão, os códigos de cores (por exemplo, #FF0000 para 
vermelho) no seu CSS ou HTML são realçados com a cor correspondente, permitindo 
uma rápida visualização das cores usadas em seu código.
• Live Server: O Live Server é uma extensão que cria um servidor web local diretamente 
do VS Code. Isso permite que você visualize e teste seu site ou aplicativo web em 
tempo real enquanto faz alterações no código, facilitando o desenvolvimento e a 
depuração. Basta clicar com o botão direito do mouse em um arquivo HTML e 
selecionar "Open with Live Server" para abrir o site no navegador. As alterações no 
código HTML são refletidas automaticamente no navegador sem a necessidade de 
atualizações manuais.
Módulo 2 – Baixando e Configurando nosso editor de códigos (7 / 10)
000 000
17
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• HTML CSS SUPPORT: Esta extensão aprimora o suporte do VS Code para HTML e CSS, 
fornecendo sugestões de código, realce de sintaxe e atalhos para facilitar a escrita e a 
edição de código HTML e CSS. Ao digitar um seletor CSS em uma regra de estilo dentro 
de uma tag HTML, a extensão oferece sugestões automáticas de classes e IDs 
existentes.
• Image Preview: Com essa extensão, você pode visualizar imagens diretamente no 
Visual Studio Code sem a necessidade de abrir um visualizador de imagens separado. 
Basta clicar com o botão direito do mouse em um arquivo de imagem e selecionar 
"Image Preview" para ver a imagem.
• One Monokai Theme: Esta é uma extensão de tema que altera a aparência do VS Code. 
O "One Monokai Theme" aplica um esquema de cores específico ao VS Code, 
proporcionando uma experiência de desenvolvimento visualmente agradável.
Módulo 2 – Baixando e Configurando nosso editor de códigos (8 / 10)
000 000
18
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos precisar modificar algumas configurações das extensões e para isso 
clicaremos no ícone de engrenagem:
Vamos perquisar por Default for e adicionar o Prettier como formatação padrão do nosso VS Code.
A configuração padrão do Prettier envolve as opções de 
formatação que são aplicadas automaticamente quando você 
executa o Prettier em seu código sem personalizar essas opções. 
As configurações padrão incluem coisas como a quantidade de 
indentação, estilo de quebra de linha e estilo de citação.
Módulo 2 – Baixando e Configurando nosso editor de códigos (9 / 10)
000 000
19
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima configuração é a format on save, Essa opção permite que o editor formate automaticamente o código no 
arquivo atual sempre que você o salva:
Auto on save:
Nas configurações padrão do VS Code, a ação "Salvar" ocorre automaticamente quando você:
- Altera o foco para outra janela ou aplicativo, ou seja, quando você muda para outra janela ou programa fora do VS Code.
- Fecha o arquivo ou o editor no VS Code.
Módulo 2 – Baixando e Configurando nosso editor de códigos (10 / 10)
000 000
20
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tab size (tamanho de tabulação) refere-se ao número de espaços em branco que uma tecla "Tab" representa em um 
editor de código. Isso afeta a quantidade de espaço que é inserida quando você pressiona a tecla "Tab" ou quando o editor 
de código converte uma tabulação em espaços em branco.
A configuração do "tab size" é importante porque afeta a formatação e a legibilidade do seu código, bem como a 
consistência entre diferentes desenvolvedores que trabalham no mesmo projeto. A maioria dos editores de código 
modernos, incluindo o Visual Studio Code (VS Code), permite que você configure o tamanho da tabulação de acordo com 
suas preferências.
Por padrão, o tamanho de tabulação no VS Code é geralmente definido como 4 espaços, mas você pode personalizá-lo
Módulo 2 – 2 Dicas para todo programador (1 / 7)
000 000
21
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Fazer pesquisas no Google é uma prática essencial para programadores, pois os ajuda a acessar informações atualizadas, 
resolver problemas de maneira eficiente, aprender continuamente e se adaptar a um campo em constante evolução. Em vez
de tentar memorizar tudo, os programadores são incentivados a desenvolver habilidades de pesquisa e a aproveitar os recursos
online para se tornarem programadores mais eficazes e bem-sucedidos.
Fazer pesquisas no Google e não depender da memorização absoluta de todas as informações é uma prática importante e 
benéfica para os programadores por várias razões:
• Volume de Informações: A área da programação é vasta e está em constante evolução. Seria impossível memorizar todas
as linguagens de programação, bibliotecas, frameworks, comandos e técnicas disponíveis. Usar o Google permite acessar
rapidamente informações atualizadas.
• Eficiência: Em vez de gastar tempo tentando lembrar detalhes específicos ou sintaxes complexas, os programadores
podem usar o Google para obter respostas rápidas e continuar trabalhando de forma mais eficiente.
• Resolução de Problemas: A capacidade de pesquisa é uma habilidade valiosa na solução de problemas. Programadores
frequentemente enfrentam desafios complexos que exigem a busca de soluções online, aprendizado com a experiência de 
outros desenvolvedores e adaptação a problemas únicos.
Módulo 2 – 2 Dicas para todo programador (2 / 7)
000 000
22
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Aprendizado Contínuo: A programação é uma disciplina que requer aprendizado contínuo. Os programadores estão
constantemente explorando novas tecnologias e abordagens. A pesquisa online facilita a aprendizagem de novos conceitos e 
técnicas.
• Compartilhamento de Conhecimento: O compartilhamento de informações na comunidade de desenvolvedores é fundamental. Ao 
usar o Google e participar de fóruns, grupos de discussão e comunidades online, os programadores contribuem para um ecossistema
de compartilhamento de conhecimento.
• Redução de Erros: Ao verificar informações e sintaxes online, os programadores podem reduzir erros em seus códigos. Isso ajuda a 
manter a qualidade do código e a evitar problemas que podem surgir devido a erros humanos.
• Adaptação às Mudanças: A tecnologia muda rapidamente. O que era verdade hoje pode não ser verdade amanhã. Usar o Google 
permite que os programadores se adaptem às mudanças e adotem as melhores práticas mais recentes.
• Aprimoramento da Criatividade: Livres da necessidade de memorizar detalhes técnicos, os programadores podem se concentrar
mais na solução de problemas criativos e na inovação em seus projetos.
Módulo 2 – 2 Dicas para todo programador (3 / 7)
000 000
23
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Boas práticas para criar perguntas eficazes em pesquisas no Google em programação HTML e CSS:
1. Seja específico: Torne a pergunta precisa e específica.
2. Use termos-chave: Inclua palavras-chave relevantes em sua pergunta.
3. Use palavras de ação: Comece com palavras como "como" ou "o que é" para indicar que você está procurando uma explicação ou
solução.
4. Seja claro e conciso: Mantenha a pergunta simples e direta.
5. Use aspas para pesquisa exata: Se você procura uma frase específica, coloque-a entre aspas.
6. Evite perguntas genéricas: Evite perguntas amplas e vagas.
7. Revise os resultados: Ajuste sua pergunta com base nos resultados da pesquisa.
8. Use fontes confiáveis: Prefira fontes confiáveis, como documentação oficial e fóruns respeitados.
9. Seja paciente e aprenda com exemplos: Às vezes, encontrar a resposta certa leva tempo. Compreenda exemplos e raciocíniospor
trás das soluções encontradas.
10. Pergunte em Inglês (se souber): Se você tem conhecimento em inglês, considere fazer suas perguntas em inglês ao usar o Google. 
Muitos recursos, tutoriais e documentações de alta qualidade estão disponíveis em inglês, o que pode ampliar seu acesso a 
informações úteis e soluções. Além disso, ajuda a se comunicar com a ampla comunidade global de desenvolvedores que 
compartilha informações em inglês.
Módulo 2 – 2 Dicas para todo programador (4 / 7)
000 000
24
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Pesquisar através de documentações CSS (Cascading Style Sheets) e HTML (Hypertext Markup Language) é fundamental para 
programadores por várias razões importantes:
• Precisão e Conformidade: As documentações são fontes oficiais e confiáveis de informações sobre as linguagens CSS e HTML. Ao 
usá-las, você garante que seu código siga as melhores práticas e padrões definidos. Isso ajuda a evitar erros e problemas de 
compatibilidade em diferentes navegadores.
• Acesso a Recursos: As documentações contêm uma vasta quantidade de informações sobre propriedades, elementos, atributos e 
valores disponíveis em CSS e HTML. Isso significa que você pode descobrir recursos e funcionalidades que talvez não conhecesse de 
outra forma, permitindo que você crie páginas web mais ricas e interativas.
• Exemplos e Tutoriais: As documentações geralmente incluem exemplos de uso de propriedades e elementos, juntamente com 
descrições detalhadas. Isso é especialmente útil para aprender como aplicar estilos específicos ou criar elementos complexos em seu
código.
• Evolução das Tecnologias: As linguagens HTML e CSS estão em constante evolução. As documentações são atualizadas
regularmente para refletir as últimas mudanças e adições às linguagens. Ao consultá-las, você pode estar ciente das novidades e 
adotar as práticas mais recentes.
• Resolução de Problemas: Quando você enfrenta um problema ou desafio específico em seu código, 
as documentações podem ser uma fonte valiosa para entender como as coisas funcionam e encontrar soluções. Você pode procurar i
nformações sobre a propriedade ou elemento em questão e encontrar exemplos de uso e explicações detalhadas.
Módulo 2 – 2 Dicas para todo programador (5 / 7)
000 000
25
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Compatibilidade entre Navegadores: As documentações muitas vezes incluem informações sobre a compatibilidade das 
propriedades e elementos em diferentes navegadores. Isso ajuda os desenvolvedores a lidar com desafios de compatibilidade e a 
aplicar soluções específicas quando necessário.
• Aprendizado Contínuo: Para programadores, o aprendizado contínuo é essencial. As documentações proporcionam um ambiente
de aprendizado rico, onde você pode aprofundar seu conhecimento e habilidades em CSS e HTML, independentemente do seu nível
de experiência.
• Referência Rápida: As documentações são uma referência rápida e conveniente que você pode consultar sempre que tiver dúvidas
ou precisar de informações específicas. Elas estão disponíveis online e offline, o que facilita o acesso às informações quando
necessário.
As documentações oficiais do CSS e do HTML são mantidas por organizações de padronização e desenvolvimento web respeitadas. Aqui 
estão as principais fontes de documentação oficial para CSS e HTML:
Documentação Oficial do HTML (HTML5):
•W3C HTML Specification (Especificação HTML do W3C): O World Wide Web Consortium (W3C) é a organização de padronização da 
web e mantém a especificação oficial do HTML. Você pode encontrar a especificação HTML completa no site do W3C. Aqui está o link: 
W3C HTML Specification
Documentação Oficial do CSS (CSS3):
•W3C CSS Specification (Especificação CSS do W3C): O W3C também mantém a especificação oficial do CSS. Ela descreve todas as 
propriedades CSS, valores e comportamentos padrão. Você pode encontrar a especificação CSS completa no site do W3C. Aqui está o 
link: W3C CSS Specification
https://www.w3.org/TR/html52/
https://www.w3.org/Style/CSS/Overview.en.html
Módulo 2 – 2 Dicas para todo programador (6 / 7)
000 000
26
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Outras Referências Úteis:
• MDN Web Docs: Embora não seja a fonte oficial, o Mozilla Developer Network 
(MDN) fornece uma excelente documentação e tutoriais para HTML, CSS e muitas outras tecnologias web. 
É amplamente respeitado pela comunidade de desenvolvedores. Você pode encontrar a documentação do HTML aqui: MDN HTML 
Docs e a documentação do CSS aqui: MDN CSS Docs.
• W3Schools: O W3Schools é um recurso popular para aprender HTML, CSS 
e muitas outras linguagens web. Embora não seja a fonte oficial, 
é frequentemente usado por desenvolvedores iniciantes para aprender conceitos básicos e exemplos práticos. Aqui está o 
link: W3Schools HTML Tutorial e W3Schools CSS Tutorial.
Lembre-se de que a documentação oficial é a fonte mais confiável para informações técnicas detalhadas. No entanto, muitos
desenvolvedores também acham útil usar recursos como o mDN Web Docs, que oferece explicações detalhadas e exemplos práticos
em um formato acessível.
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/html/
https://www.w3schools.com/css/
Módulo 2 – 2 Dicas para todo programador (7 / 7)
000 000
27
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
"QUEBRAR A CABEÇA"
Enfrentar desafios complexos e resolver problemas difíceis é uma parte fundamental da jornada de aprendizado e crescimento de um 
programador. Isso significa dedicar tempo e esforço para compreender profundamente os conceitos e tecnologias envolvidos. Às vezes, 
pode ser uma tarefa árdua e exigente, mas os benefícios são inegáveis.
Ao "quebrar a cabeça" na programação, você está fortalecendo suas habilidades de resolução de problemas e desenvolvendo um 
conhecimento sólido. Cada desafio superado é uma oportunidade para aprender algo novo e aplicar esse conhecimento em projetos
futuros.
A resolução de problemas também promove a criatividade. Você precisa pensar de forma inovadora para encontrar soluções eficazes, 
muitas vezes fora dos padrões convencionais. Essa capacidade de pensar fora da caixa é um dos traços distintivos dos programadores
experientes.
Além disso, a sensação de satisfação pessoal ao superar um desafio difícil é incomparável. A confiança em suas habilidades cresce a 
cada obstáculo superado, e essa confiança é um ativo valioso em sua carreira de programador.
No mundo real da programação, você frequentemente enfrentará problemas complexos e situações desafiadoras. Portanto, a prática
constante de resolver desafios difíceis prepara você para essas circunstâncias. Isso o torna um profissional competente e confiável, capaz
de lidar com projetos complexos e contribuir de maneira significativa para a equipe e a empresa.
Em última análise, "quebrar a cabeça" na programação é uma parte intrínseca do processo de crescimento profissional e pessoal. É uma
jornada que recompensa aqueles que estão dispostos a enfrentar desafios, aprender com eles e continuar progredindo em direção à 
excelência na programação.
Módulo 3
INTRODUÇÃO AO HTML
INTRODUÇÃO AO HTML
INTRODUÇÃO AO HTML
28
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – O que é HTML? (1 / 1)
000 000
29
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
HTML, que significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem de marcação usada para 
criar a estrutura e o conteúdo básico de páginas da web. Em outras palavras, é a linguagem que os desenvolvedores web usam para 
criar os elementos fundamentais de uma página web, como títulos, parágrafos, imagens, links e formulários.
• Hypertext (Hipertexto): O termo "hipertexto" refere-se a um tipo de texto que contém links para outros documentos, recursos ou
partes do mesmo documento. No contexto da web, hipertexto permite a navegaçãonão linear, onde você pode clicar em links para 
acessar informações relacionadas em diferentes partes de um documento ou em documentos separados.
• Markup (Marcação): A "marcação" em HTML refere-se ao processo de adicionar códigos e tags especiais para definir a estrutura e o 
formato do conteúdo em um documento. As tags são usadas para identificar elementos específicos, como cabeçalhos, parágrafos, 
links, imagens, etc. A marcação define como o conteúdo deve ser apresentado e interligado.
• Language (Linguagem): HTML é uma linguagem de marcação que os desenvolvedores web usam para criar e estruturar
documentos na web. É uma linguagem específica para definir a estrutura e o conteúdo de páginas da web, permitindo que os
navegadores interpretem e exibam essas páginas de maneira consistente.
Em resumo, "HTML" - "Hypertext Markup Language" é uma linguagem que permite a criação de documentos hipertexto na web, onde o 
conteúdo é estruturado e formatado usando tags de marcação que definem como o conteúdo deve ser exibido e interligado por meio
de links. É a linguagem fundamental da web que possibilita a criação de páginas da internet com texto, imagens, links e outros 
elementos.
Módulo 3 – Estrutura de um documento HTML (1 / 8)
000 000
30
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Antes de começar a usar o editor VS Code, é altamente recomendável que 
você crie pastas organizadas para o curso. Você pode criar uma pasta para 
cada módulo ou aula específica. Isso ajudará você a manter um controle 
claro do conteúdo das aulas e a construir seus códigos de maneira 
organizada.
A organização em pastas é especialmente importante porque permite que 
você tire o máximo proveito da extensão Live Server no VS Code. Essa 
extensão permite visualizar sua página HTML no navegador em tempo real 
enquanto trabalha nela. Organizando seus arquivos em pastas separadas, 
você evita conflitos entre as páginas HTML e torna mais fácil usar o Live 
Server para visualização ao vivo.
Agora, abra o Visual Studio Code (VS Code) e, com o VS Code aberto, 
selecione a opção "Open Folder" para abrir a pasta que você criou 
anteriormente.
Módulo 3 – Estrutura de um documento HTML (2 / 8)
000 000
31
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos criar um arquivo HMTL chamado index.html no VS Code, e para criar você clicará no ícone a seguir, e nomeará de 
index e utilizará a extensão ".html" :
A extensão ".html" indica que um arquivo é um documento HTML (Hypertext Markup Language). Então um arquivo com 
a extensão ".html" contém código HTML que define a estrutura e o conteúdo de uma página da web.
O nome "index" é uma convenção que se desenvolveu ao longo do tempo para identificar o arquivo principal de um site, 
a página inicial. Essa prática facilita a organização, a previsibilidade e a compatibilidade na construção de sites e na 
configuração de servidores web. Embora não seja estritamente necessário nomear o arquivo principal dessa forma, é uma 
prática recomendada para manter a consistência e facilitar o gerenciamento de sites na web.
Módulo 3 – Estrutura de um documento HTML (3 / 8)
000 000
32
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O ponto de exclamação (!) seguido de um espaço + Enter ou Tab é frequentemente usado como um atalho para inserir 
um modelo básico de documento HTML, chamado de "esqueleto HTML" ou "boilerplate HTML".
Ao utilizar esse atalho, o editor pode automaticamente preencher o documento com o seguinte código:
Módulo 3 – Estrutura de um documento HTML (4 / 8)
000 000
33
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos analisar cada parte da estrutura inicial do nosso documento HTML, e o que cada parte significa:
<!DOCTYPE html>: Esta é uma declaração que informa ao navegador que o documento está escrito em HTML5, a versão mais 
recente da linguagem HTML.
<html lang="en">: Aqui, começamos o documento HTML. A tag <html> é o elemento raiz de uma página da web e contém todo o 
conteúdo da página. O atributo lang (idioma) é definido como "en" para indicar que o idioma da página é o inglês (English). Você 
pode substituir "en" pelo código de idioma apropriado para sua página.
<head>: Dentro da tag <html>, temos a tag <head>. A seção do cabeçalho (<head>) é usada para incluir informações sobre o 
documento que não são diretamente visíveis na página, são as configurações da nossa página. Aqui estão as partes dentro do 
<head>:
• <meta charset="UTF-8" />: Essa meta tag define o conjunto de caracteres usado no documento como UTF-8, que é um padrão 
amplamente aceito para codificar caracteres em várias línguas.
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Esta meta tag é comumente usada para tornar 
as páginas da web responsivas. Ela define a largura da viewport (a área visível da página) como igual à largura do dispositivo e 
define a escala inicial para 1.0.
• <meta http-equiv="X-UA-Compatible" content="ie=edge" />: Esta meta tag é usada para configurar o modo de 
compatibilidade do Internet Explorer. Nesse caso, está definida para "ie=edge", o que indica que o documento deve ser exibido 
no modo de edge (borda) do IE, que é o modo mais recente e compatível.
• <title>Document</title>: A tag <title> define o título da página, que é exibido na barra de título do navegador ou na guia da 
página.
<body></body>: Aqui é onde você coloca o conteúdo visível da página, como texto, imagens, links e outros elementos. O conteúdo 
que você deseja que os visitantes vejam quando acessam sua página deve ser colocado entre as tags <body>...</body>.
Módulo 3 – Estrutura de um documento HTML (5 / 8)
000 000
34
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma tag em HTML é uma marcação usada para definir elementos e estruturar o conteúdo de uma página da web. A 
sintaxe básica de uma tag HTML é a seguinte:
• <NomeDaTag>: É o nome da tag que define o elemento. Exemplos comuns incluem <p> para parágrafos, <a> para links 
e <img> para imagens.
• Aqui vai o conteúdo da tag: É o conteúdo que está contido dentro da tag e pode variar dependendo do tipo de tag. 
Por exemplo, em uma tag <p>, o conteúdo seria um parágrafo de texto, enquanto em uma tag <a>, o conteúdo seria o 
texto do link.
• </NomeDaTag>: É a tag de fechamento que indica o término do elemento. Geralmente, os elementos HTML são 
abertos com uma tag de abertura e fechados com uma tag de fechamento correspondente.
Atributos em HTML são informações adicionais que você pode incluir em uma tag para fornecer detalhes específicos 
sobre como um elemento deve se comportar ou ser exibido. Os atributos geralmente são especificados na forma de pares 
chave-valor e são colocados dentro da tag, com o formato:
Módulo 3 – Estrutura de um documento HTML (6 / 8)
000 000
35
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
DevTools
DevTools (F12) é um conjunto de ferramentas de desenvolvimento integradas aos navegadores que permite aos 
desenvolvedores inspecionar, depurar e otimizar páginas da web em tempo real. Pressionar a tecla F12 ou a tecla "F12" no 
teclado do seu computador em um navegador da web abre a ferramenta de desenvolvedor ou a inspeção de elementos. 
Esta é uma ferramenta poderosa que permite aos desenvolvedores e usuários examinarem o código-fonte, os estilos, os 
recursos da página e depurar problemas em uma página da web. O processo para abrir a inspeção de elementos pode 
variar ligeiramente dependendo do navegador que você está usando, mas geralmente é semelhante em todos os 
principais navegadores.
Depois de abrir a inspeção de elementos, você verá uma janela ou painel que permite inspecionar o código-fonte HTML, 
os estilos CSS, os recursos da página, depurar JavaScript e muito mais. Você pode clicar nos elementos na página para ver 
seu código-fonte, estilos e propriedades.
Módulo 3 – Estrutura de um documento HTML (7 / 8)
000 000
36
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos clicar na funcionalidade "Go Live" no Visual StudioCode (VS Code), que é habilitada pela extensão "Live Server". 
Ela permite transformar seu ambiente de desenvolvimento em um servidor web local temporário. Dessa maneira, você 
poderá ver os arquivos do seu projeto diretamente no navegador, possibilitando a visualização e interação com sua 
página da web em tempo real, sem a necessidade de configurar um servidor web externo.
Módulo 3 – Estrutura de um documento HTML (8 / 8)
000 000
37
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos criar a nossa primeira página web, e utilizaremos uma tag <h1> e a <p>.
A tag <h1> em HTML é usada para criar um cabeçalho de nível 1 em uma página da web. Esse cabeçalho é geralmente 
usado para o título principal ou o cabeçalho mais importante em uma página, e normalmente é exibido com uma 
formatação de texto maior e mais enfatizado do que o restante do conteúdo.
A tag <p> em HTML é usada para definir um parágrafo de texto em uma página da web. Ela é uma das tags mais básicas 
e comuns em HTML e é usada para organizar e estruturar o conteúdo textual de uma página.
Módulo 3 – Elementos de texto (1 / 10)
000 000
38
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
HEADINGS
Os cabeçalhos (headings) em HTML são elementos usados para estruturar o conteúdo de uma página da web, 
fornecendo títulos e sub-títulos que ajudam a organizar e hierarquizar o texto. Os cabeçalhos são representados pelas 
tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, onde <h1> é o mais importante e <h6> é o menos importante. Aqui estão as 
regras e diretrizes para o uso correto de cabeçalhos em HTML:
• Hierarquia: Os cabeçalhos devem ser usados em uma ordem hierárquica, onde <h1> é o nível mais alto de título e <h6> 
é o nível mais baixo. Isso significa que você não deve pular níveis; por exemplo, não deve usar um <h3> diretamente 
após um <h1>, a menos que haja um contexto muito específico que justifique isso.
• Semântica: Os cabeçalhos devem ser usados de maneira semântica, ou seja, eles devem refletir a estrutura e o 
significado do conteúdo. O <h1> deve ser usado para o título principal da página, o <h2> para os títulos de seções 
importantes, e assim por diante.
• Único <h1>: Cada página deve ter um e apenas um <h1> que representa o título principal da página. O <h1> geralmente 
é o título da página ou o nome do artigo.
• Subtítulos: Use os cabeçalhos <h2>, <h3>, <h4>, <h5> e <h6> para criar uma hierarquia de subtítulos que dividem o 
conteúdo em seções menores. Cada nível subsequente indica uma subseção mais detalhada da anterior.
• Estilo: O estilo (como fonte, cor e tamanho) dos cabeçalhos pode ser controlado por meio de CSS (Cascading Style 
Sheets). Evite usar tags de estilo inline, como <h1 style="font-size: 24px;">, sempre que possível, e use CSS externo ou 
interno para estilizar os cabeçalhos de maneira consistente em toda a sua página ou site.
Atalhos VS Code
O atalho "Copiar linha para cima" é 
Shift + Alt + ↑, e ele duplica a linha 
atual (ou linhas selecionadas) 
acima do cursor. Isso é útil para 
criar cópias de linhas ou blocos de 
código.
O atalho "Mover linha para cima" é 
Alt + ↑, e ele move a linha atual (ou 
linhas selecionadas) para cima, 
acima do cursor. É útil para 
reorganizar o código alterando a 
ordem das linhas.
000 000
39
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Elementos de texto (2 / 10)
Módulo 3 – Elementos de texto (3 / 10)
000 000
40
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos aplicar esses elementos dentro do nosso arquivo index.html. Para isso, vamos alterar a tag <title> para 
"Elementos de Texto com a Hashtag" e dentro do elemento <body> vamos adicionar os elementos de headings e um 
elemento <p>, que é usado para criar parágrafos de texto em uma página da web.
Módulo 3 – Elementos de texto (4 / 10)
000 000
41
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Além das diretrizes básicas de hierarquia de cabeçalhos que mencionei anteriormente, é importante entender como aplicar a 
hierarquia de títulos e subtítulos de maneira eficaz em páginas da web. Aqui estão algumas considerações adicionais sobre a 
hierarquia de subtítulos:
• Consistência: A consistência na aplicação da hierarquia de cabeçalhos é fundamental. Isso significa que você deve seguir um 
padrão claro e consistente ao usar os diferentes níveis de cabeçalhos em sua página. Por exemplo, se você usar um <h2> para os 
subtítulos de seções, mantenha esse padrão em todo o site.
• Clareza: Os cabeçalhos e subtítulos devem ser escolhidos de forma a tornar o conteúdo claro e compreensível para os leitores. Eles 
devem refletir a estrutura lógica do conteúdo e ajudar os usuários a navegarem e entenderem o que está na página.
• Contexto: Lembre-se de que os cabeçalhos e subtítulos devem fazer sentido no contexto do conteúdo. Eles devem resumir ou 
descrever o que os leitores encontrarão na seção que segue o cabeçalho. Evite usar cabeçalhos que não estão relacionados ao 
conteúdo ou que não têm um propósito claro.
• Uso Responsivo: Considere como sua hierarquia de cabeçalhos se comporta em dispositivos móveis. Às vezes, é necessário ajustar 
o tamanho e o estilo dos cabeçalhos para garantir que eles ainda sejam legíveis em telas menores.
• Navegação: A hierarquia de cabeçalhos também desempenha um papel importante na navegação do site. Muitas vezes, os 
navegadores e mecanismos de busca usam os cabeçalhos para criar uma tabela de conteúdo ou uma lista de links que ajudam os 
usuários a navegar rapidamente por uma página.
• SEO (Search Engine Optimization): O uso apropriado de cabeçalhos e subtítulos pode melhorar a otimização de mecanismos de 
busca de uma página. Os mecanismos de busca tendem a dar mais peso aos cabeçalhos, portanto, escolher títulos e subtítulos 
relevantes e descritivos pode beneficiar o SEO do seu site.
Módulo 3 – Elementos de texto (5 / 10)
000 000
42
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <h3> é geralmente usado para representar títulos de seções ou subseções que são menos importantes, então vamos aplicar logo 
abaixo do elemento <h2> e cada elemento terá um <p> com conteúdo.
Módulo 3 – Elementos de texto (6 / 10)
000 000
43
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <h4> é útil quando você tem seções ou subseções de um conteúdo que precisam ser organizadas e diferenciadas 
hierarquicamente, mas que não são tão importantes quanto os títulos de níveis mais altos. Então vamos criar esse elemento após o 
primeiro elemento <h3>.
Módulo 3 – Elementos de texto (7 / 10)
000 000
44
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os elementos <h5> e <h6> em HTML são usados para criar cabeçalhos de nível 5 e 6, respectivamente, em uma página da web. 
No entanto, esses níveis de cabeçalho são geralmente usados com menos frequência em comparação com os níveis de 
cabeçalho mais altos, como <h1>, <h2>, <h3>, e até mesmo <h4>. A frequência de uso dos elementos <h5> e <h6> depende da 
estrutura e da complexidade do conteúdo da página.
Aqui estão algumas diretrizes gerais sobre o uso de <h5> e <h6>:
• Uso Raro: Os <h5> e <h6> são normalmente usados raramente em uma página da web. Eles representam níveis de 
importância relativamente baixa em comparação com os títulos de níveis mais altos e são usados para subdivisões muito 
específicas ou detalhes menos relevantes.
• Organização de Detalhes: Os <h5> e <h6> podem ser usados para organizar detalhes dentro de seções ou subseções. Por 
exemplo, se você estiver escrevendo um artigo acadêmico ou técnico com muitos subdetalhes, pode usar esses níveis de 
cabeçalho para hierarquizar essas informações.
• Maior Profundidade: À medida que você avança para níveis de cabeçalho mais baixos, a profundidade da hierarquia 
aumenta. Isso significa que o <h6> é usado para subdivisões dentro das subdivisões do <h5>.
Módulo 3 – Elementos de texto (8 / 10)
000 000
45
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O elemento <span> em HTML é uma tag genérica usadapara aplicar estilos ou manipular partes específicas do texto dentro de um 
bloco de texto maior, sem afetar o layout geral do documento. Ele não impõe uma quebra de linha antes ou depois do conteúdo 
marcado, tornando-o ideal para aplicar formatação ou comportamento a partes específicas do texto.
O <span> não adiciona significado semântico ao conteúdo; ele é usado principalmente para fins de formatação e estilo. Portanto, é 
importante usá-lo com moderação e em conformidade com as diretrizes de acessibilidade.
Então nesse momento iremos aplicar esses elementos no nosso index.html:
Módulo 3 – Elementos de texto (9 / 10)
000 000
46
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A diferença mais notável é que o <p> é usado para agrupar parágrafos completos de texto, enquanto o <span> é usado para 
estilizar ou manipular partes específicas de texto dentro de um bloco de texto maior. Em termos de comportamento padrão, o <p> 
introduz espaços em branco adicionais para separar parágrafos, enquanto o <span> não adiciona espaços em branco extras e não 
cria quebras de linha.
A diferença na página será mais perceptível quando você usar o <p> para criar parágrafos, pois ele adicionará quebras de linha 
entre eles, tornando o conteúdo mais estruturado. O <span>, por outro lado, é mais útil para personalizar partes específicas do 
texto dentro de um parágrafo ou bloco de texto maior, sem quebrar o fluxo do texto. Portanto, a diferença visual pode ser sutil, 
dependendo de como são usados e estilizados.
Módulo 3 – Elementos de texto (10 / 10)
000 000
47
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <span> também pode funcionar como uma "caixa" invisível que envolve e isola a parte do texto que você deseja tratar de 
maneira diferente, seja para aplicar estilos ou para manipulação específica no código ou no layout da página. É uma forma de 
segmentar partes específicas do conteúdo dentro de elementos de bloco, como parágrafos, para aplicar personalizações ou 
comportamentos específicos apenas a essas partes.
Módulo 3 – Ênfase, Importância e Formatação de textos (1 / 7)
000 000
48
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma característica notável dos cabeçalhos (headings) é que eles já vêm por padrão em negrito. Isso significa que, quando você 
usa uma tag de cabeçalho, como <h1>, <h2>, <h3>, <h4>, <h5>, ou <h6>, o texto contido dentro delas é exibido em negrito no 
navegador, sem a necessidade de aplicar estilos adicionais.
Mas você pode usar diversos elementos e técnicas para enfatizar, dar importância e formatar textos de maneira a tornar o 
conteúdo de outros elementos html. E vamos abordar esses conceitos nesse momento, recapitulando sobre o elemento <span>.
Lembrando que O elemento <span> é uma tag genérica usada para aplicar estilos ou manipular partes específicas do texto sem 
afetar o layout geral. Ele não possui uma formatação padrão, mas pode ser estilizado com CSS. Então ele é um elemento muito útil 
para formatar textos específicos. Mas se eu quisesse aplicar o estilo de negrito sem utilizar o CSS, isso seria possível?
Existem duas formas de aplicarmos o negrito utilizando elementos html (tags).
1. <b> (Bold):
• O elemento <b> é usado para aplicar formatação em negrito ao texto.
• Ele não implica uma forte ênfase semântica no conteúdo que está envolto, apenas indica que o texto deve ser exibido em 
negrito.
• O uso do <b> é principalmente estilístico e visual, e não transmite a ideia de que o texto seja necessariamente mais importante 
ou enfatizado do que o texto ao seu redor.
Módulo 3 – Ênfase, Importância e Formatação de textos (2 / 7)
000 000
49
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
2. <strong> (Strong Importance):
• O elemento <strong> é usado para indicar ênfase forte em um texto.
• Ele transmite uma ênfase semântica, significando que o texto dentro dele é de grande importância no contexto da página ou 
documento.
• Embora o <strong> também aplique formatação em negrito por padrão, sua principal função é indicar a importância do texto 
para leitores, mecanismos de busca e tecnologias assistivas.
Em resumo, enquanto o <b> é usado principalmente para fins de formatação visual em negrito, o <strong> é usado para indicar 
ênfase semântica e importância real do conteúdo. Portanto, ao escolher entre esses elementos, é importante considerar o 
significado que você deseja transmitir. O <strong> é geralmente preferido quando se deseja destacar a importância do texto, 
especialmente para acessibilidade e otimização de mecanismos de busca.
Módulo 3 – Ênfase, Importância e Formatação de textos (3 / 7)
000 000
50
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Podemos também utilizar outros dois elementos para formatar textos e aplicar o estilo de itálico neles:
1. <i> (Italics):
• O elemento <i> é usado para aplicar formatação em itálico ao texto.
• Ele não implica uma ênfase semântica no conteúdo que está envolto, apenas indica que o texto deve ser exibido em itálico.
• O uso do <i> é principalmente estilístico e visual, e não transmite a ideia de que o texto seja necessariamente mais importante ou 
enfatizado do que o texto ao seu redor.
2. <em> (Emphasis):
• O elemento <em> é usado para indicar ênfase ou destaque em um texto.
• Ele transmite uma ênfase semântica, significando que o texto dentro dele é enfatizado ou destacado no contexto da página ou 
documento.
• O <em> também aplica formatação em itálico por padrão, mas sua principal função é indicar a ênfase no texto para leitores, 
mecanismos de busca e tecnologias assistivas.
Módulo 3 – Ênfase, Importância e Formatação de textos (4 / 7)
000 000
51
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os elementos HTML <b>, <i>, <em> e <strong> são aplicados a texto dentro de outros elementos HTML para alterar a formatação 
ou a ênfase do texto.
Lembre-se de que a escolha entre esses elementos deve ser baseada na intenção semântica do texto que você deseja destacar ou 
enfatizar. O <em> e o <strong> são especialmente úteis quando você deseja transmitir ênfase ou importância semântica, enquanto 
o <b> e o <i> são mais usados para formatação visual em negrito e itálico.
Agora vamos conhecer outras tags que utilizamos para formatar textos dentro da nossa estrutura html.
A tag <code> em HTML é usada para representar um trecho de código, como código de programação ou marcação, dentro de um 
documento HTML. Ela preserva espaços em branco, tabulações e quebras de linha no código. Isso significa que o texto dentro de 
<code> é exibido exatamente como foi digitado, sem quebras automáticas de linha ou formatação automática.
Módulo 3 – Ênfase, Importância e Formatação de textos (5 / 7)
000 000
52
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <blockquote> é um elemento HTML usado para designar um bloco de texto que é uma citação de outra fonte. Quando você 
usa a tag <blockquote>, o navegador geralmente adiciona recuo ou outro estilo para destacar visualmente o texto citado. Ela é 
comumente usada em páginas da web para indicar que uma seção específica de texto é uma citação.
Lembrando que na criação de páginas da web, existem muitas tags que você pode usar para formatar e organizar texto. Não 
vamos cobrir todas elas aqui, pois algumas são pouco usadas. No entanto, não se preocupe, você sempre pode pesquisar por uma 
tag específica quando precisar dela. Isso torna a criação de páginas da web mais flexível e fácil de aprender à medida que você 
avança. Fique à vontade para explorar e descobrir as tags que melhor se adequam ao seu projeto!
Módulo 3 – Ênfase, Importância e Formatação de textos (6 / 7)
000 000
53
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <br> é usada em HTML para criar uma quebra de linha, o que significa que ela força o conteúdo seguinte a ser exibido em 
uma nova linha, sem criar um novo parágrafo. Esta tag é um exemplo de uma tag vazia, o que significa que não possui um 
elemento de fechamento correspondente. Em outraspalavras, você não precisa escrever </br>.
A diferença entre <br> e <br /> é principalmente uma questão de convenção e compatibilidade com diferentes versões de HTML. 
Ambas as formas são válidas em HTML5 e HTML4.
• <br>: Esta é a forma mais comum e amplamente aceita. É conhecida como uma "tag não fechada" ou "tag vazia". Ela funciona 
bem em todos os navegadores modernos.
• <br />: Esta forma é conhecida como uma "tag auto-fechada". Ela é mais comumente usada em XHTML e em XML, seguindo a 
sintaxe XML rigorosa, que exige que as tags sejam fechadas explicitamente com uma barra antes do símbolo >. Em HTML5, é 
aceita, mas não é estritamente necessária.
Módulo 3 – Ênfase, Importância e Formatação de textos (7 / 7)
000 000
54
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <hr> em HTML é usada para criar uma linha horizontal, geralmente para separar conteúdo em uma página da web. "HR" 
significa "horizontal rule" (regra horizontal) e é uma tag vazia, o que significa que não possui um elemento de fechamento.
A tag <sup> em HTML é usada para criar texto sobrescrito, o que significa que o texto dentro dessa tag é exibido acima da linha de 
texto normal. Isso é frequentemente usado para indicar expoentes em fórmulas matemáticas, abreviações ou notas de rodapé.
A tag <sub> em HTML é usada para criar texto subscrito, o que significa que o texto dentro dessa tag é exibido abaixo da linha de 
texto normal. Isso é frequentemente usado para representar fórmulas químicas, notas de rodapé, datas e outras informações em 
que o texto precisa ser exibido ligeiramente abaixo do texto principal.
Módulo 3 – Listas ordenadas e não ordenadas (1 / 4)
000 000
55
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Ao criar páginas da web, é fundamental apresentar informações de maneira organizada e estruturada. As listas em HTML são uma 
maneira eficaz de alcançar esse objetivo, permitindo que você agrupe e formate informações de maneira fácil de ler e entender. 
Existem dois tipos principais de listas em HTML: listas ordenadas e listas não ordenadas.
Listas Ordenadas (OL - Ordered Lists):
As listas ordenadas são usadas quando a ordem dos itens é importante e precisa ser mantida. Elas são frequentemente usadas 
para criar listas numeradas ou com marcadores em sequência.
A tag <li> em HTML é usada para definir um item de lista. Quando usada em uma lista ordenada (<ol>) a tag <li> é usada para 
definir cada item da lista e, por padrão, eles são automaticamente numerados em ordem crescente.
A tag <li> é uma tag de conteúdo de bloco, o que significa que ela cria um bloco de texto separado para cada item da lista.
Módulo 3 – Listas ordenadas e não ordenadas (2 / 4)
000 000
56
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para visualizarmos no navegador, vamos adicionar alguns itens à lista ordenada e verificar como ela é estruturada na nossa página 
da web.
Listas Não Ordenadas (UL - Unordered Lists):
As listas não ordenadas são usadas quando a ordem dos itens não é importante. Elas são frequentemente usadas para criar listas 
de itens que não têm uma sequência específica.
Quando usamos a tag <ul> para iniciar a lista não ordenada e a tag <li> para cada item da lista. Os itens geralmente são marcados 
com pontos ou círculos, mas a aparência exata pode variar de acordo com o estilo da página.
Nesse exemplo, usamos a tag <ol> para iniciar a lista ordenada e 
também a tag <li> para cada item da lista. Os itens são 
automaticamente numerados em ordem crescente, mas você pode 
personalizar o tipo de marcação (números, letras, algarismos romanos) 
usando atributos específicos.
Ambos os tipos de listas, ordenadas e não ordenadas, desempenham um papel importante na 
criação de páginas da web bem estruturadas. Ao escolher entre eles, considere se a ordem dos 
itens é relevante para a compreensão do conteúdo. Se a ordem for importante, use uma lista 
ordenada; caso contrário, opte por uma lista não ordenada. Essas ferramentas simples tornam a 
organização e apresentação de informações em uma página da web mais claras e acessíveis aos 
usuários.
Módulo 3 – Listas ordenadas e não ordenadas (3 / 4)
000 000
57
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Listas de Descrição (<dl> - Description Lists):
As listas de descrição em HTML são usadas para criar listas de termos e suas descrições associadas. Isso é especialmente útil 
quando você deseja fornecer informações detalhadas sobre vários itens ou conceitos em uma página da web.
Tag <dl> (Description List):
• A tag <dl> é usada para iniciar uma lista de descrição.
• Ela envolve todo o conjunto de termos e suas descrições associadas.
•Tag <dt> (Description Term):
•A tag <dt> é usada para definir um termo ou título na lista de descrição.
•Ela deve ser colocada dentro da tag <dl>.
•Cada termo é frequentemente estilizado de maneira específica para indicar que é o termo associado a uma descrição.
Tag <dd> (Description Description):
• A tag <dd> é usada para fornecer a descrição associada ao termo definido pela tag <dt>.
• Ela deve ser colocada dentro da tag <dl>.
• A descrição é geralmente exibida após o termo e pode ser estilizada de forma diferente, como texto normal.
Módulo 3 – Listas ordenadas e não ordenadas (4 / 4)
000 000
58
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As listas de descrição em HTML são uma maneira semântica e organizada de apresentar informações que exigem a 
correspondência entre termos e suas descrições. Elas são especialmente úteis quando se deseja criar conteúdo educacional, 
explicativo ou técnico. Cada par de <dt> e <dd> está associado a um único termo e sua descrição, e você pode ter quantos pares 
desejar em uma lista de descrição.
Módulo 3 – Hiperlinks (1 / 12)
000 000
59
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Hiperlinks, também conhecidos como links, são elementos fundamentais em HTML que permitem que você crie conexões entre 
páginas da web, recursos, documentos e outros tipos de conteúdo na internet. Eles permitem que os usuários naveguem de uma 
página para outra, cliquem em imagens ou texto para acessar informações adicionais e explorem a web de forma interativa.
Hiperlinks podem ser divididos em dois tipos principais com base em seu destino:
• Links Internos: São hiperlinks que apontam para recursos dentro do mesmo site ou domínio. Eles são frequentemente usados 
para navegação interna, como links para outras páginas do mesmo site.
• Links Externos: São hiperlinks que apontam para recursos em outros sites ou domínios. Eles são usados para direcionar os 
usuários para recursos externos à página atual.
Ambos os tipos de hiperlinks desempenham um papel vital na criação de sites interativos e na conectividade da web como a 
conhecemos. Eles são a espinha dorsal da navegação na web, permitindo que os usuários explorem uma ampla variedade de 
informações e recursos online.
Módulo 3 – Hiperlinks (2 / 12)
000 000
60
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A criação de um hiperlink em HTML envolve o uso da tag <a> (anchor) e do atributo href (hiperlink reference).
Tag <a> (Anchor):
• A tag <a> é usada para criar hiperlinks em HTML.
• Ela envolve o conteúdo que deve ser clicável (geralmente texto, imagens ou outros elementos).
• A tag <a> possui o atributo href, que especifica o destino do hiperlink, ou seja, para onde o usuário será levado quando clicar no 
link.
Atributo href (Hiperlink Reference):
• O atributo href é usado para definir o URL (Uniform Resource Locator) ou o caminho para o recurso vinculado.
• Pode ser um URL absoluto (começando com "http://" ou "https://") ou um URL relativo (relativo à localização atual do documento 
HTML).
Texto ou Conteúdo do Hiperlink:
• O texto ou conteúdo dentro da tag <a> é o que os usuários veem como o link clicável.
• É importante escolher um texto descritivo que indique para onde o link levará ou qual é o seu propósito.
http://
https://
Atalho "Windows + 
V"No Windows, o atalho "Windows + 
V" abre o históricode área de 
transferência, permitindo acessar e 
colar itens copiados anteriormente, 
facilitando a seleção e colagem de 
itens copiados recentemente em 
um computador com Windows.
000 000
61
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Hiperlinks (3 / 12)
Módulo 3 – Hiperlinks (4 / 12)
000 000
62
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O atributo href (Hiperlink Reference) é um dos elementos mais essenciais e versáteis em HTML. Ele desempenha um papel crucial 
na criação de hiperlinks, que são os elementos que permitem a navegação na web, conectando páginas da web, recursos e 
documentos em toda a internet. O href é usado dentro da tag <a> (anchor) para especificar o destino de um hiperlink.
URL Absoluto vs. URL Relativo:
O atributo href pode conter um URL absoluto ou um URL relativo. Um URL absoluto é uma referência completa que inclui o 
esquema (como "http://" ou "https://"), o nome de domínio (por exemplo, "www.exemplo.com"), e o caminho completo para o 
recurso (por exemplo, "/pagina.html"). Já um URL relativo é uma referência que é relativa à localização atual do documento HTML. 
Por exemplo, se o documento HTML está em "https://www.exemplo.com/pasta/", um URL relativo como "../outrapasta/arquivo.html" 
apontaria para "https://www.exemplo.com/outrapasta/arquivo.html".
http://www.exemplo.com/
https://www.exemplo.com/pasta/
https://www.exemplo.com/outrapasta/arquivo.html
Módulo 3 – Hiperlinks (5 / 12)
000 000
63
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Alvos de Hiperlink:
Além de definir o destino do hiperlink, o href pode incluir um atributo target, que controla como o link é aberto:
▪ _blank: Abre o hiperlink em uma nova janela ou guia do navegador.
▪ _self: Abre o hiperlink na mesma janela ou guia em que o link foi clicado (comportamento padrão).
▪ _top: Abre o hiperlink na janela superior, substituindo todas as molduras ou frames existentes.
▪ _parent: Abre o hiperlink na janela pai, quando a página HTML está em um conjunto de frames ou iframes.
Cada um desses valores para o atributo target controla o comportamento de exibição do hiperlink, oferecendo flexibilidade na 
forma como as páginas da web são abertas e exibidas para os usuários.
Quando navegamos em um site ou lemos um artigo longo, muitas vezes nos deparamos com o desafio de encontrar 
informações específicas em uma página extensa. É aí que entra o atributo id em HTML, uma ferramenta poderosa que facilita a 
navegação interna e melhora a experiência do usuário.
Módulo 3 – Hiperlinks (6 / 12)
000 000
64
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O que é o atributo id?
O atributo id é um identificador exclusivo que pode ser atribuído a elementos HTML, como parágrafos, títulos, imagens ou 
qualquer outro elemento da página. Esse identificador único é como um "rótulo" que você cola em um elemento para identificá-lo 
de maneira única.
Por que usar o atributo id para navegar dentro de uma página?
• Facilita a Navegação: Quando você atribui um id a um elemento específico, como um título importante ou uma seção 
relevante, você cria um ponto de referência na página. Isso permite que os visitantes cliquem em links ou botões que 
direcionam para esse id, fazendo com que o navegador role automaticamente para o elemento desejado. É como ter um guia 
interno que ajuda os usuários a encontrar rapidamente o que estão procurando.
• Melhora a Experiência do Usuário: A navegação interna proporcionada pelo id melhora a experiência do usuário, 
economizando tempo e esforço. Os visitantes podem pular diretamente para a seção de seu interesse, sem a necessidade de 
percorrer toda a página.
• Índices e Menus de Navegação: O id é frequentemente usado em índices, tabelas de conteúdo e menus de navegação interna. 
Isso permite que os visitantes acessem facilmente diferentes partes da página, tornando a estrutura do conteúdo mais acessível.
Módulo 3 – Hiperlinks (7 / 12)
000 000
65
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
LOREM IPSUM
Lorem Ipsum é um texto fictício e padrão da indústria de impressão e editoração. Ele é 
usado como espaço reservado para preencher o layout de um documento ou site antes 
que o conteúdo real seja inserido. O Lorem Ipsum tem sido usado desde o século XVI e é 
uma série de palavras e frases em latim aparentemente aleatórias, que não têm 
significado real. A ideia por trás do Lorem Ipsum é que ele se parece com texto real, mas 
não distrai o leitor com o conteúdo real enquanto o layout e o design estão sendo 
criados.
A aplicabilidade do Lorem Ipsum no HTML está relacionada ao desenvolvimento de sites 
e ao design gráfico. Aqui estão algumas maneiras como ele é usado:
Layout e Design: Ao criar um site ou documento, os designers geralmente usam o 
Lorem Ipsum para preencher áreas de texto e verificar como o layout ficará quando o 
conteúdo real for inserido. Isso ajuda a ajustar o design, como fontes, tamanhos de texto, 
espaçamento e alinhamento.
Teste de Funcionalidade: Em estágios iniciais de desenvolvimento de sites, o Lorem 
Ipsum pode ser usado para testar a funcionalidade do site antes que o conteúdo real 
esteja disponível. Isso permite verificar se links, menus e outros elementos interativos 
estão funcionando corretamente.
Apresentações e Protótipos: Em apresentações de design ou protótipos de sites, o 
Lorem Ipsum é usado para simular como o conteúdo será distribuído na página. Isso 
ajuda os clientes e partes interessadas a visualizar o design final.
Preenchimento de Espaço Reservado: Quando o conteúdo real ainda não está pronto, 
mas o layout precisa ser concluído, o Lorem Ipsum é usado para preencher o espaço 
reservado nos elementos HTML, como parágrafos, divs ou caixas de texto.
Módulo 3 – Hiperlinks (8 / 12)
000 000
66
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No Visual Studio Code, a combinação de teclas "Ctrl + Shift + P" é usada para abrir a paleta de comandos. Isso permite que 
você execute rapidamente comandos, extensões ou ações específicas no Visual Studio Code. Você pode digitar o nome do 
comando desejado na paleta de comandos e, em seguida, selecionar o comando relevante para executá-lo.
A paleta de comandos é uma ferramenta poderosa para acessar rapidamente recursos e funcionalidades no Visual Studio 
Code, especialmente quando você não deseja navegar pelos menus ou barra de ferramentas. É uma maneira eficiente de 
realizar tarefas e personalizar sua experiência de desenvolvimento no editor de código.
E pesquise por Emmet Wrap with Abbreviation:
A funcionalidade "Wrap with Abbreviation" (Envolva com Abreviação) no Emmet permite que você envolva rapidamente 
elementos HTML ou XML selecionados com uma abreviação especificada. É uma funcionalidade que economiza tempo e 
simplifica o processo de envolvimento de elementos no desenvolvimento web.
Módulo 3 – Hiperlinks (9 / 12)
000 000
67
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para usar o "Wrap with Abbreviation" no Emmet, você irá clicar no ícone de engrenagem "Configure Keybinding":
• Você pode criar uma associação de tecla personalizada (keybinding):
• Clique com o botão direito do mouse sobre ela e escolha "Add Keybinding" (Adicionar Associação de Tecla).
• Ou clique duas vezes no atalho que você deseje substituir.
Módulo 3 – Hiperlinks (10 / 12)
000 000
68
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Certifique-se de criar atalhos que ainda não estão em uso, pois o próprio VS 
Code indicará se a combinação de teclas que você está tentando criar já está 
atribuída a outra funcionalidade.
Após criado o seu atalho do "Wrap with Abbreviation" no Emmet:
1. Selecione o Conteúdo: Primeiro, selecione os elementos HTML que você deseja envolver com uma abreviação. Isso pode 
ser texto, tags ou qualquer parte do seu código.
2. Ative o Emmet: Assim que fizer a seleção, ative o Emmet usando o atalho de teclado que criou ou o padrão do VS Code. Isso 
abrirá a entrada de abreviação do Emmet.
3. Digite a Abreviação: Naentrada de abreviação do Emmet, digite a abreviação para a estrutura HTML desejada na qual você 
deseja envolver o conteúdo selecionado. Por exemplo, se você deseja envolver o conteúdo com uma tag <b>, você pode 
digitar b ou qualquer outra abreviação válida.
4. Pressione "Tab" ou "Enter": Após inserir a abreviação, basta pressionar a tecla "Tab" ou "Enter", e o Emmet envolverá o 
conteúdo selecionado com a estrutura HTML especificada. O resultado será gerado instantaneamente.
Módulo 3 – Hiperlinks (11 / 12)
000 000
69
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Deixar um link vazio com o atributo href definido como # é uma prática comum em HTML, e isso é feito por várias razões:
Comportamentos JavaScript: Às vezes, os desenvolvedores usam links com href="#" como marcadores ou gatilhos para 
comportamentos JavaScript específicos. Quando o usuário clica no link, um script JavaScript pode ser ativado para executar 
uma ação, como mostrar ou ocultar conteúdo, abrir um menu suspenso, ou realizar uma animação na página.
Manter o Comportamento Padrão: Quando você cria um link vazio com #, ele não leva o usuário a uma nova página ou 
recarrega a página atual. Isso é útil quando você deseja manter o comportamento padrão da página enquanto implementa 
interações adicionais por meio de JavaScript.
Espaço Reservado para Futuros Links: Às vezes, os desenvolvedores deixam links com # como espaços reservados para 
futuros links que podem ser adicionados posteriormente. Isso pode ser útil quando você está desenvolvendo um site e planeja 
adicionar links em um estágio posterior do projeto.
Acessibilidade: Ao adicionar um link com href="#", você fornece um elemento de foco para usuários que navegam na página 
usando tecnologias de assistência, como leitores de tela. Isso pode melhorar a acessibilidade da sua página.
É importante observar que, quando se usa um link vazio com #, é uma boa prática incluir comentários no código HTML 
explicando a finalidade do link, para que outros desenvolvedores entendam sua intenção e para que o código seja mais legível.
Módulo 3 – Hiperlinks (12 / 12)
000 000
70
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para praticarmos a criação de hiperlinks e a navegação entre páginas HTML, vamos criar uma nova página chamada 
'contato.html'. Em seguida, adicionaremos uma âncora que levará a um link para o nosso arquivo 'index.html'.
Vamos adicionar um link ao nosso arquivo index.html:
E com isso conseguiremos que esses elementos de âncora permitem a navegação entre diferentes páginas HTML. O usuário 
pode acessar facilmente as páginas "contato.html" ou "index.html" ao clicar nos links correspondentes. Cada link levará o 
usuário para a página especificada no atributo href.
Módulo 3 – Imagens e seus atributos no HTML (1 / 4)
000 000
71
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <img> em HTML é usada para incorporar imagens em uma página da web, e você pode especificar a origem (source) da 
imagem de duas maneiras:
Usando um arquivo dentro do projeto: Você pode carregar uma imagem que está localizada no mesmo diretório ou em um 
subdiretório do seu projeto HTML. Para fazer isso, você especifica o caminho relativo para o arquivo de imagem no atributo src 
(source) da tag <img>.
Nesse caso, "Logo Hashtag.jpg" é o nome do arquivo de imagem no mesmo diretório onde o arquivo HTML está localizado. 
Você pode usar caminhos relativos para acessar imagens em diferentes pastas do projeto, por exemplo: <img 
src="imagens/imagem.jpg" alt="Descrição da imagem">.
Usando um link externo (URL): Você também pode incorporar imagens que estão hospedadas em servidores da web ou em 
qualquer outro local online, fornecendo o URL da imagem no atributo src.
Nesse caso, a imagem é carregada diretamente do URL especificado. Isso é útil quando você deseja exibir imagens de fontes 
externas, como imagens de um site de terceiros.
Módulo 3 – Imagens e seus atributos no HTML (2 / 4)
000 000
72
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O atributo alt em HTML é usado com a tag <img> para fornecer um texto alternativo (alternative text) para uma imagem. Este 
texto alternativo é exibido quando a imagem não pode ser carregada pelo navegador ou quando um leitor de tela é usado por 
usuários com deficiência visual. Independentemente da origem da imagem, você deve fornecer um texto alternativo 
significativo usando o atributo alt para garantir a acessibilidade da sua página.
Certifique-se de que o valor do atributo alt descreva adequadamente o conteúdo ou o propósito da imagem, para que os 
usuários que não podem ver a imagem ainda entendam o que ela representa.
Aqui estão alguns pontos importantes sobre o atributo alt:
• Acessibilidade: O atributo alt é essencial para tornar uma página da web acessível a todos os usuários, incluindo aqueles 
com deficiência visual. Quando uma imagem não pode ser exibida, o texto alternativo fornece uma descrição da imagem 
para que os usuários saibam o que deveria estar lá.
• SEO (Search Engine Optimization): Os mecanismos de busca usam o texto alternativo para entender o conteúdo da 
imagem, o que pode afetar a classificação da página nos resultados de pesquisa. Portanto, é importante usar o alt de forma 
descritiva e relevante para a imagem.
• Exibição em Leitores de Tela: Leitores de tela, que são usados por pessoas cegas ou com deficiência visual, leem o texto 
alternativo em voz alta. Isso permite que esses usuários compreendam o conteúdo da imagem.
• Imagens Decorativas: Em casos de imagens puramente decorativas, que não têm um significado funcional na página, você 
pode usar alt="" (uma string vazia) para indicar que a imagem é decorativa e não requer uma descrição.
• Texto Descritivo: O texto alternativo deve ser uma descrição precisa do conteúdo da imagem. Tente fornecer informações 
relevantes que ajudem os usuários a entenderem o contexto da imagem. Evite usar "imagem" ou "foto" como texto 
alternativo, a menos que seja apropriado.
Módulo 3 – Imagens e seus atributos no HTML (3 / 4)
000 000
73
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <img> possui alguns atributos opcionais, como:
width (largura) e height (altura): Esses atributos permitem definir a largura e a altura da imagem em pixels. Eles são opcionais, 
mas úteis para controlar o tamanho da imagem na página.
Quando você define um valor apenas para um dos atributos width (largura) ou height (altura) em uma tag <img>, o navegador 
normalmente ajustará automaticamente o valor não especificado para manter a proporção original da imagem. Isso significa 
que a imagem será redimensionada de forma proporcional para que nem a largura nem a altura pareçam distorcidas.
Módulo 3 – Imagens e seus atributos no HTML (4 / 4)
000 000
74
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <figure> em HTML é usada para encapsular elementos que representam uma figura ou ilustração em um documento, 
como uma imagem, gráfico, diagrama, vídeo, entre outros. O elemento <figure> é frequentemente usado em conjunto com a 
tag <figcaption> para fornecer uma legenda ou descrição associada à figura.
• <figure>: Este elemento é usado para envolver a figura ou ilustração em questão. Pode conter qualquer elemento ou 
conteúdo multimídia que represente uma figura no contexto do documento. A tag <figure> é usada para criar um 
agrupamento semântico que indica que os elementos dentro dela estão relacionados como uma figura.
• <figcaption>: Este elemento é usado para fornecer uma legenda ou descrição para a figura encapsulada pela tag <figure>. A 
tag <figcaption> geralmente é colocada dentro da tag <figure>. A legenda ajuda a descrever ou explicar a figura, tornando-a 
mais compreensível para os leitores.
A tag <figure> envolve uma imagem com a descrição fornecida no atributo alt. A tag <figcaption> é usada para fornecer uma 
legenda explicativa para a imagem.
O uso dos elementos <figure> e <figcaption> ajuda a criar uma estrutura semântica para figurasem seu conteúdo, tornando-o 
mais acessível e compreensível para os leitores, além de melhorar a indexação de conteúdo por mecanismos de busca.
Módulo 3 – Ferramenta do Programador (1 / 2)
000 000
75
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A ferramenta do programador, também conhecida como DevTools ou Console do navegador, é uma poderosa ferramenta de 
desenvolvimento incorporada nos navegadores da web, como Google Chrome, Mozilla Firefox, Microsoft Edge e outros. Ela é 
usada por desenvolvedores web para depurar, testar e analisar páginas da web, elementos HTML, CSS e scripts JavaScript. A 
ferramenta do programador geralmente é acessada pressionando a tecla F12 ou usando o atalho de teclado Ctrl + Shift + I (ou 
Cmd + Option + I no macOS).
Ou você pode acessar através das configurações do navegador, como imagem abaixo:
Módulo 3 – Ferramenta do Programador (2 / 2)
000 000
76
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Aqui estão algumas das principais funcionalidades da ferramenta do programador:
• Console: A aba Console permite que você veja mensagens de erro, depure código 
JavaScript, execute comandos interativos e registre informações de depuração.
• Elements (Elementos): Esta aba permite inspecionar e modificar o HTML e o CSS 
de uma página em tempo real. Você pode selecionar elementos na página e ver 
suas propriedades, estilos e eventos associados.
• Network (Rede): A aba Network exibe todas as solicitações feitas pelo navegador 
ao carregar uma página, incluindo solicitações HTTP, recursos como imagens, 
scripts e arquivos CSS. Isso é útil para otimizar o desempenho da página.
• Sources (Fontes): Esta aba permite depurar código JavaScript. Você pode definir 
pontos de interrupção, inspecionar variáveis, rastrear a execução do código e até 
mesmo editar scripts em tempo real.
• Application (Aplicação): A aba Application fornece informações sobre cookies, 
armazenamento local, armazenamento de sessão e outras informações 
relacionadas à aplicação web.
• Emulação de Dispositivo: Permite simular diferentes dispositivos móveis e 
tamanhos de tela para verificar como uma página se comporta em dispositivos 
variados.
Módulo 3 – Desafio 1 – Apresentando o Desafio (1 / 3)
000 000
77
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Desafio de HTML: Crie uma Página de Anúncio de Smart TV
Parabéns, você chegou a um momento emocionante em nosso curso de HTML para 
iniciantes! Agora que exploramos conceitos e elementos fundamentais, é hora de 
aplicar tudo o que aprendemos na prática. Para isso, lançaremos o nosso primeiro 
desafio emocionante: a criação de uma página web que anuncia uma Smart TV.
Uma Oportunidade de Colocar em Prática Seus Conhecimentos
Este desafio não apenas testará suas habilidades recém-adquiridas, mas também o 
levará a um cenário real de desenvolvimento web. Você aprenderá a criar uma página 
atraente que não só informa, mas também cativa o público.
Elementos-Chave a Serem Abordados
Nesta tarefa, você usará elementos HTML essenciais, como títulos, listas e formatação 
de texto para criar uma página de anúncio convincente. Além disso, praticará a 
organização de conteúdo com seções bem definidas.
Módulo 3 – Desafio 1 – Apresentando o Desafio (2 / 3)
000 000
78
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesta aula você precisa fazer o download do arquivo que está em nossa plataforma. Feito o download, você terá um arquivo 
imagem-smart-tv.png que é a imagem que utilizará no seu site, e também as instruções dentro do arquivo desafio-1.txt, com 
todos os requisitos para montar a sua página.
Após a leitura, você irá criar um arquivo chamado desafio1.html e iniciar a estrutura do desafio. Lembre-se de utilizar a extensão 
Live Server para acompanhar o desenvolvimento do seu site no navegador e caso sinta dificuldades retorne as aulas ou tire suas 
dúvidas no suporte da plataforma. Mas lembre-se que é um momento de quebrar a cabeça e pesquisar.
Módulo 3 – Desafio 1 – Apresentando o Desafio (3 / 3)
000 000
79
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Destaque para Acessibilidade e Estilo
Não esqueceremos a importância da acessibilidade. Você garantirá que a imagem tenha um texto alternativo apropriado e que o 
conteúdo seja estruturado de forma clara para todos os visitantes.
• Conteúdo Estratégico para uma Venda Eficiente
Ao criar esta página, pense em como destacar as características importantes da Smart TV. Você ajudará os potenciais 
compradores a tomar decisões informadas.
• Um Espaço para a Criatividade
Embora tenhamos algumas diretrizes a seguir, lembre-se de que a criatividade é bem-vinda. Personalize a página, escolha a 
imagem e a marca da Smart TV, e dê seu toque especial ao texto.
• Compartilhe Seu Progresso e Aprendizado
Depois de concluir o desafio, compartilhe sua criação com seus colegas do curso. Não se esqueça de aproveitar a oportunidade 
para aprender uns com os outros e trocar ideias.
Este desafio não é apenas um teste de suas habilidades em HTML, mas também uma chance de demonstrar sua criatividade. 
Estou ansioso para ver o que você criará e como aplicará tudo o que aprendeu. Boa sorte e divirta-se construindo a página de 
anúncio da Smart TV!
Módulo 3 – Desafio 1 – Construindo o desafio do zero (1 / 7)
000 000
80
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar o Desafio criando o arquivo chamado desafio-1.html e iniciando um documento do tipo HTML. Você pode utilizar o 
atalho ( ! ) para construir a estrutura inicial do HTML e iremos adicionar a tag title e adicionaremos o título da nossa página.
Seguindo o passo a passo da instruções do arquivo desafio-1.txt, vamos adicionar a imagem e um título a nossa página, para isso 
vamos relembrar os conceitos os elementos que iremos utilizar:
• <figure>: Este elemento envolve a imagem da Smart TV e sua legenda, fornecendo uma estrutura semântica para conteúdo 
relacionado.
• <img src="imagem-smart-tv.png" alt="Smart TV" width="400px" />: Insere uma imagem com o atributo src especificando o 
caminho da imagem, o atributo alt fornece um texto alternativo (importante para acessibilidade) e o atributo width define a 
largura da imagem.
• <figcaption>Smart TV da marca XYZ</figcaption>: Aqui está a legenda da imagem.
• <h1>Smart TV 75" da marca XYZ</h1>: Cria o título principal da página.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (2 / 7)
000 000
81
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento teremos a estrutura do nosso desafio da seguinte maneira:
Agora está na hora de adicionarmos o link, utilizando a tag <a>, com o atributo href vazio, pois será um link que não encaminhará 
o usuário a outra lugar.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (3 / 7)
000 000
82
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos construir a próxima seção que é a seção de Preço. O título deve ser "Preço" e os textos da seção "R$ 4.999 ou 12xR$ 
416,58" e "Desconto de 10% no PIX", sendo que queremos dar importância ao texto "R$ 4.999" e apenas deixar em negrito o texto 
"Desconto de 10%".
E vamos criar uma separação horizontal entre a seção de preço e a de condições, utilizando a tag <hr />:
Módulo 3 – Desafio 1 – Construindo o desafio do zero (4 / 7)
000 000
83
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Analisando a estrutura de elementos do slide anterior, vamos relembrar os conceitos das tags 
utilizadas e como elas estão estruturando a nossa página web.
• <h2>Preço</h2>: Define o título da seção de preço.
• <p><strong>R$ 4.999</strong> ou 12xR$ 416,58</p>: Formata o preço em negrito com <strong>.
• <p><b>Desconto de 10%</b> no PIX</p>: Define o desconto de 10% em negrito com <b>.
• <hr />: Insere uma linha horizontal para separar as seções.
A próxima seção que iremos construir será a seção de Condições. Vamos criar os elementos para que 
essa seção tenha o título "Condições" e os textos "Parcelamento sem juros" e "Frete grátis", sendo 
que o"sem juros" deverá estar em itálico, utilizando a tag <i> e o "Frete grátis" deverá receber uma 
ênfase, que podemos utilizar a tag <em> para isso.
Entre as seções condições e de características também iremos utilizar a tag <hr /> para criar uma 
separação horizontal entre elas.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (5 / 7)
000 000
84
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A nossa última seção será a de Características. O título da seção é "Características" e nela teremos três sub-seções, são elas: "Inteligência 
Artificial & Smart", "Imagem" e "Conexões".
Em cada seção vamos colocar uma lista não ordenada com 4 itens em cada uma delas. Os itens das listas são esses (4 itens para cada sub-seção):
Alexa
Google Assistente
Game Optimizer
Configuração da família
4K UHD
Processador XYZ
HDR
HDMI 2.0
3 Entradas HDMI 2.0
2 Entradas USB
1 Bluetooth In/Out
1 Saída digital óptica
Módulo 3 – Desafio 1 – Construindo o desafio do zero (6 / 7)
000 000
85
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos entender os elementos utilizados para construir a seção de Características e o que cada parte está fazendo:
• <h2>Características</h2>: Aqui, estamos criando um título de nível 2, indicando que estamos começando uma nova seção na 
página, que se concentra nas características da Smart TV.
• <h3>Inteligência Artificial & Smart</h3>: Dentro da seção de características, usamos um título de nível 3 para criar uma 
subseção com o nome "Inteligência Artificial & Smart". Isso ajuda a organizar e estruturar as informações.
• <ul>: Abrimos uma lista não ordenada (<ul>) para listar as características da subseção "Inteligência Artificial & Smart". Listas não 
ordenadas são usadas quando você deseja apresentar itens sem uma ordem específica, como uma lista de recursos.
• <li>Alexa</li>: Usando o elemento <li>, listamos o primeiro item das características, que é "Alexa". Repetimos esse processo para 
listar os outros itens, como "Google Assistente", "Game Optimizer" e "Configuração da família".
• <h3>Imagem</h3>: Continuamos com a próxima subseção, "Imagem", usando novamente um título de nível 3.
• <ul>: Abrimos uma nova lista não ordenada para as características da subseção "Imagem". Aqui, listamos itens relacionados à 
qualidade da imagem, como "4K UHD", "Processador XYZ", "HDR" e "HDMI 2.0".
• <h3>Conexões</h3>: Finalmente, introduzimos a terceira subseção, "Conexões", com um título de nível 3.
• <ul>: Abrimos outra lista não ordenada para listar as características de conexões da Smart TV, que incluem "3 Entradas HDMI 
2.0", "2 Entradas USB", "1 Bluetooth In/Out" e "1 Saída digital óptica".
Essa estrutura de títulos de diferentes níveis (<h2>, <h3>) e listas não ordenadas (<ul>) ajuda a organizar as informações de forma 
hierárquica e legível, tornando a página mais clara para os visitantes. Cada subseção agrupa características relacionadas, o que 
facilita a leitura e compreensão do conteúdo.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (7 / 7)
000 000
86
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A estrutura final do nosso arquivo HTML e a interface visual final do nosso site terá essas estruturas:
Módulo 3 – Desafio 2 – Home da Hashtag Treinamentos (1 / 2)
000 000
87
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Desafio 2: Construindo a Home da Hashtag Treinamentos
Olá, caros alunos! Chegamos ao emocionante Desafio 2, no qual construiremos a página inicial (Home) do site da Hashtag 
Treinamentos (Hashtag Treinamentos | Cursos de Excel, VBA, Python e mais!). Este desafio é uma oportunidade empolgante para 
aplicar tudo o que você aprendeu até o momento no módulo de Introdução ao HTML. Vamos criar o esqueleto básico da página 
inicial, e à medida que avançamos nos módulos seguintes, aprimoraremos e adicionaremos recursos adicionais.
Quando e Como
Vamos concluir este desafio ao final do Módulo 6, quando já teremos explorado os conceitos mais avançados de HTML e CSS. Por 
enquanto, nosso objetivo é criar a estrutura básica da Home da Hashtag Treinamentos, utilizando apenas o conhecimento que 
adquirimos até este ponto. Se surgir a necessidade de incluir elementos que ainda não foram abordados em nossas aulas, 
simplesmente coloque um placeholder, como <p>VÍDEO</p>, para representar esses elementos que serão substituídos nas 
próximas etapas.
https://www.hashtagtreinamentos.com/
Módulo 3 – Desafio 2 – Home da Hashtag Treinamentos (2 / 2)
000 000
88
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O Gabarito
O resultado desse Desafio 2 será um site que reflete a Home da Hashtag Treinamentos usando apenas os conceitos que 
estudamos até agora. Se você precisar relembrar ou revisitar algum tópico, não hesite em voltar às aulas ou consultar o arquivo 
"elementos.txt" que fornecemos.
Divirta-se!
Lembre-se de que a programação e a criação de páginas web são uma jornada empolgante e criativa. Este desafio oferece a você 
a oportunidade de aplicar seus conhecimentos, desenvolver suas habilidades e criar algo incrível. Divirta-se ao construir a Home 
da Hashtag Treinamentos e esteja preparado para aprimorá-la à medida que avançamos em nosso curso. Se tiver alguma dúvida, 
nossa comunidade está aqui para ajudar. Boa sorte e aproveite!
Faça os downloads dor arquivos para instruções e links necessários para construir a página!
Módulo 3 – Desafio 2 – Criando o Cabeçalho (1 / 7)
000 000
89
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O que é a Seção de Cabeçalho?
Em HTML, a seção de cabeçalho, é uma parte essencial de uma página da web que engloba elementos como o título da página, 
logotipos, menus de navegação, informações de contato e outras informações que geralmente aparecem na parte superior de 
uma página.
Elementos Comuns na Seção de Cabeçalho:
• Título da Página: O título da página, que aparece na barra de título do navegador, ajuda os visitantes a entender o conteúdo 
da página.
• Logotipo: Empresas e sites frequentemente exibem seus logotipos no cabeçalho, reforçando sua marca.
• Navegação: Menus de navegação são colocados no cabeçalho para facilitar a experiência do usuário na exploração do site.
• Informações de Contato: Algumas páginas incluem detalhes de contato no cabeçalho, como números de telefone ou links 
para formulários de contato.
• Redes Sociais: Ícones ou links para redes sociais permitem que os visitantes compartilhem e se conectem com a organização.
Por que a Seção de Cabeçalho é Importante?
A seção de cabeçalho desempenha um papel crítico na usabilidade e identidade visual de um site. Ela fornece aos visitantes 
informações essenciais e cria uma base para uma experiência de usuário consistente. Além disso, é comum que o cabeçalho seja 
compartilhado em várias páginas, mantendo a coesão visual e de navegação em todo o site.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (2 / 7)
000 000
90
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar criando um arquivo HTML chamado home-hashtag.html. Dentro desse arquivo teremos toda a estrutura da nossa 
página. Lembrando que para iniciarmos um documento html, podemos utilizar o atalho ( ! ) no Visual Studio Code e teremos a 
estrutura básica do nosso arquivo.
E adicionaremos o título da nossa página dentro da tag title:
Lembre-se de utilizar a extensão Live Server para acompanhar como a estrutura da sua página dentro do navegador.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (3 / 7)
000 000
91
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos construir a estrutura do cabeçalho, contendo todos os 
elementos da página inicial do Hashtag Treinamentos. E vamos relembrar os 
conceitos dos elementos e suas estruturas.
Vamos construir o código HTML que cria a estrutura básica do cabeçalho do site da 
Hashtag Treinamentos, com um logotipo no topo e um menu de navegação que 
permite aos visitantes acessar diferentes partes do site. A utilização de listas não 
ordenadas (<ul>) e itens de lista (<li>) é umaabordagem comum para a criação de 
menus de navegação em HTML, tornando a navegação do site mais organizada e 
intuitiva para os usuários.
Para colocarmos o logo, vamos copiar o endereço da imagem do próprio site da 
Hashtag Treinamentos, clicando com o botão direito do mouse em cima do logo e 
colocarmos no nosso arquivo html utilizando a tag img :
• <img src="https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png.webp" 
alt="Logo da Hashtag">
Este é um elemento de imagem (<img>) que exibe o logotipo da Hashtag 
Treinamentos. O atributo src define o caminho da imagem, e o atributo alt fornece 
um texto alternativo que é exibido se a imagem não puder ser carregada. O logotipo 
é um link para a página inicial do site.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (4 / 7)
000 000
92
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos crias os próximos elementos que serão links que encaminham o usuário as páginas de cada item. Para isso 
precisamos utilizar as listas:
• <ul>: Este elemento cria uma lista não ordenada (<ul>), que será usada para criar o menu de navegação do site.
• <li>: Cada item de menu é representado por um elemento de lista (<li>) dentro da lista não ordenada.
• <a href="https://www.hashtagtreinamentos.com/curso-de-excel-online">Curso de Excel</a>: Este é um link de âncora 
(<a>) que aponta para a página do "Curso de Excel" no site da Hashtag Treinamentos. O atributo href define o URL de 
destino e o texto entre as tags <a> é o texto visível do link.
A estrutura se repete para outros itens do menu, como "Curso de Power BI," "Curso de Python," "Outros Cursos," "Para 
empresas," "Blog" e "Contato." Cada um deles é um link para diferentes seções do site.
Para saber para qual página cada link encaminha, você pode utilizar a ferramenta do programador, DevTools (F12), o primeiro 
ícone representa a seleção dos elementos da página:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (5 / 7)
000 000
93
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para os itens "Outros Cursos" e "Contato," há submenus aninhados. Isso é representado pela criação de outra lista não ordenada 
(<ul>) dentro de um item de lista (<li>). Esses submenus contêm links adicionais para páginas relacionadas.
Então a estrutura do cabeçalho será:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (6 / 7)
000 000
94
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com a estrutura:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (7 / 7)
Comentários no HTML
Os caracteres <!-- e --> (CTRL + ;)são usados 
em HTML para criar comentários. Os 
comentários são trechos de texto que não 
são renderizados na página pelo 
navegador, mas servem para incluir notas 
ou explicações que podem ser lidas por 
desenvolvedores ou mantenedores do 
código. Eles são úteis para documentar o 
HTML, tornando-o mais compreensível e 
facilitando a colaboração em projetos.
000 000
95
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (1 / 3)
O que é uma Seção "Hero"?
Uma seção "hero" é a área proeminente que você geralmente encontra no topo de muitas páginas web. Ela é projetada para 
chamar a atenção do visitante e transmitir informações importantes ou cativantes de forma impactante. Essa seção é chamada 
de "hero" porque desempenha um papel heróico ao fazer uma primeira impressão notável. Vamos explorar suas características 
típicas:
• Imagem ou Vídeo de Destaque: A seção "hero" geralmente apresenta uma imagem de fundo ou vídeo impactante e relevante.
• Título e Subtítulo Impactantes: Inclui um título grande e chamativo, muitas vezes acompanhado por um subtítulo informativo.
• Chamada para Ação (CTA): Geralmente contém um botão de ação (CTA) que incentiva os visitantes a tomar ações específicas.
• Conteúdo de Destaque: Além do título, pode destacar elementos de conteúdo relevantes, como depoimentos ou números.
• Design Responsivo: Deve ser responsivo, ajustando-se a diferentes tamanhos de tela sem perder qualidade visual.
• Simplificação da Navegação: Pode incluir links ou botões para facilitar a navegação nas áreas importantes do site.
• Foco na História ou na Marca: Muitas vezes, conta a história da empresa, destaca os valores da marca ou transmite uma 
mensagem poderosa.
Por que é Importante Aprender sobre Seções "Hero"?
As seções "hero" desempenham um papel crucial na criação de uma primeira impressão marcante em uma página web. Elas são 
usadas em sites de empresas, páginas de produtos, eventos e muito mais. A compreensão dessas seções é fundamental para 
criar designs atraentes e envolventes.
000 000
96
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (2 / 3)
Vamos construir a nossa seção Hero, com os elementos da página da Hashtag Treinamentos:
000 000
97
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (3 / 3)
• Vamos analisar as estruturas utilizadas para criarmos nosso seção Hero:
• <!-- Seção Hero --> é um comentário que descreve o início da seção "hero" para fins de documentação e entendimento.
• <h1> contém o título principal da seção "hero."
• <p> inclui um parágrafo com informações adicionais ou descritivas.
• Os dois <a> (âncoras ou links) direcionam os visitantes para páginas específicas quando clicados. O primeiro link leva para 
"Cursos Hashtag Treinamentos," e o segundo para "Cursos Hashtag Programação."
• <p> adicionaremos por enquanto o texto "VÍDEO".
000 000
98
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (1 / 5)
Agora vamos iniciar a próxima seção de Conteúdos Gratuitos:
Vamos começar com os elementos da imagem da seta e o título (h2):
000 000
99
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (2 / 5)
Adicionaremos a próxima imagem e um subtítulo que será responsável pelos itens dos Treinamentos:
E iniciaremos a lista de cursos com logotipos, utilizando as âncoras para criarmos os links e as imagens:
000 000
100
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (3 / 5)
E agora vamos adicionar a lista para plataformas digitais, elas estarão dentro de uma lista e vamos utilizar as âncoras para 
criarmos os links e as imagens de cada elemento:
000 000
101
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (4 / 5)
Nesse momento vamos estruturar o segundo subtítulo da seção que será Programação, e para isso também utilizaremos a 
tag <h3> e as âncoras de links com suas respectivas imagens:
E assim como estruturamos os links paras mídias sociais e suas imagens, faremos nesse momento, mas com os endereços da 
Programação.
000 000
102
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (5 / 5)
000 000
103
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (1 / 6)
000 000
104
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima seção que vamos criar é a de Diferenciais: Vamos iniciar adicionando o título a seção e o primeiro texto:
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (2 / 6)
000 000
105
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No código acima, a seção Diferenciais, possui uma estrutura de elementos "Foco no Mercado" que apresenta informações 
sobre o foco dos materiais de treinamento da Hashtag Treinamentos no mercado de trabalho. Os comentários explicam o 
propósito de cada elemento no código.
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (3 / 6)
000 000
106
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No código abaixo, vamos criar a estrutura dos elementos do "Nível Impressionador" que apresenta informações sobre o nível de 
treinamento oferecidopela Hashtag Treinamentos, destacando a jornada desde o início até o "Nível Impressionador".
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (4 / 6)
000 000
107
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E por último faremos a mesma criação de estrutura para os elementos da estrutura de "+84.600 alunos formados" destaca o 
número de alunos que a Hashtag Treinamentos formou e fornece informações sobre o impacto positivo de seus cursos.
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (5 / 6)
000 000
108
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando a nossa seção de diferenciais, vamos adicionar uma tag <h3> e dentro desse elemento vamos adicionar uma 
âncora que direciona o usuário a um link.
E abaixo dessa estrutura adicionaremos as imagens de diversas logomarcas de empresas e os links das imagens estão 
disponíveis na plataforma Hashtag, dentro dessa aula:
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (6 / 6)
000 000
109
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção O que falam (1 / 2)
000 000
110
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A seção "O que falam sobre a Hashtag Treinamentos" refere-se a depoimentos em vídeo de alunos ou clientes. Ela inclui 
ícones, títulos, marcadores para botões de navegação e um link para "Veja mais depoimentos" no YouTube. No entanto, 
partes do código estão marcadas como "BOTÃO ESQUERDA," "BOTÃO DIREITA," e "BOTÕES DE NAVEGAÇÃO," pois 
esses elementos de interface são implementados usando CSS e JavaScript para criar uma experiência interativa de 
navegação de depoimentos.
Módulo 3 – Desafio 2 – Criando a Seção O que falam (2 / 2)
000 000
111
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Na mídia (1 / 1)
000 000
112
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Neste código, a seção "Na mídia" destaca a presença da Hashtag Treinamentos em várias mídias, como Globo News e O 
Globo. Ela inclui ícones, títulos e links para os artigos ou conteúdos relacionados à empresa na mídia.
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (1 / 5)
000 000
113
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Essa é uma seção do site que destaca os últimos posts do Blog da Hashtag 
Treinamentos. A seção inclui informações sobre cada post, como título, data de 
postagem, categoria, uma imagem de destaque e uma breve descrição do 
conteúdo.
Cada entrada do post consiste em:
• Título do Post: O título do post é uma chamada atraente para o conteúdo 
que será apresentado.
• Data e Categoria: A data de postagem e a categoria em que o post se 
encaixa, permitindo aos visitantes saber quando foi publicado e em qual 
área do conhecimento se encaixa.
• Imagem de Destaque: Cada post é representado por uma imagem de 
destaque que dá uma prévia visual do conteúdo do post.
• Descrição do Post: Uma breve descrição ou resumo do conteúdo do post é 
fornecido para dar aos visitantes uma ideia do que podem esperar 
encontrar.
Cada entrada de post é acompanhada por um link que leva os visitantes 
diretamente ao post completo no blog, permitindo que eles leiam o conteúdo 
completo. Essa seção é uma maneira eficaz de destacar os últimos conteúdos 
do blog e incentivar os visitantes a explorarem o blog da Hashtag 
Treinamentos.
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (2 / 5)
000 000
114
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (3 / 5)
000 000
115
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (4 / 5)
000 000
116
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (5 / 5)
000 000
117
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Como ajudar (1 / 2)
000 000
118
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima seção que vamos criar é a Como ajudar: Nesta seção, a Hashtag Treinamentos apresenta informações sobre 
como seus cursos e treinamentos podem ajudar os alunos a se 
destacarem no mercado de trabalho, tornando-se referências em suas 
áreas de atuação. Eles enfatizam sua experiência e sucesso na formação 
de mais de 84.600 alunos em diversos programas. Também fornecem 
links para obter mais informações sobre seus cursos e treinamentos.
Módulo 3 – Desafio 2 – Criando a Seção Como ajudar (2 / 2)
000 000
119
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Minicurso (1 / 1)
000 000
120
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse trecho de código HTML, temos a "Seção Minicurso", onde a Hashtag Treinamentos oferece aos visitantes a oportunidade 
de se inscrever e receber um minicurso gratuitamente. Aqui está a explicação dos elementos presentes:
Módulo 3 – Desafio 2 – Criando o Rodapé (1 / 6)
000 000
121
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O rodapé de uma página web é uma seção localizada na parte inferior da página e tem várias funções importantes. Ele é geralmente 
projetado para fornecer informações adicionais e recursos úteis aos visitantes do site. Aqui estão algumas das principais funções e 
elementos comuns encontrados em um rodapé:
• Informações de Contato: O rodapé costuma conter informações de contato, como endereço de e-mail, número de telefone e 
endereço físico da empresa ou organização. Isso permite que os visitantes entrem em contato facilmente.
• Links de Navegação: Muitas vezes, o rodapé inclui links para seções importantes do site, como "Sobre Nós", "Produtos", "Serviços", 
"Blog" e "Perguntas Frequentes". Esses links ajudam os visitantes a navegar pelo site de maneira mais eficaz.
• Links para Políticas: É comum encontrar links para políticas importantes, como "Política de Privacidade" e "Termos de Uso". Esses 
links são fundamentais para a transparência e a conformidade legal.
• Links de Redes Sociais: O rodapé geralmente inclui ícones ou links para as páginas de redes sociais da empresa, como Facebook, 
Twitter, LinkedIn e Instagram. Isso permite que os visitantes se conectem nas redes sociais da empresa.
• Direitos Autorais: O rodapé costuma conter uma declaração de direitos autorais que informa aos visitantes que o conteúdo do 
site está protegido por direitos autorais e quem detém os direitos.
• Logotipo da Empresa: O logotipo da empresa é frequentemente exibido no rodapé para ajudar a reforçar a marca e fornecer uma 
identificação visual.
• Outras Informações: Dependendo do site, o rodapé pode conter informações adicionais, como prêmios, selos de segurança, 
certificações, parceiros, selos de qualidade e muito mais.
O conteúdo específico e o design do rodapé podem variar amplamente de um site para outro, dependendo dos objetivos e 
necessidades da empresa ou organização. O objetivo principal é tornar o site mais informativo, acessível e fácil de usar para os 
visitantes, garantindo que eles possam encontrar as informações de que precisam. Além disso, o rodapé desempenha um papel 
fundamental na credibilidade e profissionalismo de um site, transmitindo confiança aos visitantes.
Módulo 3 – Desafio 2 – Criando o Rodapé (2 / 6)
000 000
122
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar a estrutura do rodapé com os seguintes elementos:
• <img>: Este elemento <img> exibe o logotipo da Hashtag. O atributo src especifica o URL da imagem, enquanto o atributo alt 
fornece um texto alternativo que é exibido se a imagem não puder ser carregada. Nesse caso, o texto alternativo é "Logo da 
Hashtag".
• <p>: São elementos de parágrafo HTML. Os três parágrafos a seguir ao logo representam informações no rodapé:
• "Fale Conosco"
• "Cursos Online"
• "Carol | Assistente de Suporte"
Módulo 3 – Desafio 2 – Criando o Rodapé (3 / 6)
000 000
123
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag SVG (Scalable VectorGraphics) é usada para criar imagens ou gráficos vetoriais escaláveis em páginas da web. Em vez de serem 
baseados em pixels, como imagens regulares, os gráficos SVG são criados com vetores, o que significa que são formados por 
equações matemáticas, linhas e formas. Isso permite que sejam ampliados ou reduzidos sem perder qualidade ou ficar pixelados. O 
SVG é especialmente útil para ícones, logotipos e ilustrações em websites, pois eles sempre ficam nítidos e bem definidos, 
independentemente do tamanho em que são exibidos. Isso ajuda a melhorar a qualidade visual das páginas da web.
Você pode utilizar o DevTools(F12) para inspecionar os elementos e copiar todo o código svg para adicionar as imagens como 
elemento svg diretamente:
Módulo 3 – Desafio 2 – Criando o Rodapé (4 / 6)
000 000
124
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos adicionar todos os elementos svg com os elementos copiados e também as demais informações de cada elemento:
Módulo 3 – Desafio 2 – Criando o Rodapé (5 / 6)
000 000
125
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando o Rodapé (6 / 6)
000 000
126
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E com essas últimas linhas de código, criamos a estrutura da nossa página web e 
finalizamos o Desafio 2 com SUCESSO!!
Módulo 4
INTRODUÇÃO AO CSS
INTRODUÇÃO AO CSS
INTRODUÇÃO AO CSS
127
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 4 – O que é CSS (1 / 1)
000 000
128
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CSS, que significa "Cascading Style Sheets" em inglês, é uma linguagem de marcação usada para controlar a apresentação e o 
estilo de elementos em documentos HTML (Hypertext Markup Language). Em outras palavras, o CSS é usado para definir como os 
elementos HTML devem ser exibidos em uma página da web, incluindo coisas como cores, fontes, espaçamento, posicionamento e 
muito mais.
O CSS separa a estrutura e o conteúdo de uma página web (geralmente definidos em HTML) da forma como essa página é estilizada 
e apresentada. Isso é benéfico porque permite que os desenvolvedores alterem o design de uma página sem ter que reescrever 
todo o conteúdo HTML. Além disso, o CSS permite criar layouts responsivos, adaptando a aparência da página de acordo com o 
tamanho da tela ou o dispositivo em que está sendo visualizada.
Os estilos em CSS são definidos por meio de regras que selecionam elementos HTML e especificam como eles devem ser estilizados. 
Essas regras podem ser aplicadas diretamente no documento HTML usando tags <style>, incorporadas em um arquivo CSS externo 
vinculado ao documento ou ainda podem ser definidas inline diretamente nos elementos HTML.
Style sheets, ou folhas de estilo em português, referem-se a documentos ou arquivos que contêm regras de estilo para controlar a 
apresentação de elementos em uma página da web. As folhas de estilo são usadas principalmente em conjunto com a linguagem 
de marcação HTML (Hypertext Markup Language) para definir o layout, cores, fontes, tamanhos e outros aspectos visuais de uma 
página da web.
As folhas de estilo podem ser escritas em diferentes linguagens, sendo o CSS (Cascading Style Sheets) a mais comum e amplamente 
utilizada. O CSS permite que os desenvolvedores definam estilos de maneira eficiente e flexível, separando a estrutura e o conteúdo 
da página da formatação e do estilo. Isso facilita a manutenção, o design responsivo e a consistência visual em um site.
Módulo 4 – As três formas de escrever CSS (1 / 10)
000 000
129
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Folhas de estilo, ou "style sheets", são utilizadas para controlar a apresentação e o estilo dos elementos em uma página da web. Elas 
desempenham um papel fundamental na criação de designs atraentes e na formatação consistente de páginas da web.
Existem três principais abordagens para aplicar folhas de estilo:
Estilos Embutidos (Inline Styles): Com estilos embutidos, você define estilos diretamente nos elementos HTML usando o atributo 
"style". Isso significa que os estilos são específicos para o elemento em que são definidos e se sobrepõem a quaisquer estilos 
externos ou internos. Embora seja útil para situações muito específicas, o uso excessivo de estilos embutidos pode tornar o código 
HTML menos legível e mais difícil de manter.
Estilos Internos (Internal Styles): Os estilos internos são definidos em um bloco <style> dentro do documento HTML, normalmente 
na seção <head>. Os estilos internos afetam todos os elementos que correspondem às regras definidas no documento. Isso permite 
um controle mais amplo, mas ainda se aplica apenas à página atual.
Estilos Externos (External Styles): Os estilos externos são definidos em um arquivo CSS separado e, em seguida, vinculados ao 
documento HTML usando a tag <link>. Essa é a abordagem mais comum e recomendada para projetos de desenvolvimento web. 
Os estilos externos podem ser reutilizados em várias páginas, promovendo a consistência visual em todo o site e tornando a 
manutenção mais eficiente.
Módulo 4 – As três formas de escrever CSS (2 / 10)
000 000
130
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para entendermos melhor essas três maneiras, vamos criar um arquivo index.html com o elemento h1, com conteúdo "Meu título 
com formatação diferente" e uma tag p, "Um textinho qualquer".
Vamos utilizar a extensão Live Server, para observar o comportamento dos nosso elementos dentro do navegador.
Módulo 4 – As três formas de escrever CSS (3 / 10)
000 000
131
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O primeiro comportamento será o conceito de style inline, no qual o nosso estilo será aplicado através da propriedade style a linha 
do elemento que vamos estilizar, nesse caso será o elemento H1.
Podemos também alterar outras propriedades de outros elementos, como o p, diretamente em seu elemento:
Módulo 4 – As três formas de escrever CSS (4 / 10)
000 000
132
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade font-size do CSS define o tamanho da fonte de um elemento. Ela pode ser especificada em várias unidades, cada 
uma adequada para diferentes contextos. Aqui está uma visão geral rápida dos valores que você pode definir:
Valores Absolutos
• px (pixels): Define um tamanho fixo. Ex: font-size: 16px;
• pt (points): Muito usado em documentos impressos. Ex: font-size: 12pt;
• cm (centimeters), mm (millimeters), in (inches): Menos comuns, usados para tamanhos físicos. Ex: font-size: 2cm;
Valores Relativos
• em: Relativo ao tamanho da fonte do elemento pai. Ex: font-size: 1.5em;
• rem: Relativo ao tamanho da fonte da raiz (elemento <html>). Ex: font-size: 1rem;
• %: Relativo ao tamanho da fonte do elemento pai. Ex: font-size: 100%;
• vw (viewport width), vh (viewport height): Relativo às dimensões da janela de visualização. Ex: font-size: 5vw;
Palavras-chave
• xx-small, x-small, small, medium, large, x-large, xx-large: Tamanhos pré-definidos pelo navegador.
• larger, smaller: Ajusta o tamanho da fonte relativamente ao tamanho da fonte do elemento pai.
Módulo 4 – As três formas de escrever CSS (5 / 10)
000 000
133
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Usar CSS inline, ou seja, diretamente no atributo style de elementos HTML, geralmente não é considerado uma boa prática por 
várias razões. Primeiramente, a manutenção do código torna-se difícil. CSS inline espalha estilos diretamente no HTML, o que 
dificulta localizar e alterar estilos posteriormente, especialmente em projetos grandes. Isso pode levar a inconsistências e tornar a 
manutenção complexa. Além disso, o uso de CSS inline resulta em muita repetição de código, pois o mesmo estilo pode precisar ser 
aplicado a muitos elementos, aumentando o tamanho do HTML e dificultando alterações globais. Outra questão é a separação de 
preocupações. Boas práticas de desenvolvimento web recomendam manter a estrutura (HTML), apresentação (CSS) e 
comportamento (JavaScript) separados. CSS inlineviola essa separação, misturando apresentação e estrutura.
Em termos de desempenho e caching, estilos CSS em arquivos separados podem ser cacheados pelo navegador, melhorando o 
desempenho da página. CSS inline não pode ser cacheado da mesma forma, o que pode aumentar o tempo de carregamento da 
página. A reutilização de estilos também é prejudicada. Estilos definidos inline não podem ser facilmente reutilizados em outros 
elementos ou páginas, ao contrário de estilos em arquivos CSS externos, que permitem aplicar as mesmas regras a múltiplos 
elementos e páginas com facilidade. Além disso, o uso de ferramentas de desenvolvimento, como pré-processadores (SASS, LESS), 
frameworks (Bootstrap, Tailwind), e práticas como BEM (Block Element Modifier), é dificultado ou impossível com CSS inline. A 
depuração de estilos inline pode ser mais complexa, já que os estilos não são centralizados e podem ser sobrepostos por estilos em 
cascata (CSS).
A responsividade também é um desafio com CSS inline. Gerenciar estilos responsivos diretamente no HTML é impraticável, 
enquanto arquivos CSS separados permitem o uso eficiente de media queries e outras técnicas responsivas. Um exemplo 
comparativo ilustra isso: ao usar CSS inline, você pode ter um código HTML como <div style="color: red; font-size: 20px;">Texto em 
vermelho</div>, repetido várias vezes. Com CSS externo, você pode centralizar esses estilos em um arquivo styles.css e aplicar uma 
classe aos elementos, como <div class="text-red">Texto em vermelho</div>, tornando o código mais limpo e fácil de manter. 
Utilizar um arquivo CSS externo melhora a manutenção, reutilização e separação de preocupações, facilitando o desenvolvimento e 
a escalabilidade do projeto.
Módulo 4 – As três formas de escrever CSS (6 / 10)
000 000
134
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A segunda forma de escrevermos CSS que vamos ver é o CSS interno, no qual construímos a estilização também dentro do arquivo 
html, porém toda a estilização ficará dentro do elemento <style></style>.
CSS interno refere-se à prática de incluir estilos CSS diretamente dentro do arquivo HTML, mas em um bloco <style> no cabeçalho 
do documento. Esta abordagem, situada entre o CSS inline e o CSS externo, pode ser útil em certas situações específicas. A principal 
vantagem do CSS interno é a facilidade de implementação, especialmente para páginas pequenas. Ele permite adicionar estilos de 
forma rápida e centralizada, sem precisar criar múltiplos arquivos. Diferente do CSS inline, onde os estilos estão espalhados pelos 
elementos HTML, o CSS interno centraliza todos os estilos em um só lugar no cabeçalho do documento, tornando-os mais fáceis de 
gerenciar e editar. Além disso, elimina a necessidade de múltiplos arquivos, simplificando a estrutura do projeto quando você não 
quer ou não pode criar arquivos separados.
Módulo 4 – As três formas de escrever CSS (7 / 10)
000 000
135
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Por outro lado, o CSS interno apresenta algumas desvantagens, especialmente em termos de manutenção e escalabilidade. Em 
projetos maiores, ou quando há necessidade de reutilização de estilos entre várias páginas, ele pode se tornar difícil de gerenciar, 
pois alterações nos estilos exigem que você edite cada página HTML individualmente. Também não segue completamente o 
princípio de separação de preocupações, que recomenda manter o conteúdo (HTML), a apresentação (CSS) e o comportamento 
(JavaScript) em arquivos separados para facilitar a manutenção e a clareza do código. Em termos de desempenho, embora melhor 
do que o CSS inline, o CSS interno impede o cache de estilos entre diferentes páginas, o que pode levar a um desempenho inferior 
comparado ao uso de um arquivo CSS externo, que pode ser cacheado pelo navegador.
Quando Usar CSS Interno
O CSS interno pode ser uma boa escolha quando você está criando uma página única ou um protótipo rápido, e não espera 
reutilizar esses estilos em outras páginas. Também pode ser útil em situações onde é necessário modificar estilos rapidamente sem 
a complexidade de configurar arquivos CSS externos. No entanto, para projetos maiores e mais complexos, o uso de CSS externo é 
geralmente preferível para manter o código organizado, escalável e de fácil manutenção.
Módulo 4 – As três formas de escrever CSS (8 / 10)
000 000
136
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A terceira forma de escrever CSS e que iremos adotar em nosso curso é o CSS externo, e para isso vamos criar um arquivo novo com 
extensão .css, chamado style, que será nosso arquivo padrão de CSS.
Agora vamos Definir seus estilos dentro do arquivo CSS, escrevendo todas as regras de estilo que desejamos aplicar ao seu HTML.
Agora vamos vincular o arquivo CSS ao HTML: 
No documento HTML em que deseja aplicar os estilos, adicione um elemento <link> dentro da seção <head> para vincular o arquivo 
CSS externo. O atributo href deve apontar para o caminho do seu arquivo CSS.
Módulo 4 – As três formas de escrever CSS (9 / 10)
000 000
137
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CSS externo refere-se à prática de escrever estilos CSS em um arquivo separado (.css) e vinculá-lo ao documento HTML por meio do 
elemento <link> no cabeçalho do HTML. Esta abordagem é considerada uma prática recomendada na maioria dos cenários de 
desenvolvimento web devido a várias vantagens que oferece.
A principal razão para usar CSS externo é a separação de preocupações, um conceito fundamental no desenvolvimento web. A 
separação de preocupações significa que diferentes aspectos de um projeto web, como conteúdo (HTML), apresentação (CSS) e 
comportamento (JavaScript), devem ser mantidos separados para facilitar a manutenção, escalabilidade e colaboração entre os 
membros da equipe.
Ao utilizar CSS externo, você mantém todos os estilos em um arquivo separado, tornando-os reutilizáveis e facilmente aplicáveis a 
várias páginas. Isso promove uma melhor organização do código, facilitando a manutenção e evitando a repetição desnecessária de 
estilos. Por exemplo, se você tiver um estilo que se aplica a vários elementos em diferentes páginas do seu site, só precisa definir 
esse estilo uma vez no arquivo CSS externo e ele será aplicado automaticamente em todas as páginas que o utilizam.
Outra vantagem significativa do CSS externo é o desempenho. Os navegadores podem armazenar em cache arquivos CSS externos, 
o que significa que eles só precisam ser baixados uma vez e podem ser reutilizados em várias páginas do mesmo site ou em visitas 
subsequentes à mesma página. Isso resulta em tempos de carregamento mais rápidos para os usuários e uma experiência de 
navegação mais suave.
Além disso, o CSS externo facilita a colaboração entre os membros da equipe de desenvolvimento. Como os estilos estão em um 
arquivo separado, várias pessoas podem trabalhar no mesmo projeto simultaneamente sem interferir no trabalho umas das outras. 
Isso é especialmente útil em equipes grandes ou projetos complexos.
Módulo 4 – As três formas de escrever CSS (10 / 10)
000 000
138
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O uso de CSS externo é preferível porque:
• Promove a separação de preocupações, facilitando a manutenção e a organização do código.
• Permite a reutilização de estilos em várias páginas.
• Melhora o desempenho do site, graças ao caching de arquivos CSS pelos navegadores.
• Facilita a colaboração entre membros da equipe de desenvolvimento.
Essas vantagens tornam o CSS externo uma escolha recomendada na maioria dos projetos de desenvolvimento web.
Módulo 4 – Seletores no CSS (1 / 5)
000 000
139
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seletores CSS
Seletores CSS são padrões que definem quais elementos HTML serão estilizados por determinadas regras CSS. Eles são usados para 
segmentar elementos específicos em uma página da web com base em seus tipos, classes, IDs, atributos e relações com outros 
elementos. Os seletores sãocombinados com declarações CSS para aplicar estilos aos elementos correspondentes.
Existem vários tipos de seletores CSS, cada um direcionando diferentes elementos HTML de maneiras específicas. Aqui estão alguns 
dos tipos mais comuns de seletores CSS:
• Seletores de Tipo: Direcionam elementos com base em seus tipos HTML.
Os Seletores de Tipo são utilizados para direcionar elementos HTML com base em seus tipos específicos. Cada elemento HTML tem 
um tipo associado a ele, como <h1>, <p>, <div>, <a>, entre outros. Esses seletores visam todos os elementos que correspondem ao 
tipo especificado.
Por exemplo:
• h1 seleciona todos os elementos <h1> na página.
• p seleciona todos os elementos <p> na página.
• div seleciona todos os elementos <div> na página.
Esses seletores são úteis quando você deseja aplicar um estilo específico a um tipo particular de elemento em toda a sua página. Por 
exemplo, você pode querer definir o tamanho da fonte para todos os cabeçalhos <h1> como 24px ou a cor do texto para todos os 
parágrafos <p> como cinza.
Módulo 4 – Seletores no CSS (2 / 5)
000 000
140
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma possível desvantagem dos seletores de tipo é que eles são muito genéricos e aplicam estilos a todos os elementos de um tipo 
específico na página. Isso pode levar a estilos indesejados ou não intencionais se não forem usados com cuidado.
Por exemplo, se você definir um estilo para todos os elementos <p> em sua página, isso afetará todos os parágrafos, mesmo aqueles 
dentro de áreas específicas da página que você não pretendia estilizar dessa maneira. Isso pode resultar em uma perda de controle 
sobre o design da página e tornar a manutenção mais difícil, especialmente em projetos grandes.
Além disso, os seletores de tipo não são tão flexíveis quanto outros tipos de seletores mais específicos, como seletores de classe ou 
seletores de ID. Eles aplicam estilos com base apenas no tipo de elemento, o que pode limitar a capacidade de estilizar elementos 
de maneira mais granular e seletiva.
Portanto, enquanto os seletores de tipo são úteis para aplicar estilos básicos a elementos específicos em uma página, é importante 
usá-los com cautela e considerar se outros seletores mais específicos podem ser mais apropriados para o seu caso de uso específico. 
Isso pode ajudar a evitar problemas de estilo indesejados e facilitar a manutenção do código CSS.
Módulo 4 – Seletores no CSS (3 / 5)
000 000
141
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor de ID é um tipo de seletor CSS que é usado para direcionar um elemento específico na página com base em seu ID único. 
Cada elemento HTML pode ter um ID único atribuído a ele usando o atributo id. O seletor de ID é representado pelo símbolo # 
seguido pelo nome do ID.
A hierarquia do seletor de ID em relação a outros seletores é determinada pela especificidade do seletor. A especificidade é uma 
maneira de determinar qual regra CSS deve ser aplicada a um elemento quando várias regras têm estilos conflitantes.
O seletor de ID é altamente específico porque seleciona um elemento com base em seu ID único, o que significa que ele tem 
precedência sobre outros seletores menos específicos, como seletores de classe, seletores de tipo e seletores de atributo.
Por exemplo, se você tiver uma regra CSS para um elemento específico com um seletor de ID e outra regra para o mesmo elemento 
com um seletor de classe, a regra com o seletor de ID terá precedência e será aplicada ao elemento, mesmo que a regra com o 
seletor de classe venha depois no código CSS.
Portanto, ao usar seletores de ID em seu CSS, você pode garantir que certos estilos sejam aplicados apenas a elementos específicos 
na página, tornando-os úteis para estilizar elementos exclusivos e individualizados. No entanto, é importante usar os seletores de ID 
com moderação e evitar seu uso excessivo, já que eles podem diminuir a reutilização de estilos e complicar a manutenção do código 
CSS.
Módulo 4 – Seletores no CSS (4 / 5)
000 000
142
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor de classe é um dos seletores mais comuns e poderosos em CSS. Ele é usado para direcionar elementos que possuem uma 
classe específica atribuída a eles no HTML. As classes são atributos que podem ser aplicados a vários elementos HTML e podem ser 
reutilizadas em diferentes partes do documento ou em várias páginas.
O seletor de classe é representado por um ponto . seguido pelo nome da classe desejada.
O seletor de classe oferece flexibilidade e reutilização, permitindo que você aplique o mesmo estilo a vários elementos sem precisar 
repetir o código CSS. Além disso, você pode aplicar várias classes a um único elemento, permitindo uma combinação de estilos.
A hierarquia do seletor de classe em relação a outros seletores é determinada pela especificidade do seletor. Em geral, os seletores 
de classe têm uma especificidade menor do que os seletores de ID, o que significa que eles têm menos precedência. No entanto, 
eles têm uma precedência maior do que os seletores de tipo e seletores universais.
Módulo 4 – Seletores no CSS (5 / 5)
000 000
143
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Atalho - Comentário
O atalho "CTRL + ;" é usado para comentar ou descomentar rapidamente uma linha de código CSS em 
alguns editores de texto. Ele adiciona ou remove os caracteres de comentário ("/" e "/") de uma linha de 
código, permitindo que você ative ou desative a linha de forma rápida e conveniente durante o 
desenvolvimento. Isso ajuda a economizar tempo e reduzir erros de digitação ao trabalhar com estilos CSS.
Módulo 4 – Combinando Seletores (1 / 3)
000 000
144
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você está inspecionando um elemento em uma página da web usando as ferramentas de desenvolvedor do seu 
navegador (geralmente acessíveis pressionando F12 ou clicando com o botão direito em um elemento e selecionando "Inspecionar" 
ou "Inspecionar elemento"), você pode visualizar os estilos aplicados a esse elemento na guia "Elementos" ou "Inspector".
Aqui está como você pode fazer isso:
• Abra as Ferramentas de Desenvolvedor: Pressione F12 no seu teclado ou clique com o botão direito em qualquer parte da 
página da web e selecione "Inspecionar" ou "Inspecionar elemento" no menu contextual.
• Selecione o Elemento Desejado: Use o seletor de elementos na parte superior das ferramentas de desenvolvedor para selecionar 
o elemento que você deseja inspecionar. Basta clicar no elemento na página da web ou usar os botões de seta para navegar pela 
estrutura HTML.
• Visualize os Estilos Aplicados: Na guia "Elementos" ou "Inspector", você verá o HTML do elemento selecionado e também a seção 
"Styles" (ou "Estilos" em alguns navegadores). Nesta seção, você verá todos os estilos CSS aplicados ao elemento, incluindo estilos 
herdados e estilos de CSS externos ou embutidos.
• Você pode ver os estilos que são aplicados diretamente ao elemento (estilos inline), bem como os estilos que são herdados de 
elementos pai ou definidos em folhas de estilo externas.
• Cada regra de estilo exibe o seletor CSS que a originou, juntamente com as propriedades e valores associados.
• Navegue pelos Estilos: Você pode clicar nos estilos individuais para vê-los mais detalhadamente e até mesmo modificar 
temporariamente os valores para ver como isso afeta a aparência do elemento em tempo real.
• Use as Ferramentas de Desenvolvedor para Depurar: Além de visualizar os estilos, as ferramentas de desenvolvedor também 
oferecem outras funcionalidades úteis, como a capacidade de editar HTML e CSS em tempo real, depurar JavaScript, analisar o 
desempenho da página e muito mais.
Módulo 4 – Combinando Seletores (2 / 3)
000 000
145
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os seletores de descendência são simplesmente usados para direcionar elementos que são descendentes de outros elementos em 
HTML. Eles permitem estilizar elementos específicos queestão aninhados dentro de outros elementos.
Por exemplo, se você tem um elemento filho (como <span>) que está dentro de um elemento pai (como <p>), você pode usar um 
seletor de descendência para estilizar esse elemento filho específico apenas quando ele estiver dentro do elemento pai.
Isso é feito escrevendo o seletor do elemento pai, seguido de um espaço e, em seguida, o seletor do elemento filho. Por exemplo, p 
span irá direcionar todos os elementos <span> que estão dentro de elementos <p>.
Essa abordagem é útil quando você precisa aplicar estilos específicos a elementos que estão organizados dentro de uma estrutura 
hierárquica em sua página da web. É uma maneira eficiente e precisa de estilizar elementos específicos em relação aos seus pais.
Módulo 4 – Combinando Seletores (3 / 3)
000 000
146
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor span.span-textinho é um exemplo de seletor de classe combinado com um seletor de tipo. Ele direciona especificamente 
os elementos <span> que também têm a classe "span-textinho" atribuída a eles.
• span é o seletor de tipo, que direciona todos os elementos <span> na página.
• .span-textinho é o seletor de classe, que direciona todos os elementos que possuem a classe "span-textinho".
Juntos, span.span-textinho direciona apenas os elementos <span> que também possuem a classe "span-textinho".
Usar um seletor como span.span-textinho é útil quando você deseja aplicar estilos específicos apenas a elementos <span> que 
tenham uma determinada classe. Isso oferece várias vantagens:
• Precisão na Estilização: Ao usar um seletor de classe combinado com um seletor de tipo, você pode aplicar estilos apenas a 
elementos <span> que atendam a critérios específicos, como ter uma determinada classe atribuída a eles. Isso evita que outros 
elementos <span> na página sejam afetados pelos mesmos estilos.
• Reutilização de Estilos: Atribuir uma classe específica a elementos <span> permite reutilizar estilos em vários lugares da sua 
página ou em várias páginas do seu site. Isso promove a consistência visual e facilita a manutenção do código CSS.
• Separação de Preocupações: Ao separar a seleção de elementos do estilo aplicado a eles, você adota uma prática conhecida 
como separação de preocupações. Isso torna seu código CSS mais organizado e legível, facilitando a compreensão e a 
manutenção futura.
• Especificidade Controlada: Usar um seletor de classe combinado com um seletor de tipo oferece um nível de especificidade 
controlada ao aplicar estilos. Isso significa que você pode direcionar com precisão os elementos desejados sem precisar recorrer a 
seletores mais genéricos ou complexos.
Módulo 4 – Estilizando textos (1 / 5)
000 000
147
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Conseguimos através da ferramenta do desenvolvedor (F12) na opção de selecionar um elemento, verificar as formatações que o 
elemento selecionado possui, exemplo se queremos verificar a formatação padrão de um H1.
E através disso podemos alterar algumas propriedades dentro do nosso arquivo CSS, nesse exemplo vamos modificar o tamanho e o 
tipo da fonte desse elemento:
Módulo 4 – Estilizando textos (2 / 5)
000 000
148
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando desejamos utilizar a mesma estilização para vários elementos a forma simples que podemos fazer é da seguinte maneira:
• Eficiência: Ao agrupar seletores, você pode aplicar as mesmas propriedades de estilo a vários elementos de uma só vez. Isso reduz 
a quantidade de código CSS necessário, tornando-o mais eficiente e fácil de gerenciar.
• Consistência: Usar o mesmo estilo de fonte em diferentes tipos de elementos (como títulos <h1>, <h2>, <h3> e parágrafos <p>) 
cria uma sensação de uniformidade visual em toda a página ou site. Isso é importante para garantir uma experiência do usuário 
coesa e profissional.
• Manutenção Simplificada: Se você precisar fazer alterações nos estilos de fonte mais tarde, agrupar os seletores permite que você 
faça essas alterações em um único lugar, em vez de ter que atualizar cada seletor individualmente. Isso simplifica o processo de 
manutenção e ajuda a evitar erros.
• Legibilidade: Ao agrupar seletores relacionados juntos, você torna seu código CSS mais legível e fácil de entender para outros 
desenvolvedores que possam estar trabalhando no mesmo projeto. Isso facilita a colaboração e o entendimento do código.
Módulo 4 – Estilizando textos (3 / 5)
000 000
149
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS font-style é usada para definir o estilo da fonte de um elemento de texto. Ela pode ter três valores principais:
• normal: Este é o valor padrão. A fonte é exibida no estilo normal, sem itálico ou obliquidade.
• italic: Este valor faz com que o texto seja exibido em itálico. Isso é geralmente uma versão inclinada da fonte, projetada para 
enfatizar palavras ou frases.
• oblique: Similar ao itálico, mas nem todas as fontes suportam este estilo. Quando a fonte não possui uma variante itálica, o estilo 
oblique é usado para inclinar a fonte na direção especificada.
Essa propriedade é especialmente útil para adicionar ênfase ou estilo visual a certos trechos de texto em uma página da web. Por 
exemplo, você pode usar font-style: italic; para destacar citações ou termos técnicos, enquanto o valor font-style: normal; é 
frequentemente usado para texto comum.
A propriedade CSS font-weight é usada para definir a espessura ou a "grossura" da fonte de um elemento de texto. Ela pode ser 
definida usando diferentes valores numéricos ou palavras-chave, que indicam a intensidade da espessura da fonte.
Alguns valores comuns para font-weight incluem:
• normal: Este é o valor padrão, que indica uma espessura de fonte normal.
• bold: Este valor indica uma fonte mais pesada ou em negrito.
• lighter: Este valor indica uma fonte mais leve do que o normal.
• bolder: Este valor indica uma fonte mais pesada do que o normal.
Além disso, existem valores numéricos que podem ser usados para definir a espessura da fonte com mais precisão. Por exemplo, 
font-weight: 400; é equivalente a normal, enquanto font-weight: 700; é equivalente a bold.
Essa propriedade é comumente usada para dar destaque a certos elementos de texto em uma página da web, como títulos, 
subtítulos ou partes importantes do conteúdo. A escolha da espessura da fonte pode afetar significativamente a aparência e a 
legibilidade do texto em uma página.
Módulo 4 – Estilizando textos (4 / 5)
000 000
150
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS line-height é usada para definir a altura da linha em um elemento de texto. Ela especifica a altura que uma linha 
de texto deve ter, o que afeta o espaçamento entre as linhas de texto dentro desse elemento.
Você pode definir o valor da propriedade line-height de várias maneiras:
• Valor fixo: Você pode especificar um valor em pixels, ems ou qualquer outra unidade de medida para definir a altura da linha de 
forma fixa.
• Valor unitário: Você pode especificar um valor unitário semelhante a 1.5, 1.2, etc. Isso multiplica o tamanho atual da fonte para 
determinar a altura da linha.
• Valor percentual: Você pode especificar um valor percentual que define a altura da linha em relação ao tamanho da fonte. Por 
exemplo, line-height: 150%; define a altura da linha como 150% do tamanho da fonte atual.
• Normal: Você também pode usar o valor normal, que define a altura da linha automaticamente com base no tamanho da fonte 
atual.
Controlar a altura da linha é importante para garantir uma boa legibilidade e aparência estética do texto em uma página da web. 
Uma linha muito apertada pode tornar o texto difícil de ler, enquanto uma linha muito espaçada pode desperdiçar espaço e tornar o 
texto mais difícil de seguir. A propriedade line-height permite ajustar o espaçamento entre as linhas para atender às necessidades 
específicas de design e legibilidade.
Módulo 4 – Estilizando textos (5 / 5)
000 000
151HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS text-transform é usada para especificar a transformação de texto em um elemento de texto. Ela permite 
modificar a capitalização do texto em um elemento, alterando como as letras são exibidas.
Existem várias opções para a propriedade text-transform:
• none: Este é o valor padrão. Ele não aplica nenhuma transformação de texto.
• capitalize: Transforma o primeiro caractere de cada palavra para maiúsculas.
• uppercase: Transforma todo o texto em letras maiúsculas.
• lowercase: Transforma todo o texto em letras minúsculas.
• initial: Define a propriedade como seu valor padrão.
• inherit: Herda o valor da propriedade de seu elemento pai.
Essa propriedade é útil para aplicar consistência na capitalização do texto em uma página da web. Por exemplo, você pode usar 
text-transform: uppercase; para garantir que todos os títulos sejam exibidos em letras maiúsculas, independentemente de como 
são escritos no HTML. Isso pode ser especialmente útil para garantir que o estilo do texto seja consistente em todo o site, 
independentemente de como o texto foi digitado originalmente.
Módulo 4 – Trabalhando com cores (1 / 5)
000 000
152
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS color é usada para definir a cor do texto de um elemento. Ela permite especificar a cor do texto usando uma 
variedade de formatos de cor, como nomes de cores, valores hexadecimais, valores RGB ou valores HSL.
Por exemplo, você pode definir a cor do texto para vermelho usando diferentes métodos:
• Nome da cor: color: red;
• Valor hexadecimal: color: #FF0000;
• Valor RGB: color: rgb(255, 0, 0);
• Valor HSL: color: hsl(0, 100%, 50%);
A propriedade color é amplamente usada para personalizar a aparência do texto em uma página da web. Você pode usá-la para 
garantir que o texto seja legível e se destaque do fundo, além de criar uma estética visual atraente para o seu conteúdo.
Módulo 4 – Trabalhando com cores (2 / 5)
000 000
153
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos explorar cada método para definir a cor do texto em CSS com mais detalhes:
• Nome da Cor:
• Esta abordagem permite definir a cor do texto usando um nome de cor pré-definido, como "red", "blue", "green", entre outros.
• Essa é uma maneira simples e fácil de especificar a cor do texto, especialmente para cores comuns amplamente reconhecidas.
• No entanto, a gama de cores disponíveis é limitada aos nomes de cores definidos na especificação CSS, o que pode restringir 
as opções de cor.
• Valor Hexadecimal (Hex):
• O valor hexadecimal é uma representação numérica da cor que utiliza uma combinação de seis dígitos hexadecimais (0-9 e A-
F) para representar a intensidade de vermelho, verde e azul (RGB).
• Cada par de dígitos hexadecimais representa a intensidade de uma das cores primárias (R, G, B), em ordem. Por exemplo, 
"#FF0000" representa a cor vermelha pura, enquanto "#0000FF" representa a cor azul pura.
• Este método oferece uma ampla gama de cores disponíveis e é comumente usado devido à sua precisão e flexibilidade.
Módulo 4 – Trabalhando com cores (3 / 5)
000 000
154
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Valor RGB (Red Green Blue):
• O valor RGB permite definir a cor do texto especificando a intensidade de vermelho, verde e azul em uma escala de 0 a 255 
para cada cor.
• Por exemplo, rgb(255, 0, 0) representa a cor vermelha pura, onde o primeiro valor (255) é a intensidade de vermelho, seguido 
pela intensidade de verde (0) e azul (0).
• Essa abordagem fornece controle granular sobre a cor, permitindo ajustes precisos na intensidade de cada cor primária para 
obter a cor desejada.
• Valor HSL (Hue Saturation Lightness):
• O valor HSL representa a cor em termos de matiz (tonalidade), saturação e luminosidade.
• O matiz define a tonalidade da cor (0 a 360 graus), a saturação determina a pureza ou a quantidade de cinza na cor (0% a 
100%), e a luminosidade indica a claridade da cor (0% é preto, 100% é branco).
• Por exemplo, hsl(0, 100%, 50%) representa a cor vermelha pura, onde 0 é a tonalidade do vermelho, 100% é a saturação 
máxima e 50% é a luminosidade média.
• Este método oferece uma abordagem intuitiva para definir cores com base em características perceptuais, como matiz, 
saturação e luminosidade.
Módulo 4 – Trabalhando com cores (4 / 5)
000 000
155
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O Visual Studio Code possui uma funcionalidade que exibe uma prévia da cor quando você digita um valor de cor CSS. Quando você 
digita uma cor em qualquer lugar que aceite código CSS, como em um arquivo CSS, HTML ou em uma propriedade CSS dentro de 
um arquivo HTML, o Visual Studio Code automaticamente exibe uma caixa de cor ao lado do valor da cor que você digitou.
Essa caixa de cor fornece uma representação visual da cor que você especificou, permitindo que você visualize rapidamente como 
será a cor no seu código. Além disso, você pode clicar na caixa de cor para abrir um seletor de cores mais avançado, que permite 
escolher a cor de uma paleta de cores ou inserir um valor hexadecimal, RGB ou HSL diretamente.
Essa funcionalidade é útil para facilitar a seleção e visualização de cores enquanto você escreve código CSS, tornando mais fácil 
escolher as cores desejadas e garantir uma aparência visual consistente em seu projeto.
Módulo 4 – Trabalhando com cores (5 / 5)
000 000
156
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você está aplicando transparência a uma cor usando o modelo de cores RGB no CSS, você está na verdade adicionando um 
quarto valor à função rgba() (Red Green Blue Alpha), que representa a transparência da cor.
Por exemplo, se você tem a cor vermelha pura e deseja torná-la semi-transparente, você pode adicionar um valor de transparência 
(alfa) ao final da função rgba(). Este valor de transparência é um número entre 0 e 1, onde 0 representa total transparência 
(totalmente transparente ou invisível) e 1 representa opacidade total (totalmente sólido ou opaco).
Por exemplo:
• rgba(255, 0, 0, 0.5) representa a cor vermelha com 50% de transparência.
• rgba(0, 0, 255, 0.2) representa a cor azul com 20% de transparência.
Isso permite que você crie efeitos de transparência em elementos HTML, permitindo que o conteúdo subjacente seja parcialmente 
visível através da cor aplicada. Essa técnica é útil para criar sobreposições, sombreamentos suaves e outros efeitos visuais em 
elementos da página da web.
Módulo 4 – Estilizando hiperlinks (1 / 3)
000 000
157
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS text-decoration é usada para adicionar decorações visuais ao texto, como sublinhado, tachado, sublinhado duplo 
ou remoção da decoração padrão.
Alguns valores comuns para a propriedade text-decoration incluem:
• none: Remove todas as decorações de texto, como sublinhado ou tachado. Este é o valor padrão.
• underline: Adiciona uma linha abaixo do texto, geralmente indicando que é um link.
• overline: Adiciona uma linha sobre o texto.
• line-through: Adiciona uma linha no meio do texto, geralmente para indicar que foi riscado.
• underline overline: Adiciona uma linha abaixo e outra acima do texto.
• inherit: Herda a propriedade text-decoration do elemento pai.
Essa propriedade é frequentemente usada para estilizar links (<a>), mas também pode ser aplicada a qualquer elemento de texto 
para adicionar ou remover decorações conforme necessário. Por exemplo, você pode usar text-decoration: none; para remover 
sublinhados padrão de links ou text-decoration: line-through; para riscar o texto.
Você também pode especificar estilos de linha mais complexos, como dotted, dashed, wavy, entre outros, que controlam a 
aparência da linha de decoração.
Aqui está uma explicação desses valores adicionais:
• dotted: Adiciona uma linha pontilhada sob o texto.
• dashed: Adiciona uma linha tracejada sob o texto.
• wavy: Adiciona uma linha ondulada sob o texto.
Essesestilos de linha podem ser úteis para criar efeitos visuais mais interessantes em textos decorados, adicionando variedade aos 
sublinhados padrão. Por exemplo, você pode usar text-decoration: dotted; para adicionar um sublinhado pontilhado a um link.
Módulo 4 – Estilizando hiperlinks (2 / 3)
000 000
158
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade text-decoration-line é uma versão mais específica da propriedade text-decoration, introduzida no CSS3, que 
permite definir apenas o estilo de linha de texto, como sublinhado, tachado, linha sobre o texto, entre outros.
Alguns valores possíveis para a propriedade text-decoration-line incluem:
• none: Remove todas as decorações de texto, como sublinhado ou tachado. Este é o valor padrão.
• underline: Adiciona uma linha abaixo do texto, geralmente indicando que é um link.
• overline: Adiciona uma linha acima do texto.
• line-through: Adiciona uma linha no meio do texto, geralmente para indicar que foi riscado.
• underline overline: Adiciona uma linha abaixo e outra acima do texto.
A principal diferença entre text-decoration e text-decoration-line é que text-decoration pode aceitar valores adicionais, como 
line-through e underline, enquanto text-decoration-line apenas aceita esses valores específicos relacionados à linha do texto.
Essa propriedade é útil quando você precisa definir apenas o estilo da linha de texto sem afetar outras decorações, como cores ou 
estilo de linha. Por exemplo, você pode usar text-decoration-line: underline; para adicionar sublinhado a um texto sem afetar 
outras decorações existentes.
Módulo 4 – Estilizando hiperlinks (3 / 3)
000 000
159
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade text-decoration-color é usada para definir a cor da linha de decoração aplicada a um texto decorado, como um link 
ou texto com sublinhado. Ela permite especificar uma cor diferente da cor do texto para a linha de decoração.
Alguns pontos importantes sobre text-decoration-color:
• Valor Padrão: Se não for especificado, o valor padrão é geralmente a cor atual do texto (currentColor).
• Cor Personalizada: Você pode definir a cor da linha de decoração para ser diferente da cor do texto, fornecendo um valor de cor 
válido, como um nome de cor, valor hexadecimal, valor RGB ou valor HSL.
• Herança de Cor: Por padrão, a cor da linha de decoração é herdada do elemento pai, a menos que seja explicitamente definida 
em um elemento filho.
Essa propriedade é útil quando você deseja personalizar a cor da linha de decoração, tornando-a mais visível ou contrastante com o 
texto. Por exemplo, você pode usar text-decoration-color: blue; para aplicar uma linha de decoração azul a um link, mesmo que o 
texto seja de outra cor. Isso pode ajudar a destacar os links em uma página da web.
Módulo 4 – Desafio 1 – Formatando uma página em HTML (1 / 2)
000 000
160
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No módulo anterior, você aprendeu os fundamentos 
essenciais de HTML, construindo uma página da web 
básica. Agora, é hora de dar um passo adiante e adicionar 
estilo à sua criação. Estamos prontos para explorar o 
mundo do CSS (Cascading Style Sheets) e transformar sua 
página HTML em algo visualmente atraente e profissional.
O CSS é uma linguagem de estilo que permite controlar a 
apresentação de elementos HTML em uma página da web. 
Com o CSS, podemos definir cores, fontes, margens, 
tamanhos e muitos outros aspectos visuais que tornam sua 
página única e cativante.
Seu desafio hoje é aplicar o CSS à página HTML que você 
desenvolveu anteriormente. Você terá a oportunidade de 
experimentar diferentes propriedades CSS, criar layouts 
interessantes e personalizar completamente a aparência 
da sua página.
Ao final deste desafio, você não apenas terá uma 
compreensão mais profunda do CSS, mas também terá 
uma página da web visualmente atraente e pronta para 
impressionar.
Módulo 4 – Desafio 1 – Formatando uma página em HTML (2 / 2)
000 000
161
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Todas as orientações para o seu desafio estão dentro do arquivo desafio-1.txt
Módulo 4 – Desafio 1 – Resolvendo o Desafio (1 / 5)
000 000
162
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para iniciarmos o nosso desafio vamos criar um arquivo com extensão .css e linkar dentro do nosso arquivo html:
Agora vamos seguir as instruções do arquivo desafio-1.txt e ir adicionando as estilização dentro do nosso CSS, a primeira 
delas é que a fonte de todos os textos da página deverá ser Montserrat e, caso o navegador não consiga carregar, deverá 
usar uma fonte sans-serif.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (2 / 5)
000 000
163
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para iniciarmos o nosso desafio vamos criar um arquivo com extensão .css e linkar dentro do nosso arquivo html:
Vamos alterar o tamanho dos textos da página de acordo com a tabela --->
Dentro do CSS vamos aplicar os seguintes seletores e propriedades:
O próximo passo é que a legenda da imagem deverá ter 12px de tamanho e deverá estar em itálico.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (3 / 5)
000 000
164
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O link de compra deverá estar na cor #c44105 com
24px de tamanho, negrito e com um sublinhado duplo:
Os itens de lista deverão estar na cor #035276 e em itálico.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (4 / 5)
000 000
165
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos realçar o texto '75"' que está dentro do H1 com a cor #0588c4.
Os dois realces que fizemos na seção de Preço deverão ter a cor #0588c4. (Existem várias formas certas de fazer isso). Você 
pode trocar os códigos em HTML, só lembre de não perder a parte semântica do que tínhamos construído.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (5 / 5)
000 000
166
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E por último do nosso desafio 1 , os dois realces da seção de Condições deverão estar na cor #0588c4 e o realce do frete grátis 
deverá adicionar um sublinhado também. Lembre de não perder a parte semântica do HTML aqui também.
Módulo 4 – Desafio 2 – Formatando a Home da Hashtag (1 / 1)
000 000
167
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No módulo anterior, você aprendeu os fundamentos do HTML e criou a estrutura básica do site da Hashtag. Agora, é hora de 
avançar e dar vida a esse site com um toque de estilo utilizando CSS (Cascading Style Sheets).
O CSS é a linguagem de estilo que nos permite controlar a aparência visual dos elementos HTML em uma página web. Com 
o CSS, podemos definir cores, tipos de fontes, espaçamentos, tamanhos e muitos outros aspectos visuais, transformando seu 
site simples em algo visualmente impressionante.
O desafio de hoje é aplicar CSS ao site da Hashtag que você desenvolveu. Vamos utilizar como base o site da Hashtag 
Treinamentos (https://www.hashtagtreinamentos.com/) e, através da ferramenta do desenvolvedor (F12), pegar as 
informações necessárias do layout utilizado, como fontes, cores, tamanhos e outras propriedades.
O objetivo para o Desafio 2 nesse módulo (Introdução ao CSS) é estilizar o esqueleto básico da Home da Hashtag 
Treinamentos que criamos ao final do módulo de Introdução ao HTML.
Como ainda não vimos tudo o que precisamos para concluir o desafio, vamos formatar apenas as coisas que já aprendemos.
Vamos precisar consultar MUITO o site da Hashtag. Essa vai ser uma ótima hora para se familiarizar com as Ferramentas do 
Programador. Vamos utilizá-las o tempo todo para entender o que está acontecendo no site que vamos reproduzir.
Ao completar este desafio, você não apenas melhorará suas habilidades em CSS, mas também terá uma transformação 
visual no seu site!
https://www.hashtagtreinamentos.com/
Módulo 4 – Desafio 2 – Formatando o cabeçalho (1 / 3)
000 000
168
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa aula vamos iniciar os primeiros passos para estilizar o cabeçalho doseu site da Hashtag, o primeiro passo é criar um arquivo CSS e 
adicionar o seu link dentro do arquivo HTML.
Os primeiros elementos nos quais vamos trabalhar serão as nossas listas dentro do cabeçalho. Inicialmente vamos adicionar uma classe 
para as listas que estão com uma hierarquia maior, ou seja, as listas filhas do ul principal, que estão circuladas em amarelo:
Vamos adicionar a classe item-lista-cabecalho nessas li em destaque abaixo:
Módulo 4 – Desafio 2 – Formatando o cabeçalho (2 / 3)
000 000
169
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com o auxílio da ferramenta do desenvolvedor, vamos selecionar os elementos e verificar as 
informações dos elementos.
O próximo passo é colocarmos a estilização do elemento, dentro do arquivo CSS.
• Selecionando Descendentes: Quando escrevemos .item-lista-cabecalho a no CSS, estamos 
dizendo ao navegador para selecionar todos os elementos <a> que estão dentro (descendentes 
de) de elementos <li class="item-lista-cabecalho">.
• Herança de Estilos: Agora, vamos abordar a lógica por trás disso. Imagine que você tenha estilizado 
os elementos <li>, definindo sua cor de fundo, tamanho da fonte, etc. Por padrão, os elementos <a> 
dentro desses <li> não herdarão esses estilos automaticamente. No entanto, se quisermos que 
esses links também tenham os mesmos estilos que seus elementos pai (<li>), precisamos dizer 
explicitamente ao navegador para fazer isso.
• Transmitindo Estilos: Ao escrever .item-lista-cabecalho a no CSS, estamos basicamente dizendo:
"Para todos os elementos <a> que estão dentro de elementos <li>, aplique os estilos que definimos 
para os elementos <li>". Isso garante que os links herdem os estilos de seus itens de lista pai, 
proporcionando uma aparência uniforme e consistente dentro da lista.
Módulo 4 – Desafio 2 – Formatando o cabeçalho (3 / 3)
000 000
170
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando se trata de estilizar texto em um site, a escolha da fonte desempenha um papel crucial na aparência e na legibilidade do 
conteúdo. É por isso que frequentemente recorremos ao uso da propriedade font-family em estilos mais globais ou em diversos 
elementos de uma vez só.
• Consistência Visual: Ao definir a propriedade font-family em um nível mais global, como no seletor do corpo (body), você estabelece 
uma fonte padrão que será aplicada a todo o texto no site, a menos que seja especificado de outra forma. Isso ajuda a garantir uma 
aparência visual consistente em todas as páginas e elementos.
• Facilidade de Manutenção: Usar font-family de forma global simplifica a manutenção do site. Se você decidir alterar a fonte em algum 
momento, pode fazer isso em um único lugar (por exemplo, no seletor do corpo), e essa alteração será refletida em todo o site. Isso é 
especialmente útil em sites maiores, nos quais a consistência visual é essencial e a atualização de estilos pode se tornar trabalhosa se 
aplicada individualmente a cada elemento.
• Eficiência de Código: Reduzir a repetição de código é uma prática recomendada em desenvolvimento web. Ao aplicar a font-family 
em um nível mais global, você evita a necessidade de repetir a mesma declaração de estilo em vários elementos. Isso resulta em um 
código mais limpo e conciso, facilitando a leitura e a manutenção no longo prazo.
• Coerência na Experiência do Usuário: Uma fonte consistente em todo o site contribui para uma experiência de usuário coesa e 
profissional. Os visitantes do seu site podem se sentir mais confiantes e engajados quando a aparência do texto é uniforme e fácil de ler 
em todos os dispositivos e páginas.
Portanto, ao utilizar a propriedade font-family em estilos mais globais ou em diversos elementos de uma vez só, você não apenas melhora 
a consistência visual e a eficiência de código do seu site, mas também proporciona uma experiência de usuário mais agradável e 
profissional.
Módulo 4 – Desafio 2 – Formatando a Seção Hero (1 / 2)
000 000
171
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos começar a estilização da seção Hero do nosso site, e vamos continuar utilizando a ferramenta do desenvolvedor para 
verificar os estilos aplicados para adicionarmos as propriedades dentro do nosso arquivo CSS.
O primeiro passo será adicionarmos a cor padrão do site nos elementos de forma global, então vamos adicionar a propriedade e 
valor nos elemetos:
Módulo 4 – Desafio 2 – Formatando a Seção Hero (2 / 2)
000 000
172
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os próximos elementos que vamos começar sua estilização serão os botões da nossa seção, apenas nesse momento não vamos 
alterar a cor do texto que é branco e teríamos dificuldade de encontrar esses elementos nesse momento. Nesse elementos vamos 
adicionar classes também, lembrando que esses "botões" na verdade são elementos âncoras, em forma de botão por conta de 
estilização do CSS.
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (1 / 3)
000 000
173
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos estilizar a nossa seção de conteúdos gratuitos, e através da ferramenta do desenvolvedor conseguimos 
verificar algumas das propriedades que vamos criar no nosso arquivo de estilização CSS.
O primeiro elemento que vamos inspecionar é o título dessa seção, e já conseguimos observar que ele não está em negrito e que e 
existe um trecho de seu texto realçado. Vamos adicionar ao elemento h2 a classe="gratuito-h2".
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (2 / 3)
000 000
174
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos criar a estilização do nosso span que está realçado dentro do nosso subtítulo h2. Para isso vamos criar uma classe para 
nosso span chamada "gratuito-realce". E podemos criar de duas formas:
Os próximos elementos que vamos modificar será os <h3> de Treinamento e Programação, vamos adicionar a mesma classe para 
eles, chamada "gratuito-h3" e aplicar os estilos.
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (3 / 3)
000 000
175
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos trabalhar nas listas de cada um dos elemento h3 dessa seção. Vamos adicionar a classe="gratuito-link-lista" 
em todos os elementos de âncora que pertence a lista abaixo, tanto para o <h3> Treinamentos quanto o <h3> Programação.
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (1 / 4)
000 000
176
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos estilizar a nossa seção diferenciais utilizando a ferramenta do desenvolvedor verificaremos algumas das propriedades, o 
primeiro elemento que vamos inspecionar é o título dessa seção, e já conseguimos observar suas características. Vamos adicionar ao 
elemento h2 a classe="diferenciais-h2".
Vamos controlar o realce do elemento strong:
O próximo elemento que vamos inspecionar é o parágrafo e vamos adicionar uma classe chamada "diferenciais-p" e estilizar com a 
seguinte propriedade:
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (2 / 4)
000 000
177
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para estilizarmos os elementos <h3> dessa seção, vamos adicionar uma classe="diferenciais-h3" e as seguintes propriedades:
Dentro das configurações globais do nosso arquivo CSS, ou seja, as primeiras linhas de estilização, vamos subir o estilo 
aplicado para o elemento h1 e também criar um estilo padrão para elementos do tipo parágrafo:
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (3 / 4)
000 000
178
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Conseguimos nesse momento verificar, que os elementos strong não utilizam o valor de 700, ou seja, que o font-weight desse 
elementos é um pouco mais suave, possuindo o valor de 600. Para isso vamos comentar uma especificação do nosso arquivo CSS e 
adicionar essa propriedade em nossa estrutura global. Além de colocarmos nosso elemento h2 também como padrão.
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais(4 / 4)
000 000
179
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro dessa seção teremos mais um elemento <h3>, porém vamos estilizar ele com valores diferentes, então vamos localizar ele em 
nosso arquivo html e adicionar uma classe chamada "diferenciais-h3-empresas".
E para finalizar vamos criar a estilização para o realce dessa âncora, que está localizada dentro desse elemento h3.
Módulo 4 – Desafio 2 – Formatando a Seção o que Falam (1 / 1)
000 000
180
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A seção o que falam possui poucos elementos nesse momento para estilizarmos, o que vamos adicionar é no elemento <h2> um span 
no texto que precisa estar em realce e esse span receberá uma classe chamada "oque falam-realce".
Observando o layout do site em relação aos nossos botões, vamos retornar na seção HERO e adicionar uma nova classe chamada 
botão, e também vamos colocar essa classe no botão da nossa seção o que falam, para padronizar algumas propriedades e valores, e 
quando falamos em padronizar é porque vamos utilizar essa classe na nossa estrutura global:
Seção Hero
Seção O que Falam
Módulo 4 – Desafio 2 – Formatando a Seção na Mídia (1 / 1)
000 000
181
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesta seção da mídia, à medida que avançamos no desenvolvimento do nosso projeto, estamos começando a padronizar alguns 
estilos dentro do nosso arquivo CSS. Isso significa que estamos definindo estilos globais e específicos da seção para garantir 
consistência e coesão no design do nosso site. Como resultado, podemos observar que não será necessário criar nenhuma nova classe 
ou realizar estilizações adicionais, pois já implementamos as características corretas do layout dentro desta seção específica.
• Padronização de Estilos: Uma prática comum no desenvolvimento web é estabelecer estilos padronizados que se aplicam a todo o 
site ou a seções específicas. Isso é alcançado através da definição de estilos globais para elementos comuns, como tipografia, cores, 
espaçamento, etc., e também através da criação de estilos específicos para cada seção do site.
• Eficiência no Desenvolvimento: Ao padronizar os estilos dentro de uma seção da mídia, estamos economizando tempo e esforço 
no desenvolvimento. Em vez de criar novas classes ou estilizações para cada elemento individual, podemos reutilizar estilos 
existentes que já foram cuidadosamente projetados e implementados. Isso não apenas agiliza o processo de desenvolvimento, mas 
também reduz a probabilidade de erros e inconsistências no design.
• Consistência Visual: Manter uma aparência visual consistente é essencial para a experiência do usuário. Ao padronizar os estilos 
dentro de uma seção, garantimos que todos os elementos dentro dessa área do site sigam as mesmas diretrizes de design. Isso cria 
uma experiência coesa e profissional para os visitantes, aumentando a credibilidade e a usabilidade do site.
• Facilidade de Manutenção: Uma vez que os estilos foram padronizados e implementados, a manutenção do site se torna mais 
simples e eficiente. Futuras atualizações ou ajustes no design podem ser feitos de forma rápida e fácil, pois já temos uma estrutura 
sólida de estilos estabelecida. Isso permite que nossa equipe de desenvolvimento trabalhe de forma mais ágil e produtiva, focando 
em melhorias e novos recursos.
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (1 / 3)
000 000
182
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção do blog, podemos observar que não será necessário realizar estilizações adicionais ao nosso elemento h2, pois já 
implementamos as características corretas do layout dentro do nosso projeto.
Agora precisamos modificar alguns elementos dentro dos posts. Lembrando que todos os posts receberão as mesmas classes e 
características.
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (2 / 3)
000 000
183
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os primeiros elementos que vamos alterar é o primeiro parágrafo dos posts, vamos adicionar a classe "blog-postadoem" em todos 
os primeiros parágrafos de cada um dos posts. E adicionar a estilização para a classe e também para âncora dentro do elemento.
Depois vamos modificar o elemento âncora, que representa o título do nosso post. Vamos adicionar uma nova classe a esse 
elemento, chamado "blog-titulopost"
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (3 / 3)
000 000
184
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E o último elemento do nosso post é mais um parágrafo, e vamos adicionar a classe "blog-descricaopost".
Verifique se aplicou todas as classes á todos os elementos de cada um dos posts da nossa seção Blog.
Módulo 4 – Desafio 2 – Formatando a Seção Como ajudar (1 / 2)
000 000
185
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa seção vamos começar com o elemento h2, no qual possui um texto com realce. Primeiro vamos adicionar um elemento span e 
colocar o conteúdo realçado dentro dele e também colocar uma classe chamada "comoajudar-realce".
Os próximos elementos serão os itens de lista dessa seção. Desta vez, vamos colocar uma classe no elemento pai, o nosso elemento 
<ul>, ou seja, nossa lista não ordenada. A classe será "comoajudar-lista".
Módulo 4 – Desafio 2 – Formatando a Seção Como ajudar (2 / 2)
000 000
186
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os parágrafos dessa seção também possuem o valor de font-size: 19px, e para adicionarmos essa característica todos eles receberam 
uma classe chamada "comoajudar-paragrafo"
Para as demais características vamos utilizar os elementos filhos das classe e colocar as novas propriedades:
Módulo 4 – Desafio 2 – Formatando a Seção Minicurso (1 / 1)
000 000
187
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção Minicurso, como temos elementos de formulário no qual ainda não vamos alterar a estilização, vamos aplicar apenas as 
alterações no elemento do h2, para isso vamos adicionar a classe "minicurso-realce" e a seguinte estilização.
A partir dessa seção, conseguimos verificar que essa é uma estrutura que estamos repetindo em alguns elementos, então vamos 
refatorar o nosso CSS, e as classes que vamos deixar padronizadas como "realce-semibold".
Módulo 4 – Desafio 2 – Formatando a Seção Rodapé (1 / 2)
000 000
188
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na nossa última seção Rodapé vamos estilizar os primeiros três parágrafos, porém cada um deles receberá uma classe e uma 
estilização:
A classe "rodape-titulo" nós vamos replicar, ou seja, adicionar essas classes em alguns outros elementos dessa seção:
Módulo 4 – Desafio 2 – Formatando a Seção Rodapé (2 / 2)
000 000
189
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Podemos verificar que já existem estruturas com a estilização global. E para finalizarmos o nosso rodapé é estilizar os nossos links:
Vamos adicionar a esses elementos a classe "rodape-link" e vamos alterar a sua cor.
Módulo 5
APROFUNDANDO NO HTML
APROFUNDANDO NO HTML
APROFUNDANDO NO HTML
190
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 5 – Apresentando o módulo (1 / 1)
000 000
191
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Bem-vindo ao módulo "Aprofundando no HTML"! Vamos explorar aspectos avançados do HTML, capacitando você com 
conhecimentos sobre tags e componentes essenciais para a criação de páginas web robustas e dinâmicas.
Temas abordados:
• Tags Avançadas e Componentes:
• Citações: Uso das tags <blockquote> e <q> para citações.
• Abreviações: Utilização da tag <abbr> para definir abreviações e acrônimos.
• Detalhes de Contato: Apresentação de informações de contato com <address>.
• Códigos: Exibição de código com <code>, <pre>, e <samp>.
• Datas: Marcação de datas e horários com <time>.
• Estruturas de Documento: Organização semântica com <header>, <footer>, <article>, <section>, e <aside>.
• Componentes:
• Formulários: Criação de formulários eficientes usando <form>, <input>, <textarea>,e <button>.
• Tabelas: Construção de tabelas acessíveis com <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, e <td>.
• Iframes: Incorporação de conteúdo externo com <iframe>.
• Paginação: Implementação de paginação para melhorar a navegação.
• Carrossel: Criação de carrosséis de imagens e conteúdo.
Este módulo visa elevar suas habilidades de HTML, permitindo a criação de páginas web sofisticadas, funcionais e acessíveis. 
Prepare-se para aprimorar seu domínio dessa linguagem essencial!
Módulo 5 – Citações, Abreviações e Detalhes de contato (1 / 4)
000 000
192
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de citação ou avançadas são mecanismos usados em linguagens de marcação e em sistemas de gerenciamento de conteúdo 
para identificar e formatar trechos específicos de texto. Eles são amplamente utilizados para melhorar a organização, a legibilidade e a 
semântica de documentos e páginas web. Vou detalhar cada um desses conceitos:
Tags de Citação
As tags de citação são usadas para marcar citações de outras fontes, diferenciando-as do texto principal. Elas ajudam a indicar que o 
conteúdo foi retirado de outra obra, garantindo a atribuição adequada e ajudando a evitar plágio. Em HTML, por exemplo, temos duas 
tags principais de citação:
• <blockquote>: Usada para citações longas. O conteúdo dentro dessa tag é geralmente exibido com uma indentação.
• <cite>: Usada para citar a fonte de uma obra. É geralmente usada junto com <blockquote> ou para referenciar títulos de obras em 
textos.
Módulo 5 – Citações, Abreviações e Detalhes de contato (2 / 4)
000 000
193
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <blockquote> pode incluir o atributo cite para fornecer a URL da fonte da citação. Este atributo não é exibido na página, mas 
pode ser útil para SEO, metadados e para fornecer informações adicionais sobre a origem da citação. Aqui está um exemplo de como 
usar o atributo cite com a tag <blockquote>:
A tag <q> em HTML é usada para delimitar citações curtas, incorporadas diretamente no texto. Esta tag é diferente da tag 
<blockquote>, que é usada para citações mais longas e que normalmente são exibidas como um bloco separado do texto principal. 
As citações dentro da tag <q> são geralmente exibidas entre aspas pelo navegador. Assim como a tag <blockquote>, a tag <q> 
também pode usar o atributo cite para fornecer a URL da fonte da citação.
Módulo 5 – Citações, Abreviações e Detalhes de contato (3 / 4)
000 000
194
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de abreviação em HTML são usadas para indicar abreviações ou acrônimos no texto. Essas tags fornecem informações adicionais 
sobre a abreviação, geralmente na forma de um texto expandido que descreve o que a abreviação significa. Isso melhora a 
acessibilidade e a clareza do conteúdo, especialmente para leitores que podem não estar familiarizados com a abreviação.
A tag <abbr> é usada para marcar abreviações. Você pode usar o atributo title para fornecer a forma completa da abreviação, que 
aparecerá como uma dica (tooltip) quando o usuário passar o mouse sobre a abreviação.
Neste exemplo, "HTML" é a abreviação de "HyperText Markup Language ". Quando o usuário passa o mouse sobre "HTML", a forma 
completa é exibida como uma dica.
Módulo 5 – Citações, Abreviações e Detalhes de contato (4 / 4)
000 000
195
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Em HTML, há tags específicas que ajudam a estruturar e formatar detalhes de contato de maneira clara e semântica. Essas tags 
são úteis para fornecer informações de contato, como nomes, endereços, números de telefone e outras informações pessoais ou 
organizacionais.
A tag <address> é usada para definir informações de contato de um autor ou proprietário de um documento ou artigo. É uma 
tag semântica que indica que o conteúdo dentro dela é uma seção de detalhes de contato.
• Acessibilidade: Usar a tag <address> melhora a semântica e a acessibilidade do seu documento, indicando claramente que o 
conteúdo é uma seção de informações de contato.
Módulo 5 – Códigos e Datas (1 / 3)
000 000
196
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de código são usadas em HTML para exibir blocos de código ou trechos de código em uma página da web. Elas ajudam a 
formatar e destacar o código para facilitar a leitura e a compreensão por parte dos desenvolvedores e usuários. As duas tags 
principais para exibir código em HTML são <code> e <pre>, com finalidades ligeiramente diferentes.
A tag <code> é usada para envolver pequenos trechos de código incorporados no texto. Ela é ideal para destacar palavras-
chave, variáveis, funções ou outros elementos de código em um parágrafo ou frase.
A tag <pre> é usada para exibir blocos de código pré-formatados, mantendo a formatação original, como espaços em branco e 
quebras de linha. É útil para exibir trechos de código que precisam manter a formatação exata, como blocos de código HTML, 
CSS, JavaScript ou qualquer outra linguagem de programação.
Módulo 5 – Códigos e Datas (2 / 3)
000 000
197
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <var> em HTML é usada para definir uma variável em um contexto matemático ou em um texto técnico. Ela é usada para 
indicar que o conteúdo dentro da tag representa uma variável ou um argumento em uma equação, fórmula ou expressão 
matemática.
A tag <samp> em HTML é usada para definir uma amostra de saída de um programa de computador ou de um script. Ela é 
comumente usada para exibir o resultado de um código de programação ou de um comando de terminal, destacando-o como 
saída do sistema.
A tag <kbd> em HTML é usada para definir o texto que representa entrada do teclado, como teclas pressionadas ou atalhos de 
teclado. Ela é comumente usada para mostrar ao usuário as teclas que ele deve pressionar para realizar uma determinada ação.
Módulo 5 – Códigos e Datas (3 / 3)
000 000
198
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As tags de data em HTML são usadas para representar datas e horários de maneira semântica, permitindo que os navegadores e 
mecanismos de busca compreendam o significado dos dados de data em uma página da web. 
A tag <time> é usada para representar datas e/ou horários específicos. Ela pode incluir um ou mais dos seguintes atributos: 
datetime, pubdate e aria-hidden.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (1 / 3)
000 000
199
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags semânticas são elementos HTML que adicionam significado estrutural ao conteúdo de uma página da web, facilitando a 
compreensão tanto para os navegadores quanto para os desenvolvedores e usuários. Aqui estão alguns exemplos de tags 
semânticas avançadas e suas funções:
• <header>: Encontrado no topo da página ou de cada seção principal, o cabeçalho contém informações importantes, como o 
título da página, logotipo e possivelmente links de navegação.
• <main>: Esta tag é essencial para definir o conteúdo principal da página. Ele contém o núcleo do conteúdo que os visitantes 
estão procurando, como artigos, postagens de blog, produtos em uma loja online, etc.
• <footer>: Localizado no final da página, o rodapé contém informações adicionais, como links de contato, políticas de 
privacidade, direitos autorais e outras informações relevantes. É uma parte importante para a conclusão da experiência do 
usuário na página.
• <nav>: Embora seja encontrado no topo ou no cabeçalho da página em muitos sites, a seção de navegação é considerada 
menos crucial do que o <main> e <footer>, pois fornece acesso a outras partes do site, mas não é o foco principal do 
conteúdo.
• <article>: Usado para conteúdo independente e autocontido, como postagens de blog ou notícias, o <article> é importante, 
mas pode não estar presente em todas as páginas de um site, dependendo do tipo de conteúdo que está sendo exibido.
• <section>: Embora a tag <section> seja usada para agrupar conteúdo relacionado semanticamente, ela pode ser vistacomo 
menos essencial na estrutura geral de um site. No entanto, é útil para organizar o conteúdo em partes distintas, como 
capítulos de um livro ou seções de uma página.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (2 / 3)
000 000
200
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma <div> em HTML é um elemento de divisão genérico que é usado para agrupar e estruturar outros elementos HTML em 
uma página da web. O nome "div" é uma abreviação de "divisão". A tag <div> não possui significado semântico específico e é 
frequentemente usada como um contêiner genérico para outros elementos, permitindo aos desenvolvedores agrupar e estilizar 
partes específicas de uma página da web.
Principais Características da <div>:
• Semântica Neutra: Ao contrário de tags como <header>, <footer>, <nav>, etc., que têm significado semântico específico, a 
<div> não tem significado inerente. Ela é usada principalmente para fins de organização e estilização.
• Versatilidade: A <div> pode ser usada em uma variedade de contextos e para diversos fins. Por exemplo, ela pode ser usada 
para criar layouts de página, agrupar elementos para estilização com CSS, ou envolver partes específicas do conteúdo para 
manipulação com JavaScript.
• Bloco de Construção: A <div> é frequentemente usada como um bloco de construção básico para criar estruturas mais 
complexas em uma página da web. Por exemplo, um desenvolvedor pode usar várias <div>s para criar colunas em um layout 
de página.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (3 / 3)
000 000
201
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CONSIDERAÇÕES FINAIS
• Semântica Adequada: Use as tags semânticas de acordo com a função semântica do conteúdo. Por exemplo, o <header> 
deve ser usado apenas para o cabeçalho da página, não para cabeçalhos de seções individuais.
• Organização Lógica: Organize o conteúdo da página de forma lógica e hierárquica. Use as tags semânticas para refletir a 
estrutura lógica do conteúdo da página.
• Acessibilidade: Certifique-se de que a estrutura da sua página é acessível a todos os usuários, incluindo aqueles que usam 
tecnologias assistivas. Use as tags semânticas de forma apropriada para melhorar a acessibilidade do seu site.
• Manutenção e Legibilidade do Código: Evite o uso excessivo de <div>s aninhadas e estruturas complicadas que possam 
tornar o código difícil de manter e entender. Mantenha o código limpo e organizado.
Módulo 5 – Formulários (1 / 5)
000 000
202
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Um formulário em HTML é um elemento de marcação usado para criar campos interativos em uma página da web, onde os 
usuários podem inserir e enviar informações. Ele permite que os visitantes forneçam dados, como texto, números, seleções de 
opções, caixas de seleção e botões de rádio.
Os formulários HTML são criados usando a tag <form> e contêm vários elementos de entrada, como <input>, <textarea>, 
<select>, entre outros. Quando o usuário preenche os campos e clica no botão de envio dentro do formulário, os dados são 
geralmente enviados para um servidor web para processamento adicional.
Os formulários HTML são uma parte essencial do desenvolvimento da web, pois são usados em uma variedade de cenários, 
desde simples caixas de pesquisa até formulários de registro complexos.
A tag <form> é usada para criar um formulário em uma página da web. Ela envolve um conjunto de elementos de entrada, 
como campos de texto, botões de rádio, caixas de seleção e botões de envio.
• action: Este atributo especifica para onde os dados do formulário serão enviados quando o usuário clicar no botão de envio. 
Pode ser um URL relativo ou absoluto.
• method: Este atributo especifica como os dados do formulário serão enviados. Ele pode ter um dos dois valores: "get" ou 
"post". Quando definido como "get", os dados são anexados à URL como parâmetros de consulta. Quando definido como 
"post", os dados são enviados no corpo da solicitação HTTP.
Módulo 5 – Formulários (2 / 5)
000 000
203
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Elementos de entrada: Dentro da tag <form>, você pode incluir diversos elementos de entrada, como <input>, <textarea>, <select>, 
etc. Esses elementos coletam informações dos usuários.
A tag <input> é um dos elementos mais versáteis em HTML, usada para criar diversos tipos de campos de entrada em formulários. Aqui 
estão mais detalhes sobre a tag <input>:
• type: Este é um atributo obrigatório que define o tipo de campo de entrada que o elemento <input> representa. Existem vários valores 
possíveis para o atributo "type", incluindo:
• text: Cria um campo de texto simples onde os usuários podem digitar texto.
• password: Cria um campo de senha onde os caracteres digitados são ocultados.
• checkbox: Cria uma caixa de seleção que permite aos usuários selecionar uma ou mais opções.
• radio: Cria um botão de rádio que permite aos usuários selecionar apenas uma opção de um conjunto de opções.
• submit: Cria um botão de envio que envia o formulário quando clicado.
• file: Cria um campo de entrada para selecionar arquivos para upload.
• email, number, date, url, entre outros: Esses tipos específicos de entrada fornecem validação e comportamento específicos para 
tipos específicos de dados.
• name: Este atributo é usado para identificar o campo quando o formulário é enviado para o servidor. Cada campo de entrada deve ter 
um nome exclusivo dentro do formulário.
• id: O atributo "id" é opcional, mas útil para associar um rótulo (usando a tag <label>) a um campo de entrada. Também é útil para 
selecionar e manipular o campo usando JavaScript ou CSS.
• value: Este atributo define o valor inicial do campo de entrada. Para campos de texto, é o texto predefinido. Para caixas de seleção e 
botões de rádio, é o valor que será enviado para o servidor se o campo estiver marcado.
• placeholder: Este atributo é opcional e fornece um texto de exemplo que desaparece quando o usuário começa a digitar no campo. 
Ele é útil para fornecer dicas sobre o que deve ser inserido no campo.
• required: Este atributo é usado para tornar um campo obrigatório. Se presente, o formulário não pode ser enviado até que o campo 
seja preenchido.
Módulo 5 – Formulários (3 / 5)
000 000
204
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• name: Cada elemento de entrada dentro do formulário deve ter um atributo "name" que identifica o campo no servidor quando o 
formulário é enviado. Isso é usado para acessar os dados enviados pelo usuário.
A tag <label> em HTML é usada para associar um rótulo descritivo a um elemento de entrada, como um campo de texto, uma caixa de 
seleção ou um botão de opção. Aqui estão alguns detalhes sobre a tag <label>:
• For: O atributo "for" da tag <label> especifica qual elemento de entrada ela está associada. O valor do atributo "for" deve ser o mesmo 
que o valor do atributo "id" do elemento de entrada. Isso conecta o rótulo ao campo de entrada e oferece alguns benefícios 
importantes, como:
• Quando um usuário clica no rótulo, o navegador coloca o foco no campo de entrada associado.
• Torna os formulários mais acessíveis, facilitando a seleção do campo de entrada para usuários que usam tecnologias assistivas, 
como leitores de tela.
• Conteúdo: O conteúdo dentro da tag <label> é o texto descritivo que será exibido na interface do usuário.
Módulo 5 – Formulários (4 / 5)
000 000
205
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos utilizar de exemplo para construirmos o nosso formulário, o Newsletter do site da Hashtag:
Então vamos adicionar um novo input que será responsável pelo email.
O atributo placeholder em HTML é usado em elementos de entrada, como <input> e <textarea>, para fornecer um texto de exemplo ou 
uma dica sobre o tipo de informação que se espera que seja inserida nesse campo.
O texto fornecido no atributo placeholder geralmente dá uma pista ao usuário sobre o formato ou o tipo de informação que deve ser 
inseridono campo. Por exemplo, um campo de entrada de data pode ter um placeholder como "DD/MM/AAAA", enquanto um campo de 
entrada de e-mail pode ter um placeholder como "exemplo@dominio.com".
Módulo 5 – Formulários (5 / 5)
000 000
206
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando um botão está vinculado ao envio (submit) de um formulário em HTML, significa que clicar nesse botão irá enviar os dados 
preenchidos no formulário para o servidor especificado na tag <form>. Isso é útil para permitir que os usuários enviem os dados do 
formulário quando estiverem prontos.
Normalmente, um botão vinculado ao envio de um formulário é do tipo <input> com o atributo type definido como "submit" ou 
"button", ou do tipo <button> com o atributo type definido como "submit".
Se o botão estiver fora da tag <form>, ele não será automaticamente vinculado ao envio do formulário, a menos que seja feito por meio 
de JavaScript.
Módulo 5 – Tabelas (1 / 6)
000 000
207
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma tabela em HTML é uma estrutura organizada de linhas e colunas usada para exibir dados de forma tabular em uma 
página da web. Ela é criada usando a tag <table> e consiste em várias outras tags que definem partes diferentes da tabela. 
Aqui estão os elementos principais de uma tabela em HTML:
• <table>: Esta é a tag principal que envolve toda a tabela. Ela contém todas as outras tags que definem a estrutura da tabela.
• <tr>: Esta é a tag que define uma linha da tabela. Ela deve ser usada dentro da tag <table>. Cada linha da tabela contém 
uma ou mais células.
• <td>: Esta é a tag que define uma célula de dados em uma tabela. Ela deve ser usada dentro da tag <tr>. O conteúdo de 
cada célula é exibido dentro dela.
• <th>: Similar à tag <td>, <th> define uma célula de cabeçalho em uma tabela. É usada dentro da tag <tr> para criar uma 
linha de cabeçalho. O texto dentro de uma célula de cabeçalho é geralmente exibido em negrito e centralizado por padrão.
• Atributos de estilização: Você pode usar atributos de estilo, como border, cellpadding, cellspacing, entre outros, na tag 
<table> para controlar a aparência e o espaçamento da tabela.
Módulo 5 – Tabelas (2 / 6)
000 000
208
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro de uma tabela HTML, a tag <caption> é usada para fornecer um título ou uma legenda descritiva para a tabela. Esta tag 
é opcional e deve ser colocada imediatamente após a tag de abertura <table> e antes das tags de <thead>, <tbody>, <tfoot> 
ou qualquer outra tag de conteúdo da tabela.
Agora vamos construir algumas linhas dentro da nossa tabela, e usaremos a tag <tr> (table row). Dentro de uma linha da 
tabela precisamos adicionar outro elemento, a tag <td> (table data), que é o local para adicionar os dados.
Módulo 5 – Tabelas (3 / 6)
000 000
209
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos continuar adicionando informações e analisando o comportamento dos nossos elementos dentro da nossa tabela:
Para melhorarmos nossa estrutura de tabela, vamos retirar a legenda armazenada na caption, e adicionar um elemento <tbody>.
A tag <tbody> em HTML é usada para agrupar o conteúdo das células de uma tabela que contêm os dados principais da tabela. Ela é 
usada em conjunto com as tags <table> e <tr>, que definem a estrutura geral da tabela e suas linhas, respectivamente.
Módulo 5 – Tabelas (4 / 6)
000 000
210
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <thead> em HTML é usada para definir o cabeçalho de uma tabela. Ela agrupa as linhas de uma tabela que contêm os títulos das 
colunas ou outras informações importantes relacionadas ao conteúdo da tabela.
O uso da tag <thead> é uma prática recomendada em HTML, pois ajuda a melhorar a acessibilidade da tabela e fornece um contexto 
claro para os leitores de tela e outros dispositivos assistivos. Além disso, contribui para a semântica do código HTML, tornando-o mais 
compreensível tanto para os desenvolvedores quanto para os motores de busca.
Dentro da tag <thead>, cada linha (<tr>) geralmente contém células de cabeçalho (<th>) que representam os títulos das colunas da 
tabela.Então será usada em conjunto com a tag <th>, que representa as células de cabeçalho em uma tabela HTML. A tag <thead> 
agrupa todas as linhas que contêm os cabeçalhos das colunas, e esses cabeçalhos são definidos com a tag <th>.
Módulo 5 – Tabelas (5 / 6)
000 000
211
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <tfoot> em HTML é usada para definir o rodapé de uma tabela. Ela agrupa as linhas que contêm informações de rodapé, como 
totais, sumários ou outras informações relevantes para o conteúdo da tabela.O uso da tag <tfoot> é útil para fornecer informações de 
resumo ou totais no final de uma tabela, ajudando a destacar os resultados mais importantes.
A tag <colgroup> em HTML é usada para agrupar uma ou mais colunas de uma tabela HTML. Ela é útil quando você deseja aplicar 
estilos ou atributos a várias colunas de uma vez, em vez de ter que aplicá-los individualmente a cada célula de uma coluna.
Módulo 5 – Tabelas (6 / 6)
000 000
212
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <tfoot> em HTML é usada para definir o rodapé de uma tabela. Ela agrupa as linhas que contêm informações de rodapé, como 
totais, sumários ou outras informações relevantes para o conteúdo da tabela.O uso da tag <tfoot> é útil para fornecer informações de 
resumo ou totais no final de uma tabela, ajudando a destacar os resultados mais importantes.
Aqui, a tag <colgroup> está sendo usada para definir um grupo de colunas em uma 
tabela HTML. Dentro dessa tag, são definidas três colunas usando as tags <col>.
• A primeira coluna (<col>) está recebendo um estilo específico de background 
(background-color: red;). Isso significa que todas as células dessa coluna terão um 
fundo vermelho.
• As duas colunas subsequentes (<col>) não têm estilos ou atributos específicos 
definidos. Isso significa que elas não terão nenhuma formatação adicional aplicada a 
elas, então seguirão o estilo padrão definido pela tabela ou qualquer outro estilo CSS 
aplicado globalmente.
O uso de <colgroup> e <col> é útil para aplicar estilos ou atributos a várias colunas de 
uma vez, em vez de ter que aplicá-los individualmente a cada célula de uma coluna. Isso 
pode ajudar a simplificar o código HTML e tornar a formatação mais consistente em uma 
tabela.
Módulo 5 – Iframe (1 / 4)
000 000
213
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O conceito de "embedar" está intimamente relacionado ao uso do elemento <iframe> em HTML.
O elemento <iframe> é uma ferramenta fundamental para incorporar conteúdo de outras fontes em uma página da web. Ele permite 
que você "embede" documentos HTML completos ou qualquer outro tipo de conteúdo, como vídeos, mapas, widgets de mídia social, 
entre outros.
Ao utilizar <iframe>, você está essencialmente incorporando um documento HTML externo dentro do documento atual. Isso é muito 
útil para integrar conteúdos de diferentes fontes em uma única página da web.
Por exemplo, se você quiser "embedar" um vídeo do YouTube em sua página, você pode usar um <iframe> com o código fornecido 
pelo YouTube para incorporar o vídeo diretamente em sua página. Da mesma forma, se você quiser "embedar" um mapa do Google, 
você pode usar um <iframe> com o código fornecido pelo Google Maps para incorporar o mapa em sua página.
Portanto, o elemento <iframe> é uma ferramenta poderosa para o processo de "embedar" conteúdo de fontes externas em uma 
página da web, permitindo uma integração flexível e eficiente de diferentes tipos de mídia e conteúdo.
O elemento <iframe> em HTML (Inline Frame) é usado para incorporar outro documento HTML dentro do documento atual. Esses 
documentos podem ser de qualquer tipo, incluindo HTML, XML, SVG e até mesmo arquivos de vídeo ou áudio.
Módulo 5 – Iframe (2 / 4)
000 000
214
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você usa o elemento <iframe>em HTML e define o atributo src com um URL específico, o navegador realmente carrega e 
exibe o conteúdo desse URL dentro da janela do <iframe>, assim como um navegador separado faria. No entanto, há algumas 
diferenças importantes a serem observadas:
• Contido dentro da página pai: O conteúdo carregado dentro do <iframe> está contido dentro da página pai. Isso significa que, 
embora o conteúdo seja exibido dentro do <iframe>, ele faz parte da página principal e não é um navegador independente.
• Limitações de segurança: Devido às políticas de segurança do navegador, o conteúdo dentro do <iframe> tem algumas restrições.
Por exemplo, scripts dentro do <iframe> geralmente têm um escopo restrito e não podem interagir livremente com a página pai.
• Controle de tamanho: Você pode definir o tamanho do <iframe> usando os atributos width e height. Isso permite que você 
controle o espaço ocupado pelo conteúdo carregado dentro do <iframe> dentro da página pai.
Módulo 5 – Iframe (3 / 4)
000 000
215
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Um exemplo são os vídeos de youtube que carregamos na página da Hashtag, que são no formato de iframe.
Módulo 5 – Iframe (4 / 4)
000 000
216
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• src: Especifica o URL do recurso a ser incorporado no <iframe>. Por exemplo: <iframe src="pagina.html"></iframe>.
• width: Define a largura do <iframe>. Pode ser especificado em pixels (por exemplo, <iframe width="500">) ou em porcentagem do 
tamanho da janela do navegador (por exemplo, <iframe width="50%">).
• height: Define a altura do <iframe>. Assim como o atributo width, pode ser especificado em pixels ou em porcentagem (por 
exemplo, <iframe height="300"> ou <iframe height="50%">).
• frameborder: Controla a exibição da borda ao redor do <iframe>. Um valor de "0" remove a borda, enquanto "1" a exibe. Exemplo: 
<iframe frameborder="0"></iframe>.
• scrolling: Define se barras de rolagem são exibidas dentro do <iframe>. Valores possíveis são "yes" para exibir barras de rolagem, 
"no" para ocultá-las e "auto" para exibir barras de rolagem apenas quando necessário. Exemplo: <iframe scrolling="no"></iframe>.
• sandbox: Este atributo permite restringir o comportamento do documento incorporado usando uma lista de restrições. Isso é útil 
para evitar ataques de scripts maliciosos. Exemplo: <iframe sandbox="allow-same-origin allow-scripts"></iframe>.
• name: Define um nome para o <iframe>, que pode ser usado como o alvo para links de destino. Exemplo: <iframe 
name="meu_iframe"></iframe>.
• allowfullscreen: Permite ou nega ao documento dentro do <iframe> a capacidade de entrar no modo de tela cheia. Exemplo: 
<iframe allowfullscreen></iframe>.
Módulo 5 – Desafio 1 - Apresentando o Desafio (1 / 1)
000 000
217
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seja bem-vindo ao Desafio 1 do módulo "Aprofundando no HTML". Este desafio é uma oportunidade para você colocar em prática os 
conhecimentos adquiridos até agora e enfrentar novos desafios.
Para começar, você precisará baixar o arquivo "desafio-1.html" da pasta "Do zero". Dentro deste arquivo, você encontrará todas as 
informações necessárias para realizar as tarefas propostas.
Prepare-se para aplicar conceitos de semântica HTML, estilização inline, abreviações, citações com links, manipulação de código CSS, 
criação de tabelas e formulários HTML, entre outras habilidades.
Dentro do arquivo, encontrará instruções detalhadas sobre como aplicar cada elemento no desafio.
Módulo 5 – Desafio 1 - Construindo juntos (1 / 7)
000 000
218
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo as instruções do desafio, através do arquivo desafio-1.txt,e a primeira tarefa é que vamos precisar dividir a nossa página de 
acordo com a estrutura que aprendemos até aqui. Logo, teremos que introduzir as três grandes seções de uma página, além das 
seções menores.
A primeira tag semântica que vamos utilizar é para o Cabeçalho, nossa tag <header>. O nosso cabeçalho será composto pelas 
seguintes estruturas:
O nosso elemento header, irá ser aplicado envolvendo o elemento svg e a ul, que possui links de navegação
Módulo 5 – Desafio 1 - Construindo juntos (2 / 7)
000 000
219
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Entendendo como o nosso cabeçalho está estruturado, e como adicionamos o elementos header para melhorar sua semântica, 
também vamos adicionar a tag nav, para envolver nossos links de navegação que o nosso cabeçalho possui.
Agora está na hora de localizarmos na estrutura do nosso site o que se refere ao nosso Rodapé e adicionaremos o elemento footer.
Módulo 5 – Desafio 1 - Construindo juntos (3 / 7)
000 000
220
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora que adicionamos as tags que representam nosso cabeçalho e nosso rodapé, sabemos que todo o restante do conteúdo será 
envolvido em uma tag main, e vamos começar a adicionar as seções que cada parte representa.
Para identificar cada seção, vamos utilizar os elementos de h2 que estão separando os nossos conteúdos, exceto pela primeira seção 
que irá iniciar no elemento do h1. E todos os demais h2 serão envolvidos por uma tag section.
Módulo 5 – Desafio 1 - Construindo juntos (4 / 7)
000 000
221
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é que a logo da MDN deverá ter 150px de largura, mas como será a única estilização que vamos fazer na página, 
não é necessário criar um arquivo css para isso. Vamos utilizar a estilização inline, dentro do elemento svg e adicionar a propriedade 
width.
A seguir vamos seguir a instrução: No primeiro parágrafo que mencionarmos "HTML" ou "CSS", você deverá criar uma abreviação 
com o nome completo da linguagem.
Módulo 5 – Desafio 1 - Construindo juntos (5 / 7)
000 000
222
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Coloque o ano de criação do HTML dentro de uma tag que os computadores consigam entender.
Agora vamos adicionar um citação com o link da citação junto ao elemento de parágrafo, vamos adicionar um elemento âncora 
que envolva a citação e adicionar também a tag adequada para citação, nesse caso <cite>:
Módulo 5 – Desafio 1 - Construindo juntos (6 / 7)
000 000
223
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos colocar em todas as tags em HTML para 
serem exibidas na página final da forma correta, isto é, 
como um código.
E na segunda citação da página, você deverá usar uma 
citação inline. Utilizando a tag <q>.
A próxima modificação será referente ao código em CSS dentro 
da página que deverá ser retratado exatamente do jeito que ele 
seria visualizado dentro de um arquivo CSS.
Logo no parágrafo seguinte, fazemos uma referência ao código 
em CSS. Retrate o seletor como se fosse uma variável.
Módulo 5 – Desafio 1 - Construindo juntos (6 / 7)
000 000
224
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos transformar o modelo de tabela 
em uma tabela HTML.
Vamos utilizar a tag Iframe para criarmos o contexto de 
navegação para referenciar um site, assim como fizemos no 
exemplo da aula.
Módulo 5 – Desafio 1 - Construindo juntos (7 / 7)
000 000
225
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Substitua os parágrafos utilizados para retratar o 
formulário pelo formulário em si.
E para finalizar a página use a forma adequada de retratar 
informações de contato.
Módulo 5 – Desafio 2 - Explicando as novidades (1 / 1)
000 000
226
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Neste módulo "Aprofundando no HTML", você já percorreu um caminho significativo de aprendizado, explorando as 
nuances e capacidades avançadas que o HTML oferece. Agora, chegou o momento de colocar em prática tudo o que foi 
absorvido. Este é o Desafio 2, uma oportunidade para consolidar seus conhecimentos ao aplicar as tags e componentes 
avançados aprendidos, aprimorando a página que você construiu até o momento.
O desafio é claro: transformar a Home da Hashtag, respeitandoa estrutura e o conteúdo da página real, enquanto 
incorpora os seguintes focos do módulo:
Citações, Abreviações e Detalhes de Contato
• blockquote, q, cite e address
Códigos e Datas
• code, pre, var, kbd, samp e time:
Estrutura dos Documentos
• header, nav, main, article, aside, section e footer:
• div e span:
Formulários
Tabelas
iFrames
Ao longo deste desafio, sua tarefa é integrar essas diversas tags e componentes na página da Home da Hashtag. A meta é 
não apenas aplicar esses elementos, mas também assegurar que a página resultante seja funcional, esteticamente 
agradável e fiel à estrutura original.
Este é o momento de demonstrar seu domínio do HTML, transformando o conhecimento teórico em prática efetiva. 
Mergulhe no desafio, explore sua criatividade e técnica, e veja a página ganhar vida com uma nova profundidade e 
riqueza de detalhes.
Divirta-se e bom trabalho!
Módulo 5 – Desafio 2 - Completando o Cabeçalho (1 / 1)
000 000
227
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No HTML, a semântica é fundamental para organizar o conteúdo de uma página de forma que seja compreensível tanto para 
humanos quanto para máquinas, como motores de busca e leitores de tela. Então vamos envolver nosso cabeçalho na tag header 
e a lista de navegação em nav.
Módulo 5 – Desafio 2 - Completando a Seção Hero (1 / 3)
000 000
228
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira tag semântica que vamos adicionar nessa aula é a tag main, que envolverá todo o conteúdo do nosso site com 
exceção do nosso cabeçalho, que já utilizamos a tag header para identificar, e o nosso rodapé.
Agora vamos adicionar a tag section para envolver toda a nossa seção Hero. Lembrando que cada seção do nosso site, depois 
colocaremos dentro um tag section, para separar seus conteúdos semanticamente.
Módulo 5 – Desafio 2 - Completando a Seção Hero (2 / 3)
000 000
229
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Muitas estruturas vão estar relacionadas a construção do CSS, mas conseguimos observando o site, entender como alguns 
elementos estão estruturados, que no caso da seção hero, conseguimos verificar que as informações estão em um bloco separado 
do vídeo. Vamos utilizar a estrutura de uma div, pois ela é um bloco genérico.
Módulo 5 – Desafio 2 - Completando a Seção Hero (3 / 3)
000 000
230
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos substituir a imagem que está representando o vídeo da nossa seção, pelo elemento que aprendemos no módulo que é o 
Iframe, e para termos todas as informações dele correta, vamos utilizar a ferramenta do desenvolvedor e copiar a referência do 
elemento e substituir no nosso arquivo HTML.
Módulo 5 – Desafio 2 - Completando a Seção Conteúdos Gratuitos (1 / 2)
000 000
231
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira modificação que vamos na nossa seção conteúdos 
gratuitos, é envolver todos os seus elementos dentro da tag 
section, para definirmos e separar de forma semântica a nossa 
seção.
Observar dentro da seção os elementos que estão agrupados e 
envolve-los em uma div, cada grupo terá um elemento div 
encapsulando.
O bloco de Treinamentos também será encapsulado por uma 
div, assim como o da Programação.
Módulo 5 – Desafio 2 - Completando a Seção Conteúdos Gratuitos (2 / 2)
000 000
232
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro do bloco de Treinamentos e Programação, vamos também encapsular as âncoras, lembrando que cada um 
desses blocos será feito o mesmo processo :
Módulo 5 – Desafio 2 - Completando a Seção Diferenciais (1 / 2)
000 000
233
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como fizemos nas demais seções, vamos envolver toda 
a nossa seção diferencias dentro de um elementos 
section, e depois analisaremos quais elementos estão 
estão agrupados e quais outras mudanças vamos 
precisar realizar nessa seção.
Dentro dessa seção, teremos 5 subdivisões que criaremos 
utilizando o elemento div, para envolver cada uma delas.
Módulo 5 – Desafio 2 - Completando a Seção Diferenciais (2 / 2)
000 000
234
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com as subdivisões da seção: Vamos envolver todas as imagens das empresas em 
uma única div.
Módulo 5 – Desafio 2 - Completando a Seção O que falam e Na mídia (1 / 2)
000 000
235
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa aula vamos modificar as seções O que falam e 
Na mída, o primeiro passo é envolver cada uma das 
seções por uma tag section.
Agora vamos começar as subdivisões na seção o que 
falam:
Módulo 5 – Desafio 2 - Completando a Seção O que falam e Na mídia (2 / 2)
000 000
236
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos começar as subdivisões na seção na mídia:
Módulo 5 – Desafio 2 - Completando a Seção Blog da Hashtag (1 / 1)
000 000
237
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção do Blog da Hashtag, vamos englobar toda a seção dentro da tag section, e depois observar as suas subdivisões, 
que no caso dessa seção, conseguimos visualizar através de caixas bem definidas de cada Post.
Cada post será envolvido por uma div.
Módulo 5 – Desafio 2 - Completando a Seção Como ajudar (1 / 1)
000 000
238
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção Como ajudar, vamos encapsular a seção inteira dentro da tag section, e verificar que ela possui um bloco já definido pelo 
elemento <ul> que engloba toda a sua lista, e vamos criar uma subdivisão para os elementos de parágrafos ficarem agrupados:
Módulo 5 – Desafio 2 - Completando a Seção Minicurso (1 / 2)
000 000
239
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Até o momento aprendemos tags importantes para estruturar o HTML, na seção minicurso vamos utilizar a tag form para 
modificarmos os nossos campos de entrada Nome e E-mail, além de lembrando que essa seção será encapsulado primeiramente 
por uma tag section.
Vamos criar nosso formulário com a palavra form, e substituir alguns dos elementos, criando dois inputs com suas respectivas 
labels.
Módulo 5 – Desafio 2 - Completando a Seção Minicurso (2 / 2)
000 000
240
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é envolver cada um dos nossos inputs e 
labels dentro de uma div.
E para finalizar a nossa seção minicurso, vamos adicionar um 
botão de envio dentro do nosso formulário.
Módulo 5 – Desafio 2 - Completando o Rodapé (1 / 3)
000 000
241
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora que finalizamos o header/cabeçalho e todas as seções do nosso main, vamos adicionar ao nosso rodapé, a tag footer que 
encapsulará todos os elementos do rodapé.
E vamos analisar no site da Hashtag, como estão agrupados os elementos desse footer, para sabermos quais tags unir com uma div, 
ou com uma tag semântica que aprendemos ao longo desse módulo.
Módulo 5 – Desafio 2 - Completando o Rodapé (2 / 3)
000 000
242
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira parte será dividir em subdivisões utilizando a tag div, com exceção a estrutura Newsletter que será um formulário e para 
isso utilizaremos a tag form.
Módulo 5 – Desafio 2 - Completando o Rodapé (3 / 3)
000 000
243
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora para finalizarmos o nosso rodapé, vamos refatorar os elementos do Newsletter e modificar para um formulário.
Módulo 6
APROFUNDANDO NO CSS
APROFUNDANDO NO CSS
APROFUNDANDO NO CSS
244
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Apresentando o módulo (1 / 1)
000 000
245
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Bem-vindo ao módulo "Aprofundando no CSS"! Neste módulo, você irá explorar os aspectos mais robustos e avançados do CSS,
e como transformar suas páginas web em experiências visuais dinâmicas e profissionais. 
Temas abordados:
• Especificidade e Seletores: Você aprenderá novos seletores que lhe darão maior controle sobre os elementos.
• Pseudo-classes: Aplique estilos a elementosem estados específicos, com quando tocados pelo mouse.
• Pseudo-elementos: Aprenda a estilizar partes específicas de um elemento, como a primeira letra ou linha da sua página.
• Seletor Universal: Aplique estilos a todos os elementos de uma página, simplificando a manutenção do CSS.
• Box Model: Entenda como o CSS interpreta e manipula as "caixas" que compõem os elementos do seu documento.
• Espaçamentos e Dimensões: Crie espaços internos e externos entre elementos, para um design limpo e bem organizado.
• Sombras: Adicione profundidade e destaque aos seus elementos, tornando sua página mais atraente e moderna.
• Elementos Arredondados: Aprenda a criar cantos arredondados e bordas estilizadas.
• Tipos de Visualização e Posicionamento: Introdução à criação de layouts, utilizando diferentes técnicas de 
visualização e posicionamento, preparando você para projetos de design mais avançados.
Este módulo é projetado para ampliar suas habilidades em CSS, capacitando você a criar páginas web elegantes, eficientes e 
acessíveis. Prepare-se para dominar técnicas essenciais que transformarão suas habilidades de design web!
Módulo 6 – Especificidade no CSS (1/7)
000 000
246
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando há múltiplas regras conflitantes para um mesmo elemento, a especificidade determina qual regra de estilo 
será aplicada. No CSS, a especificidade age como uma espécie de regra de importância que o navegador de internet irá usar
para decidir qual estilo aplicar.
Exemplo:
No código abaixo podemos ver um seletor h1 que indica que a cor do texto deve ser vermelha. Porém, um seletor de ID informa 
que a cor deve ser azul. Qual será a cor do texto "Olá, mundo"?
Módulo 6 – Especificidade no CSS (2/7)
000 000
247
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No CSS, existe uma hierarquia de seletores que determina quais regras de estilo terão prioridade quando várias regras se aplicam ao 
mesmo elemento. Entender essa hierarquia é crucial para criar estilos que funcionem como esperado.
 Menor Maior
Prioridade Prioridade
Da esquerda para a direita, podemos visualizar a importância que cada tipo de seletor tem no momento de decidir sua especificidade.
Benefícios de entender a Hierarquia de Seletores:
• Saber qual regra será aplicada facilita a manutenção e a atualização do CSS.
• Crie estilos mais eficientes, evitando conflitos de regras.
• Tenha maior controle sobre a estilização dos elementos da sua página.
• Facilita a resolução de problemas relacionados à estilos inesperados.
Módulo 6 – Especificidade no CSS (3/7)
000 000
248
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os Seletores são:
• Universal: Este seletor serve para definir alguma característica para todos os elementos da página. Serve geralmente para definir 
padrões na página, como o tamanho padrão da fonte, por exemplo. Por ser um seletor muito geral, tem a menor prioridade.
• Tag: Aplica estilos a todos os elementos de um determinado tipo. Por exemplo, h1 estiliza todos os elementos <h1> na página.
• Classe/Pseudo-Classe: Aplicam estilos a elementos com uma classe específica ou em um estado específico. Eles são mais 
específicos que os seletores de tag e têm uma prioridade maior.
• Atributo: Os seletores de atributo selecionam elementos com um atributo específico ou um valor de atributo específico.
• ID: Aplica estilos a um elemento com um ID específico. Um ID deve ser único em uma página, então esse seletor é muito 
específico e tem uma prioridade alta.
• Inline: As regras CSS aplicadas diretamente ao elemento HTML usando o atributo style têm a maior especificidade (além das 
regras importantes). Essas regras têm prioridade máxima porque são aplicadas diretamente ao elemento. Normalmente são 
evitadas, por deixarem o código com aparência um pouco desorganizada.
• !important: A regra !important adicionada a qualquer declaração CSS faz com que essa declaração tenha a prioridade máxima, 
sobrescrevendo até mesmo seletores inline. No entanto, o uso de !important deve ser evitado, pois pode dificultar a manutenção 
do código.
Módulo 6 – Especificidade no CSS (4/7)
DICA
Quanto mais específico for o 
seletor, maior será sua prioridade 
na hierarquia. Quanto mais 
genérico, menor a prioridade do 
seletor.
000 000
249
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Menor Maior
Prioridade Prioridade
Mais genérico! Mais específico!
Módulo 6 – Especificidade no CSS (5/7)
000 000
250
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos voltar ao exemplo do início. Qual será a cor do texto "Olá, mundo!"?
Como o seletor de ID é mais especifico, ele tem uma prioridade maior que o seletor de tag. Por isso "Olá, mundo!" será azul. 
Módulo 6 – Especificidade no CSS (6/7)
000 000
251
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Da mesma forma, em algumas situações, os seletores podem especificar apenas parte da estilização de um elemento. Veja o exemplo 
abaixo:
Exemplo:
O seletor de ID tem maior prioridade que o seletor de tag, então a cor do texto será azul. No entanto, o estilo da fonte (font-style) não 
tem conflito, então ele permanece como definido no seletor de tag.
DICA
Em casos de seletores com a 
mesma prioridade e que se 
contradizem, a última regra 
declarada prevalecerá (se 
temos dois seletores h1, 
prevalece o último que foi 
declarado).
000 000
DICA
Em casos de seletores 
combinados, o seletor mais 
específico prevalecerá. Por 
exemplo, um seletor de classe e 
tag é mais prioritário que apenas 
classe.
252
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Especificidade no CSS (7/7)
Módulo 6 – Trabalhando com espaçamentos (1/7)
000 000
253
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As margens (margin) são os espaços externos ao redor 
dos elementos. Elas são usadas para criar 
espaçamento entre elementos, ajudando a criar 
layouts bem organizados e visualmente agradáveis. O 
exemplo abaixo tem uma margem de 25px, e ela é 
representada pela cor alaranjada.
Exemplo:
Propriedades de margem:
A expressão margin define a margem para os lados de um 
elemento, podendo ser usada com um, dois ou quatro valores.
• Um único valor aplica a margem em todos os lados.
Módulo 6 – Trabalhando com espaçamentos (2/7)
000 000
254
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Dois valores aplicará o primeiro valor às margens verticais (topo e base), e o segundo valor às margens horizontais (direita e 
esquerda).
• Quatro valores aplicará os valores à todos os lados, seguindo cada valor respectivamente às margens superior (topo), direita, 
inferior (base) e esquerda.
Módulo 6 – Trabalhando com espaçamentos (3/7)
000 000
255
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O padding é o espaço interno ao redor do conteúdo 
de um elemento, dentro de suas bordas. Ele é usado 
para criar espaçamento interno e separar o conteúdo 
das bordas do elemento. O exemplo abaixo tem 
padding de 10px, como pode notar pela 
representação verde.
Exemplo:
Adicionando uma cor de fundo ao elemento, visualizar como o 
padding afeta visualmente o layout da página torna-se mais fácil
Exemplo sem padding:
Exemplo com padding de 10px:
Note como os espaços internos do fundo colorido até o texto se 
tornaram maiores. O padding afastou o conteúdo interno das 
bordas.
Módulo 6 – Trabalhando com espaçamentos (4/7)
000 000
256
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As propriedades de padding são similares às de margin, ou seja, pode ser usado de forma parecida com um, dois ou quatro valores:
• Um valor aplica o mesmo padding em todos os lados.
Módulo6 – Trabalhando com espaçamentos (5/7)
000 000
257
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Com dois valores, será aplicado o primeiro valor ao padding vertical (topo e base), e o segundo valor ao padding horizontal 
(esquerda e direita).
Módulo 6 – Trabalhando com espaçamentos (6/7)
000 000
258
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Com quatro valores, será aplicado em ordem ao padding superior (topo), direito, inferior (base) e esquerdo.
Módulo 6 – Trabalhando com espaçamentos (7/7)
000 000
259
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Em situações em que seja necessário modificar apenas um 
dos espaçamentos, o CSS permite a seleção de uma borda 
específica. Tanto para margin como padding o 
funcionamento é praticamente o mesmo.
• margin-top / padding-top: Define a margem ou 
padding do topo.
• margin-right / padding-right: Define a margem ou 
padding da direita.
• margin-bottom / padding-bottom: Define a margem 
ou padding inferior.
• margin-left / margin-right: Define a margem ou 
padding da esquerda.
Módulo 6 – Dimensões e unidades no CSS (1/8)
000 000
260
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com o CSS, os elementos de uma página podem ter suas dimensões definidas com o uso de propriedades como width e height.
• width: Define a largura de um elemento.
• height: Define a altura de um elemento.
Exemplo:
Módulo 6 – Dimensões e unidades no CSS (2/8)
000 000
261
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para tratar de dimensões no CSS é necessário fazer uso de uma unidade tamanho. Dentro do CSS temos unidades absolutas e 
unidades relativas.
• Unidades absolutas: Definem o tamanho de forma invariável e sem depender de outro elemento. Por exemplo, um elemento de 
20 pixels tem a mesma medida em qualquer tipo de dispositivo.
• Tipos de unidades absolutas: Pixels (px), centímetros (cm), milímetros(mm), e outras, sendo medidas como centímetros e 
milímetros menos usadas em layouts web.
• Unidades relativas: O tamanho é variável, sendo determinado com base em um outro elemento, se ajustando dinamicamente. 
Elas permitem que os elementos sejam responsivos, ou seja, se ajustem à diferentes tamanhos de tela ou de diferentes 
configurações. Os principais tipos são:
• Viewport Height (vh): Medida relativa à altura do navegador. O valor informado define a altura do elemento como uma 
porcentagem da altura total da viewport (janela de visualização ou navegador).
• Viewport Width (vw): Medida relativa à largura do navegador. O valor informado define a largura do elemento como uma 
porcentagem da largura total da viewport (janela de visualização ou navegador).
 Como funciona?
• 1vh corresponde a 1% da altura do navegador.
• 50vh corresponde a 50% da altura do navegador.
• 100vh corresponde a 100% da altura do navegador.
Outros valores aplicarão a porcentagem correspondente.
 A mesma lógica irá se aplicar ao vw, mudando apenas que o tamanho é relativo à largura do navegador, então 1vw é 1% da largura 
do navegador e assim por diante para outros valores.
Módulo 6 – Dimensões e unidades no CSS (3/8)
000 000
262
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo de vh e vw:
Note que apesar da mudança no viewport (tamanho da janela), a caixa laranja manteve as proporções (ocupou 100% da altura da tela 
e 30% da largura da mesma). 
Módulo 6 – Dimensões e unidades no CSS (4/8)
000 000
263
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Existem ainda outros tipos de unidade relativas:
• em: Unidade relativa ao tamanho da fonte do elemento pai. O valor indicado é multiplicado pelo tamanho da fonte (font-size) do 
elemento pai.
No bloco acima temos um <p> que está dentro de uma <div>. Diz-se então, neste caso, que a <div> é pai de <p>. Portanto, se 
utilizarmos o em como medida para o tamanho da fonte do texto “Parágrafo”, dentro de <p>, a fonte terá o número informado de 
vezes a medida da fonte estipulada para <div>. Por exemplo, se <div> tem font-size: 16px, então 2em são 32px.
Módulo 6 – Dimensões e unidades no CSS (5/8)
000 000
264
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Root em (rem): Parecido com o em, o rem tem tamanho relativo ao elemento raiz do documento, ou seja, o <html>. Então, se o em 
olha para o tamanho da fonte do elemento pai, rem olhará para o tamanho da fonte do elemento <html>. É bem útil para manter 
uma escala de tamanho de fontes consistente.
Módulo 6 – Dimensões e unidades no CSS (6/8)
000 000
265
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Porcentagem(%): Unidade também relativa ao tamanho do elemento pai. A unidade define que o tamanho correspondente deve 
ser a porcentagem indicada do tamanho do elemento pai.
Exemplo:
DICA
Apesar de em e rem serem 
relativos ao tamanho da fonte, 
seu uso pode ser aplicado à 
qualquer propriedade que 
requeira uma unidade de 
medida.
000 000
266
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Dimensões e unidades no CSS (7/8)
DICA
Para facilitar os cálculos com a 
unidade rem, uma dica é definir 
como 10px (ou 62.5%) o font-size 
do html, tornando os cálculos de 
uso subsequentes mais simples.
000 000
267
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Dimensões e unidades no CSS (8/8)
Módulo 6 – Pseudo-classes (1/6)
000 000
268
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Pseudo-classes são propriedades adicionadas à um seletor que definem um estado especial em que o elemento se encontra. Seu uso 
mais interessante é que elas definem estilos ao elemento de maneira dinâmica, ou seja, aplicam o estilo a partir do estado em que o 
elemento se encontra. 
Exemplo:
A pseudo-classe hover modifica um elemento quando o mouse passa sobre ele. No exemplo acima, o CSS modifica a cor de <p>.
Módulo 6 – Pseudo-classes (2/6)
000 000
269
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Pela grande quantidade de pseudo-classes, é mais sensato utilizar uma referência conforme suas necessidades de desenvolvimento. 
A referência da MDN (Mozilla Developer Network) pode ser bem útil: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-
classes
Entretanto, algumas pseudo-classes são mais comuns e é importante que seu uso seja mais familiarizado. Dentro destas, temos a 
LVHA, uma sigla para Link Visited Hover Active. Se trata de um grupo de pseudo-classes cujo uso é muito importante para estilizar 
as diferentes interações com links/âncoras (<a>).
• :link - Aplica estilos à links ainda não visitados.
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes
Módulo 6 – Pseudo-classes (3/6)
000 000
270
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• :visited – Aplica estilos à links que já foram visitados ao menos uma vez.
Módulo 6 – Pseudo-classes (4/6)
000 000
271
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• :hover – Aplica estilos à links quando o mouse paira sobre eles. Vale ressaltar que o :hover não tem uso exclusivo para tratamento 
de âncoras (<a>), podendo ser usado em outros tipos de elementos.
Módulo 6 – Pseudo-classes (5/6)
000 000
272
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• :active – Aplica estilos à links quando o link se torna ativo, o que significa quando o mouse efetivamente clica sobre ele.
Módulo 6 – Pseudo-classes (6/6)
000 000
273
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O CSS permite livre estilização dos links em seus diferentes estados, porém normalmente o que é feito é estilizar de maneira conjunta 
os estados :link e :visited, e os estados :hover e :active.
Módulo 6 – Pseudo-elementos (1/7)
000 000
274
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como as Pseudo-classes, os Pseudo-elementos são também propriedades adicionadas à um seletor, porém com propósito diferente. 
Os Pseudo-elementos vão servir para representar um elemento filho do seletor associado, servindo assim váriosfins, como modificar a 
primeira linha de um bloco de texto, por exemplo. O exemplo abaixo mostra uma das aplicações dos pseudo-elementos, onde o 
pseudo-elemento ::first-line é utilizado para estilizar a primeira linha de um texto.
Exemplo:
Módulo 6 – Pseudo-elementos (2/7)
000 000
275
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os principais Pseudo-elementos são:
• ::after – Adiciona conteúdo diretamente depois do conteúdo de um elemento. Frequentemente usado em combinação com a 
propriedade content.
Exemplo:
Módulo 6 – Pseudo-elementos (3/7)
000 000
276
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• ::before – Adiciona conteúdo diretamente antes do conteúdo de um elemento. Também é frequentemente usado em combinação 
com a propriedade content.
Exemplo:
DICA
Com o uso de ::after ou ::before o 
conteúdo do texto não faz parte do 
html, apesar de parecer o contrário. 
Isso faz com que aquele trecho de 
content seja não selecionável pelo 
mouse.
000 000
277
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Pseudo-elementos (4/7)
Módulo 6 – Pseudo-elementos (5/7)
000 000
278
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• ::first-letter – Estiliza a primeira letra de um bloco de texto.
Exemplo:
Módulo 6 – Pseudo-elementos (6/7)
000 000
279
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• ::first-line – Estiliza a primeira linha de um bloco de texto.
Exemplo:
Módulo 6 – Pseudo-elementos (7/7)
000 000
280
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como com as Pseudo-classes, os tipos de Pseudo-elementos são muitos e por conta disso se faz necessário consultar conforme a 
necessidade algum referência de uso dos diferentes tipos de Pseudo-elementos que são aceitos normalmente pelos navegadores. 
Recomenda-se usar quando necessário a referência da MDN: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elements
Também é recomendado evitar os tipos que tem a seguinte simbologia na referência da MDN:
• : O símbolo significa que o recurso ainda é experimental e pode não funcionar.
• (inglês) ou (en-us): Significa que o recurso está disponível apenas na língua inglesa.
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elements
Módulo 6 – Seletor universal e herança de estilos (1/5)
000 000
281
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor universal é um tipo de seletor que seleciona todos os elementos dentro do documento, permitindo aplicar um estilo geral a 
todos eles. É útil para definir estilos padrão que serão aplicados a todos os elementos de uma página. Ele é definido como um “*” 
(asterisco). No exemplo abaixo usamos o seletor universal para definir a cor de todos os elementos da página.
Exemplo:
Módulo 6 – Seletor universal e herança de estilos (2/5)
000 000
282
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vale lembrar que o seletor universal é o seletor com mais baixa prioridade dentre os seletores:
 Menor Maior
 Prioridade Prioridade
Por isso, qualquer outro seletor será mais especifico, e irá sobrescrever o estilo do seletor universal.
Exemplo:
Módulo 6 – Seletor universal e herança de estilos (3/5)
000 000
283
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma prática comum é sempre utilizar o seletor universal para resetar alguns padrões da página, permitindo então consistência de 
estilo em qualquer navegador. Essa prática é conhecida como CSS Reset.
No trecho acima nós zeramos os espaçamentos de margin e padding em todo conteúdo da página. Isso irá garantir que, 
independentemente dos padrões do navegador, o layout da página seja consistente. Posteriormente veremos ainda que mais um 
estilo pode ser adicionado para garantir essa consistência de layout em diferentes navegadores.
Módulo 6 – Seletor universal e herança de estilos (4/5)
000 000
284
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A herança de estilos é um conceito dentro do CSS onde alguns estilos aplicados a elementos pai são automaticamente passados para 
elementos filhos. Este conceito é muito importante para ajudar a estilizar páginas de maneira mais prática e coesa, permitindo que 
estilos comuns sejam aplicados aos elementos. 
Exemplo:
O elemento <body> abriga dos elementos <h1>, <h2> e <p>, fazendo destes três filhos de <body>. O Seletor body aplica o estilo “color: 
red;”, que consequentemente é herdado pelos filhos de <body>.
Módulo 6 – Seletor universal e herança de estilos (5/5)
000 000
285
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Esse tipo de herança é facilmente sobrescrito com o uso de algum seletor mais específico. Vale lembrar da regra que quanto mais 
específico o seletor, maior sua prioridade.
Exemplo:
Apesar de haver uma herança de <body> ao <h1> para que a cor seja vermelha, essa estilização é sobrescrita pelo seletor h1, já que é o 
seletor mais específico, fazendo que a cor de <h1> seja verde.
Módulo 6 – Box Model no CSS (1/5)
000 000
286
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Box Model é um conceito do CSS que nos permite entender como os elementos são dispostos em uma página web, combinando o 
conteúdo, o padding, a borda e a margem para determinar o espaço que o elemento ocupa.
É composto por 4 áreas principais:
• Content – Área onde o conteúdo é exibido.
• Padding – Espaço interno do elemento, ficando entre o conteúdo e a borda.
• Border – Linha ao redor do padding e do conteúdo, tendo algumas propriedades como largura, estilo e cor.
• Margin – Espaço fora do elemento que separa o elemento de outros. 
Módulo 6 – Box Model no CSS (2/5)
000 000
287
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo:
Note abaixo que criamos um seletor div, onde foi estabelecida uma borda de estilo sólido (solid), com largura de 2px e da cor preta. 
Colocamos ainda um padding de 1rem, que como vimos anteriormente é uma unidade de medida relativa.
Módulo 6 – Box Model no CSS (3/5)
000 000
288
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O CSS entende o Box Model em duas grandes formas:
• Content Box – É o box model padrão, onde o CSS calcula e determina o tamanho da caixa com base no conteúdo.
Exemplo:
Repare que apesar de especificarmos que a altura (height) deveria ser de 20rem (no caso, equivalente à 200px), nosso conteúdo ficou 
com um total de 224px de altura. Isso ocorreu porque o Content Box define o conteúdo como 20rem, mas é acrescido de 4px da 
borda (definida em 2px, mas ela tem altura e largura, logo 4px) e 1rem de padding (que será equivalente à 10px, mas que com altura 
e largura resultará em 20px). Isso então resulta em nosso conteúdo tendo 224px de altura.
Módulo 6 – Box Model no CSS (4/5)
000 000
289
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A outra forma é o Border Box.
• Border Box – O tamanho que o CSS irá calcular será definido com base no conteúdo, padding e borda. Isso significa que o 
tamanho especificado da box deverá abrigar todo o conteúdo, padding e borda.
Exemplo:
Note que ao utilizar box-sizing: border-box, o CSS mudou o padrão para calcular as caixas de conteúdo, e agora, mesmo mantendo 
todos os outros padrões de tamanho (padding com 1rem e borda de 2px), o nosso conteúdo manteve a altura especificada de 20rem 
(ou 200px para este caso). Esse tipo de abordagem permite um controle mais fácil do tamanho dos elementos de nossos layouts.
DICA
Utilize dos conceitos vistos até aqui 
para iniciar o desenvolvimento de 
seu layout dentro de padrões pré-
estabelecidos. Isso ajuda a manter 
seu layout consistente em qualquer 
tipo de navegador.
000 000
290
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Box Model no CSS (5/5)
Módulo 6 – Sombras (1/5)
000 000
291
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As sombras são uma poderosa ferramenta do CSS para adicionar profundidade e estilo aos layouts de suapágina web. A propriedade 
utilizada é a box-shadow e seus valores são: 
• offset-x: A posição da sombra no eixo horizontal, onde valores positivos são para a direita e negativos para a esquerda.
• offset-y: A posição da sombra no eixo vertical, respeitando também as regras de valores positivos para direita e negativos para a 
esquerda.
• blur-radius: É um parâmetro opcional, e define o raio de desfoque da sombra.
• spread-radius: Outro parâmetro opcional, ele define o raio de propagação da sombra. Isso significa que ele move o tamanho da 
sombra em relação ao elemento que gera essa sombra. Também aceita valores negativos se a intenção foi diminuir o tamanho do 
raio de propagação.
• color: A cor da sombra. Para sombras pode ser mais interessante utilizar o padrão RGBA, que permite o controle de transparência 
da cor, dando um efeito visual mais interessante.
• inset: Por padrão as sombras são sempre geradas de maneira externa ao elemento. O inset faz com que a sombra fique interna ao 
elemento e quando usado deve ser adicionado como primeiro parâmetro da propriedade.
Esses valores devem ser colocados na seguinte ordem, mantendo atenção aos valores opcionais:
Módulo 6 – Sombras (2/5)
000 000
292
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo:
Utilização mínima de sombras (sem parâmetros opcionais).
Módulo 6 – Sombras (3/5)
000 000
293
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo:
Utilização de sombras com os principais parâmetros.
Módulo 6 – Sombras (4/5)
000 000
294
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo:
Utilização de sombras com inset.
Módulo 6 – Sombras (5/5)
000 000
295
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Você pode adicionar vírgula (“,”) e dar sombras múltiplas ao elemento.
Exemplo:
Módulo 6 – Elementos arredondados (1/3)
000 000
296
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para dar um toque suave e moderno aos seus elementos, o CSS permite utilizar a propriedade border-radius para dar cantos 
arredondados aos seus elementos. Essa propriedade aceita um valor que determina quão arredondada a borda deve se tornar. Este 
valor pode estar em pixels, em ou qualquer outra unidade que vimos até aqui. Quanto maior o valor, mais arredondado o elemento 
fica.
Exemplo:
Módulo 6 – Elementos arredondados (2/3)
000 000
297
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Em elementos quadrados você consegue aumentar o valor de border-radius até que o elemento fique totalmente circular. Caso use 
porcentagens (“%”) como unidade de medida, você vai alcançar isso com valor de 50%.
Exemplo:
Módulo 6 – Elementos arredondados (3/3)
000 000
298
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dependendo das dimensões do elemento ele pode ao invés de circular, se tornar um elemento oval.
Exemplo:
Módulo 6 – Tipos de visualização (1/7)
000 000
299
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade display nos permite controlar como os elementos são exibidos numa página. Essa propriedade aceita diferentes 
valores, porém veremos aqui os principais.
• block – Uma forma de visualização em que o elemento irá ocupar todo o espaço horizontal da página e causando quebra de linha. 
Este tipo de visualização é o padrão em alguns elementos, como <h1>, <div> e <p>. Abaixo um exemplo em que <h1> está 
ocupando todo o espaço horizontal, quebrando a linha, forçando <a> para a linha abaixo.
 Exemplo:
Módulo 6 – Tipos de visualização (2/7)
000 000
300
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• inline – Nesta forma de visualização o elemento irá ocupar apenas o espaço horizontal que é necessário. Este tipo de visualização é 
o padrão em alguns elementos, como <span> e <a>. Abaixo um exemplo em que a visualização de <h1> foi modificada para que 
ocupasse apenas o espaço que fosse preciso com o uso de inline. Note que o <a> agora está ao lado de <h1>. Isso se deve ao fato de 
que, diferente de block, o inline não gera quebra de linha (ele tenta colocar todos os elementos em uma única linha).
 Exemplo:
Módulo 6 – Tipos de visualização (3/7)
000 000
301
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Ainda sobre o inline, vale ressaltar que ele interfere no funcionamento do box-model, que vimos anteriormente. Quando trabalhamos 
com display: inline, os conceitos de box-model (largura e altura) não funcionam.
Exemplo:
O aviso diz: “A propriedade display: inline impede que 
height tenha efeito.”
Módulo 6 – Tipos de visualização (4/7)
000 000
302
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Outra característica sobre o inline, é que quando ele sofre alterações na sua margin ou padding, essas alterações de estilos são 
aplicadas somente na horizontal, com alterações verticais sendo ignoradas. Isso já podia ser notado no <a>, onde a margem (parte 
alaranjada) era apenas na horizontal. 
Exemplo:
Módulo 6 – Tipos de visualização (5/7)
000 000
303
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• inline-block: Esse valor vai combinar os tipos de visualização de block e inline, respeitando as larguras e alturas definidas, mas não 
gerando a quebra de linha. Note abaixo como a margem foi aplicada à todos os lados da âncora (<a>).
Exemplo:
Módulo 6 – Tipos de visualização (6/7)
000 000
304
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• none: Quando utilizado ele vai tornar oculto o elemento. O elemento ainda existe no html, porém se torna invisível, não ocupando 
espaço na página. 
Exemplo:
Módulo 6 – Tipos de visualização (7/7)
000 000
305
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Recapitulando:
• block 
• Ocupa todo o espaço horizontal.
• Causa quebra de linhas.
• O box-model se aplica.
• Padding e margin funcionam normalmente.
• inline
• Ocupa apenas o espaço do conteúdo.
• Não causa quebra de linhas (elementos ficam lado a lado).
• Box-model não se aplica.
• Padding e margin só funcionam na horizontal.
• inline-block
• Ocupa apenas o espaço do conteúdo.
• Não causa quebra de linhas (elementos ficam lado a lado).
• O box-model se aplica.
• Padding e margin funcionam normalmente.
• none
• Elemento fica oculto e não ocupa espaço na página.
Módulo 6 – Tipos de posicionamento(1/7)
000 000
306
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos aprender a utilizar a propriedade position para 
controlar a posição de elementos em nossa página web. Essa 
propriedade aceita diversos valores que conseguem afetar a 
localização dos elementos no documento HTML. Os mais 
comuns são:
• position: static – Este é o tipo de posicionamento padrão 
do CSS, e por isso é o que temos utilizado até então em 
nossos exemplos. Os elementos são posicionados de acordo 
com o fluxo normal do documento. Ele não é afetado pelas 
propriedades top, right, bottom e left, que veremos mais 
adiante.
• position: relative – O elemento é posicionado em relação 
ao seu posicionamento original no documento. Ele deve ser 
utilizado em conjunto com as propriedades top, right, 
bottom ou left, para deslocar o elemento na direção e valor 
citados a partir da sua posição original. 
 Exemplo: Mover um elemento a partir de sua posição 
original.
Vemos no código ao lado que criamos um quadrado laranja 
com um link dentro. Vamos mover o elemento <a> dentro do 
quadrado.
Módulo 6 – Tipos de posicionamento(2/7)
000 000
307
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para mudar o link de posicionamento usaremos o position: relative, acompanhado das propriedade top e left, com os valores de espaço 
que desejamos mover o elemento. Note que ele foi movido em relação à sua posição original e agora ele não está mais colado ao canto 
superior esquerdo do quadrado.
Módulo 6 – Tipos de posicionamento(3/7)
000 000
308
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• position: absolute – O elemento é posicionado em relação ao elemento ancestral (elemento pai, pai do pai, e assim por diante) mais 
próximo que tenha um posicionamentodefinido. Se nenhum ancestral tiver posicionamento definido, ele será posicionado em 
relação ao corpo do documento (<body>).
 Exemplo:
Módulo 6 – Tipos de posicionamento(4/7)
000 000
309
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tente notar no exemplo anterior que a âncora foi movida para o final da página. Quando colocamos que o posicionamento é absoluto 
(position: absolute) o CSS irá buscar pelo pai mais próximo que tem uma posicionamento definido. Ou seja, o CSS, a partir do <a> 
buscou no <p> e não encontrou nenhum posicionamento definido. O CSS então foi ao pai anterior, que é a <div>, onde também não há 
posicionamento. Sem mais para quem voltar, o CSS elegeu então o <body> como elemento de referência.
As propriedades bottom: 0rem e left: 3rem definem que, a partir do elemento de referência, este elemento deve estar à 0rem do 
bottom (parte de baixo) e à 3rem do left (lateral esquerda). Por isso o link ficou naquela posição ao final do documento.
Módulo 6 – Tipos de posicionamento(5/7)
000 000
310
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Se colocarmos uma posição ao elemento <div>, que cria o nosso quadrado laranja, a âncora irá se mover em relação à ele e ficará na base 
do quadrado com um pequeno distanciamento da lateral esquerda.
Módulo 6 – Tipos de posicionamento(6/7)
000 000
311
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• position: fixed – Essa propriedade torna os elementos posicionados em relação ao viewport (janela de visualização ou navegador). 
O elemento fica fixado na posição indicada, mesmo que a página seja rolada.
Módulo 6 – Tipos de posicionamento(7/7)
000 000
312
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• position: sticky – Essa propriedade posiciona o elemento como relative ou fixed, dependendo da posição de rolagem da página. 
Ao passar por esse elemento ao rolar a página, o elemento se torna fixed e se mantém naquela posição.
Módulo 6 – Background Color e Image (1/11)
000 000
313
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para manipular o fundo de um elemento com o CSS, utilizamos da propriedade background-color e background-image para, 
respectivamente, alterar a cor de fundo ou adicionar uma imagem ao fundo de um elemento. Veremos como utilizar destas 
propriedades para criar gradientes e estilizar de forma mais profissional nossas páginas web.
• background-color: Define a cor de fundo de um elemento. Aceita receber várias formas de especificação de cor, como nome das 
cores, valores hexadecimais, RGB ou RGBA.
 Exemplo:
Módulo 6 – Background Color e Image (2/11)
000 000
314
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• background-image: Essa propriedade aceita um diverso campo de valores, todos com o objetivo de definir de alguma forma a 
imagem que ficará ao fundo do elemento. Tem diversos usos, opções e combinações com outras propriedades, e por isso veremos 
apenas os principais casos. É recomendado consultar a documentação da MDN quando necessário: 
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image .
Exemplo:
Neste exemplo, utilizamos url para indicar um endereço onde a imagem se encontra e 
será carregada na página.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Módulo 6 – Background Color e Image (3/11)
000 000
315
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro desta propriedade temos algumas opções, como adicionar um gradiente de cor ao elemento. Essa opção pode dar efeitos 
interessantes de cor. Usaremos como valor a expressão linear-gradient, que cria uma transição de cor ao longo do elemento, onde a 
direção é dada em graus (unidade deg). Com 0deg temos uma transição a partir da cor final, de cima para baixo.
Exemplo:
Módulo 6 – Background Color e Image (4/11)
000 000
316
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Abaixo usamos o valor 180deg, que fará a transição de cima para baixo a partir da cor inicial.
Exemplo:
Módulo 6 – Background Color e Image (5/11)
000 000
317
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com o valor de 90deg temos uma transição da esquerda para a direita, a partir da cor inicial.
Exemplo:
Módulo 6 – Background Color e Image (6/11)
000 000
318
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Já com o valor de 45deg temos uma transição que irá na diagonal. Abaixo o exemplo usa cores com maior contraste para melhor 
demonstrar o efeito.
Exemplo:
Módulo 6 – Background Color e Image (7/11)
000 000
319
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• background-position: Quando adicionamos uma imagem e ela é grande demais, pode ser interessante especificar a área da 
imagem que você deseja utilizar. Se retomarmos o exemplo inicial, veja que o fundo é completamente roxo, mas que a imagem 
original tem bem mais conteúdo.
Imagem originalImagem recortada
Caso você deseje utilizar uma área específica da imagem, é possível utilizar a propriedade background-position que irá definir a 
posição inicial da imagem. A seguir, note no exemplo que utilizamos da propriedade para que o recorte da imagem de fundo pudesse 
abranger a parte roxa e a branca.
Módulo 6 – Background Color e Image (8/11)
000 000
320
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Exemplo:
Módulo 6 – Background Color e Image (9/11)
000 000
321
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• background-size: Irá definir o tamanho da imagem de fundo do elemento. A imagem pode ser mantida em seu tamanho original, 
esticada por todo o container ou contida para caber no espaço do container. No caso abaixo utilizamos o contain para que a 
imagem fosse contida no espaço do elemento. Porém, note que para preencher todo o espaço de fundo, a imagem teve de ser 
repetida.
 
 Exemplo:
Módulo 6 – Background Color e Image (10/11)
000 000
322
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com a utilização do valor cover nesta propriedade, forçaremos a imagem a cobrir todo o espaço do container.
 
 Exemplo:
Módulo 6 – Background Color e Image (11/11)
000 000
323
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• background-repeat: Essa propriedade irá definir como as imagens de fundo serão repetidas. Como vimos anteriormente, o CSS 
pode por padrão repetir imagens dentro de um container. Com essa propriedade podemos definir se ela deve ser repetir 
totalmente, apenas em uma direção ou nem sequer se repetir. Veja no exemplo abaixo que removemos a repetição que ocorria 
quando utilizávamos background-size: contain.
 Exemplo:
Módulo 6 – Desafio 1 (1/1)
000 000
324
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Está na hora de colocar em prática o que já vimos até aqui. Nesta seção apresentaremos o primeiro desafio deste módulo, e te 
convidamos a solucionar sozinho o problema apresentado. Tentar solucionar esses desafios não só é divertido como contribui para seu 
aprendizado. 
Você encontrará o arquivo com o desafio na seção Download da página do desafio. Baixe o arquivo e terá a descrição do que precisa 
ser feito. Para este desafio, apesar de ser uma forma de treinar seus conhecimentos em CSS, necessitará de algumas modificações no 
HTML.
Ao final do desafio você terá colocado em prática os conhecimentos avançados de CSS que adquiriu ao longo deste módulo. Bom 
divertimento!
Módulo 6 – Desafio 1 – Fazendo juntos (1/18)
000 000
325
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O desafio começa pedindo que a página seja dividida em seções. Deve lembrar da aula de estrutura dos documentos, onde vimos a 
divisão da página em footer, header, a divisão não semântica, como <section> e <div>. Note que também deixamos uma dica para 
essa parte do desafio.
Essa grande seção será o <main>, que abrigará o conteúdo principal de nossa página. A tag de abertura virá imediatamente após a 
<body> e será fechada imediatamente antes da </body>.
Módulo 6 – Desafio 1 – Fazendo juntos (2/18)
000 000
326
HTML E CSS IMPRESSIONADOR I HASHTAGPROGRAMAÇÃO
Nossas três seções menores já estão basicamente divididas: são os <h2> que utilizamos para as partes de preço, condições e 
características. Para esta página usaremos o <section>.
O primeiro <section> irá conter toda a parte de preço, como vemos abaixo.
Módulo 6 – Desafio 1 – Fazendo juntos (3/18)
000 000
327
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nossa segunda seção irá ficar contida logo abaixo, na parte 
que se refere às condições.
Por fim, a última seção contém as características, até depois 
do último <ul>.
Módulo 6 – Desafio 1 – Fazendo juntos (4/18)
000 000
328
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para a próxima parte do nosso desafio, iremos alterar nossa página web de forma a zerar os padrões do HTML e implementar nossa 
própria formatação. Lembre-se que esta medida tem como objetivo tornar a visualização mais uniforme entre os diferentes 
navegadores.
Vamos utilizar o nosso seletor universal * para definir o padding, margin e o box-sizing.
Módulo 6 – Desafio 1 – Fazendo juntos (5/18)
000 000
329
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Depois usaremos a herança de estilos para estilizar todos os elementos do documento. Lembre-se que a herança de estilos define que 
uma alteração em um elemento pai afeta todos os seus elementos filhos. Por isso modificaremos o <body> para que nossa estilização 
de fonte persista por todo o documento. 
Note que, como pediu o desafio, utilizamos medidas em px, mas o mais correto é alterar a raiz do documento e utilizar medidas 
relativas, que mudam dinamicamente. O desafio pede isso na sequência. Vale lembrar que a raiz do documento é o html.
Módulo 6 – Desafio 1 – Fazendo juntos (6/18)
000 000
330
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para mudar a unidade de px para rem, lembre-se que basta dividir o tamanho por 10. Por exemplo, se no documento o tamanho era 
de 18px, você deverá mudar para 1.8rem. Faça isso em toda a folha de estilos, padronizando todas as fontes num tamanho relativo.
Módulo 6 – Desafio 1 – Fazendo juntos (7/18)
000 000
331
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Lembre-se do conceito de herança de estilos. Quando um estilo é aplicado à um elemento, os elementos filhos herdam os mesmo 
estilos. Isso significa que algumas estilizações se tornam desnecessárias, porque elas já vão herdar as estilizações de seus elementos 
pai. Vamos remover essas estilizações desnecessárias.
Reforçando, a remoção do trecho acima torna o nosso arquivo mais enxuto e fácil de realizar manutenções. Os estilos que excluímos já 
serão herdados de outros seletores.
Módulo 6 – Desafio 1 – Fazendo juntos (8/18)
000 000
332
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é modificar nossas seções. Ao todo fizemos uso de três <sections>, então vamos criar um seletor que modifique o 
espaçamento interno de cada uma dessas seções em 24px, como é pedido no desafio.
Lembrando que apesar do desafio especificar o tamanho de 24px, utilizamos como unidade padrão o rem, que sendo uma unidade 
relativa, garante a integridade e padronização do nosso documento.
Módulo 6 – Desafio 1 – Fazendo juntos (9/18)
000 000
333
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando nos referimos ao espaçamento externo queremos dizer a margin, e inferior ao bottom. Sendo assim, vamos fazer as 
modificações pedidas.
Módulo 6 – Desafio 1 – Fazendo juntos (10/18)
000 000
334
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos salvar as modificações que realizamos e observar atentamente nossa página. Repare que nossa âncora está com um 
comportamento estranho.
Apesar de termos adicionado o margin-bottom como pedido no desafio, ela não está adequadamente posicionada na página. Isso 
ocorre pelo tema que vimos neste módulo dos tipos de visualização. Por padrão o CSS irá apresentar os elementos com display: inline, 
que como vimos, não permite padding ou margin verticais. Por isso o valor de margin-bottom não parece modificar o elemento.
Para resolver este problema, temos de mudar o tipo de visualização para inline-block. O block não nos faria sentido, pois para âncoras 
não queremos causar alguns efeitos típicos do block, como quebra de linha.
Módulo 6 – Desafio 1 – Fazendo juntos (11/18)
000 000
335
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Depois disso, temos a seguinte instrução:
Para este caso iremos modificar o seletor figcaption, alterando o espaçamento externo (margin), e depois alterando a mesma 
propriedade no seletor ul.
Módulo 6 – Desafio 1 – Fazendo juntos (12/18)
000 000
336
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo com o desafio, vamos modificar a página retirando as linhas de divisão <hr> de nossa página, porém utilizando apenas o CSS. 
Isso é facilmente realizado utilizando uma das formas de visualização que aprendemos nesse módulo. Vamos utilizar do display: none 
para fazer com que a quebra temática <hr> desapareça. Faça isso no arquivo da folha de estilos.
Módulo 6 – Desafio 1 – Fazendo juntos (13/18)
000 000
337
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para o próximo passo faremos uso de nosso aprendizado com Pseudo-elementos, para transformar a primeira letra de um elemento.
Uma outra forma de alterar isso seria colocando a primeira letra do <h1> dentro de um <span> porém o desafio aqui é fazer isso 
usando apenas o CSS. Para alterar apenas a primeira letra, o pseudo-elemento usado é o ::first-letter. 
Módulo 6 – Desafio 1 – Fazendo juntos (14/18)
000 000
338
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No próximo passo teremos de lembrar da sigla vista no estudo sobre pseudo-classes deste módulo, a LVHA. A sigla significa Link 
Visited Hover Active, que são as pseudo-classes usadas no momento de estilizar links. Basicamente, iremos personalizar o link de 
nossa página de forma que eles mudem de estilo quando são links não visitados, quando já foram visitados, quando o mouse passa 
sobre eles e quando eles se tornam ativos (no momento do click). Veja abaixo:
Módulo 6 – Desafio 1 – Fazendo juntos (15/18)
000 000
339
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O primeiro passo para esta etapa do desafio é criar uma <div> que irá agrupar o conteúdo de nossa seção. Nossos estilos serão 
aplicados neste bloco, então daremos uma classe à esse bloco. Usaremos a classe div-condicoes, e criaremos um seletor para ela.
Para que o bloco ocupe apenas o tamanho de seu conteúdo, usaremos o display: inline-block.
Módulo 6 – Desafio 1 – Fazendo juntos (16/18)
000 000
340
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Após isso seguiremos nessa etapa, alterando a cor de fundo, fonte e adicionando uma sombra, conforme instruções. Além disso, temos 
de tornar as bordas do elemento arredondas. Aqui vale lembrar dos valores da propriedade box-shadow, que adicionará a sombra ao 
elemento. O desafio pede que tenhamos nenhum deslocamento horizontal ou vertical, e 16px de raio de desfoque e 4px de raio de 
propagação. Isso exige que utilizemos os quatro valores da propriedade, que na ordem é: deslocamento horizontal, vertical, desfoque e 
propagação.
O padding será modificado apenas na vertical e horizontal, então dois valores bastarão.
Por fim, a propriedade border-radius definirá o arredondamento.
Módulo 6 – Desafio 1 – Fazendo juntos (17/18)
000 000
341
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para a última etapa deste desafio, iremos combinar seletores de forma a criar mais especificidade. Ao combinar seletores, podemos 
tornar a estilização mais especifica, fazendo ela ganhar prioridade sobre estilo herdados.
Vamos combinar os dois seletores mencionados e criar um novo seletor, mais especifico. Dentro deles, aplicaremos o estilo que foi 
pedido.
Pela regra de especificidade, essa alteração valerá apenas para os elementos da classe .realce-italico ou .realce-underline dentro da 
classe .div-condicoes.
Módulo 6 – Desafio 1 – Fazendojuntos (18/18)
000 000
342
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para o bônus do desafio, utilizaremos os conceitos da aula de tipos de posicionamento para criar um símbolo do whatsapp que está 
sempre visível na tela. Primeiro vamos criar um elemento no nosso html com a imagem que queremos. A imagem está no link 
https://www.hashtagtreinamentos.com/wp-content/uploads/2023/06/whatsapp-logo-2.png . Iremos colocar também um link que 
abrirá no whatsapp web.
Criamos então um seletor onde definimos o tamanho do elemento em 85px e tornamos ele fixo na página. Deixaremos um espaço de 
1px nas laterais para que o símbolo do whatsapp não fique encostando nas bordas da tela.
https://www.hashtagtreinamentos.com/wp-content/uploads/2023/06/whatsapp-logo-2.png
Módulo 6 – Desafio 2 – Aprofundando no desafio 2 (1/1)
000 000
343
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora é hora de encarar o desafio 2. Lembre-se de baixar o arquivo do desafio na página do curso e tentar colocar em prática o 
conteúdo aprendido até agora. Se atente aos temas que verá nesse desafio.
Lembre-se que o objetivo final é ter uma página parecida com a da https://www.hashtagtreinamentos.com/ . Boa diversão!
https://www.hashtagtreinamentos.com/
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (1/11)
000 000
344
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos começar o desafio definindo os padrões globais que aprendemos. Isso significa definir os espaçamentos e tamanhos padrões 
da página.
Depois disso o passo e substituir no restante de nosso arquivo CSS os padrões de valores de pixel (px) para rem.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (2/11)
000 000
345
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Lembre-se que se utilizar o padrão de 62.5% para o tamanho da fonte do documento, transformar uma medida de px para rem é 
simplesmente dividir o valor por 10. Aplique essa modificação em todos os pontos que utilizem px como unidade.
Serão muitos pontos alterados, então usar o atalho Ctrl + F irá te permitir buscar no documento por uma palavra específica. Busque 
por px e substitua em todos os pontos.
Você pode, no caminho, ir apagando os comentários que ficaram de outros momentos do desafio, para tornar mais navegável o 
arquivo.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (3/11)
000 000
346
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo para o cabeçalho é replicar a interação dos elementos do menu com o usuário. A primeira coisa que notamos é o uso 
de pseudo-classes quando passamos com o mouse pelos elementos.
Inspecione o elemento para obter a cor que está sendo utilizada. Para forçar o estado de hover, clique no ícone :hov e selecione o 
estado desejado. 
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (4/11)
000 000
347
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Lembre-se de aplicar o LVHA: Link Visted Hover Active. Para o design que estamos fazendo, Link e Visited não serão usados.
A razão de adicionarmos o .item-lista-cabecalho na frente da pseudo-classe se deve ao fato que já estamos usando uma outra 
estilização para este elemento.
Por conta da regra de especificidade, somos obrigados a adicionar a classe .item-lista-cabecalho para garantir o funcionamento 
esperado.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (5/11)
000 000
348
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo com o cabeçalho, repare que temos mais uso de pseudo-classes.
A mudança da seta para baixo é feita utilizando a pseudo-classe ::after. Para saber como escrever a seta utilizando o CSS você pode 
procurar no google ou utilizar a referência: https://symbl.cc/en/ e buscar por down triangle. O código para este símbolo é U+2BC6, mas 
no CSS usaremos apenas a parte após o “+” e precedido de uma contrabarra (\). Se seu teclado não tem uma contrabarra, use Alt + 92. 
https://symbl.cc/en/
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (6/11)
000 000
349
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Adicione então uma nova classe ao documento HTML, no elemento que conterá o sub-menu com os elementos filhos.
No CSS vamos estilizar a classe para quando a ação ::after for executada, colocando primeiro o conteúdo que será exibido.
Essa modificação já irá apresentar a seta para baixo na nossa página, mas como ainda não conseguimos criar todo o layout que 
“esconde” os elementos filhos, deixaremos para ajustar essa parte numa aula futura. 
Não se esqueça de incluir a classe contem-filhos no elemento responsável pela área de contatos no HTML.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (7/11)
000 000
350
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo com o desafio, vamos agora mexer um pouco com os espaçamentos. Apesar de podermos copiar apenas os espaçamentos 
que existem na página oficial da Hashtag, é interessante saber que esses espaçamentos não são escolhidos de forma arbitrária. 
Existem algumas tabelas de referência que ditam quais tamanhos usar dependendo do seu tamanho inicial, para assim garantir uma 
página com espaçamentos e tipografia visualmente harmônica. Uma dessas páginas de referência é a https://typescale.com/ .
Para o desafio utilizaremos as escalas Minor Third para as fontes e Major Third para espaçamentos. Você pode obter os valores desta 
escala no site mencionado ou seguir o comentário deixado no gabarito do desafio.
https://typescale.com/
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (8/11)
000 000
351
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Crie uma classe .cabecalho e adicionar esta ao elemento header.
Depois estilize utilizando as medidas que vimos no typescale. Você pode experimentar alguns valores até encontrar o espaçamento 
que mais te agrada, mas seguiremos aqui com as medidas 1.6rem e 3.12rem, e se necessário podemos voltar depois para ajustar.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (9/11)
000 000
352
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo para recriar nossa página da Hashtag é remover os bullets da nossa lista não ordenada. Para manipular o símbolo que 
precede os itens da lista, utilizamos a propriedade list-style e para uma lista completa de opções, podemos recorrer à referência do 
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style . Utilizaremos o valor none que deixará sem nenhum símbolo.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (10/11)
000 000
353
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos adicionar uma sombra ao cabeçalho. Você pode criar sua própria sombra ou copiar diretamente os valores da sombra do 
site da Hashtag. 
Depois disso, vamos ainda alterar o cabeçalho para que ele tenha um comportamento parecido com o original. Note na página da 
Hashtag que ao descer na página, o cabeçalho se move de junto. Outro ponto interessante é que o corpo da página vai “para trás” do 
cabeçalho. Para ter esse mesmo comportamento usaremos o position: sticky. Colocaremos as posições top: 0 e left: 0 para que ele 
comece no canto superior esquerdo na página (sem espaços acima ou à esquerda). Colocaremos também um fundo branco, que irá 
“esconder” o corpo da página atrás do cabeçalho.
Módulo 6 – Desafio 2 – Aprofundando o Cabeçalho (11/11)
000 000
354
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Por enquanto estamos finalizados com o cabeçalho! Com certeza você já teve uma grande evolução. Na próxima etapa você irá 
construir a seção Hero, e para que tenhamos espaço suficiente de visualização vamos esconder o cabeçalho. Mas não se preocupe! É 
algo temporário, só enquanto não colocamos o cabeçalho na horizontal.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (1/15)
000 000
355
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para a seção Hero de nossa página, vamos seguir a estratégia de inicialmente modificar os elementos maiores e posteriormente 
estilizar os elementos menores emais internos de toda a seção. Para o primeiro passo, iremos criar uma classe secao, que irá abrigar os 
estilos padrões de cada seção e também a classe secao-hero que terá os estilos específicos da sessão hero. Em alguns casos pode não 
ser válido tem uma classe secao, porque as sessões da página não necessariamente terá algo em comum entre si.
Lembrando que esses valores de padding foram retirados da nossa tabela do typescale, que mencionamos no desafio anterior, onde 
trabalhamos em cima do cabeçalho.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (2/15)
000 000
356
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo o modelo da página da Hashtag, observamos que a seção hero contém uma classe chamada container que abriga seus 
elementos mais internos. O interessante desta classe é o uso da propriedade max-width que irá definir um width máximo que o 
elemento pode alcançar. Essa propriedade será vista em mais detalhes no módulo de responsividade.
De toda forma, vamos replicar este comportamento, definindo a classe container e seus estilos.
Agora, observe como o conteúdo do nosso elemento não está centralizado.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (3/15)
000 000
357
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Poderíamos tentar manualmente definir espaços laterais que tornassem o nosso conteúdo centralizado. Porém, o CSS já nos oferece 
uma maneira mais prática de fazer isso. Utilizando o valor auto, o CSS irá calcular o total de pixels nos espaços laterais e dividir esse 
valor por dois, colocando o elemento centralizado. Lembrando que deixamos o primeiro valor de margin como zero, porque não 
queremos espaçamento verticais.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (4/15)
000 000
358
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é adicionar a imagem de fundo. Você deve usar a mesma imagem de fundo que visualiza na página da Hashtag e 
para isso basta copiar o link da imagem, ou usar o seguinte link: https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/06/BACKGROUN-banner-01.png .
Dessa vez o estilo será adicionado à classe .secao-hero, já que a imagem de fundo não é um padrão entre todas as seções para ficar na 
classe .secao.
Contudo, isso não será suficiente. Para que você possa ter a imagem como na página da Hashtag, terá de fazer alguns ajustes. A 
imagem está centralizada na seção e além disso está cobrindo todo o espaço, sem se repetir. Portanto, precisa fazer uso de mais 
algumas propriedades.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-01.png
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-01.png
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (5/15)
000 000
359
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Indo para os elementos mais internos de nossa seção, é hora de ajustar os botões. Note que no momento, os botões de nossa seção 
mal parecem botões.
Então vamos estiliza-los de forma que tenham as bordas arredondadas e um preenchimento colorido, da mesma forma que no site 
original.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (6/15)
000 000
360
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como os botões da página são parecidos, utilizaremos a classe .botao para os estilos gerais, como arredondamento. As cores e 
gradientes deixaremos para cada classe de cada botão. Vamos utilizar um arredondamento de 3rem, lembrando sempre que essa 
valor não é baseado em nenhuma escala, mas apenas um valor que combinou bem com o resultado que estamos buscando. Você 
pode testar um pouco o valor do border-radius até ter um arredondamento que te agrade. O padding seguirá a escala que discutimos 
anteriormente, mas você é livre para testar os valores abrangidos por ela.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (7/15)
000 000
361
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Notará que os botões ficarão sobrepostos com o iframe. Isso ocorre por conta do tipo de visualização. Como neste caso o tipo de 
visualização padrão é o inline, os valores de espaçamento não irão “empurrar” os outros elementos. Será preciso mudar o tipo de 
visualização para inline-block para que tenhamos o design esperado.
Com o inline-block o iframe será “empurrado” para baixo, não sobrepondo o botão. Vale lembrar que com o tipo de visualização inline-
block nós aplicamos o box-model ao elemento, mas ele ocupará apenas o espaço que é necessário.
 
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (8/15)
000 000
362
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com a edição da classe .botao, é possível notar que mais algumas propriedades podem ser estabelecidas para que 
tenhamos um botão padronizado. Todos os botões da página da Hashtag tem fonte de cor branca, por exemplo. Tente observar quais 
outros padrões você pode notar entre os botões da página e tente finalizar essa classe. Note como a sombra só abrange o fundo e a 
parte direita dos botões (como se a fonte de luz fosse o canto superior esquerdo). 
Você pode inspecionar o elemento da página, mas o ideal é que brinque um pouco com os possíveis valores de sombra até ter algo 
que fique agradável. No final deverá ter algo parecido com o que está abaixo.
 
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (9/15)
000 000
363
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora iremos personalizar o botão desta seção. Isso significar aplicar um gradiente é cores especificas além de qualquer outro detalhe 
que você note que não deve ficar na classe .botao. Crie o seletor .hero-botao e aplique nele as particularidades do botão da seção 
Hero. De novo, tente descobrir sozinho o que deve fazer, e deixe para inspecionar o elemento ao final. Notará que o estilo que esse 
botão aplica é um gradiente.
 
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (10/15)
000 000
364
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
É preciso ainda estilizar o botão para quando ele sofrer a ação de hover, ou seja, quando o ponteiro do mouse paira sobre o botão. 
Usaremos a pseudo-classe ::hover. Na página da Hashtag a ação é que, ao ser tocado pelo mouse, o botão fica inteiro da mesma cor 
(as bordas e o fundo), então essa ação é relativamente simples de ser feita.
Mais uma vez, para obter as cores que deseja, a melhor forma é realmente inspecionando o elemento da página de referência, mas 
tente fazer isso ao final, para evitar “colar” informações. Num cenário real de desenvolvimento, normalmente o designer da página já 
vai lhe dar esses valores prontos!
 
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (11/15)
000 000
365
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A nossa seção Hero já está bem mais parecida com a da página da Hashtag. Compare o que já fez com a da página e tente identificar o 
que está faltando.
Faltam ainda alguns pontos do layout para serem alterados, que faremos futuramente, e temos ainda que ajustar o iframe do vídeo e o 
parágrafo do texto. 
 
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (12/15)
000 000
366
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos aproveitar que estamos mexendo no texto para padronizar todas as fontes e espaçamento conforme nossa escala definida 
previamente através do Typescale. Vamos alterar o h1 e o .hero-paragrafo da nossa seção, lembrando que se aumentamos a fonte, 
podemos diminuir o line-height.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (13/15)
000 000
367
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Indo para o iframe, vamos notar que existe uma diferença de proporção entre a imagem do vídeo que temos e a imagem da página 
original. Isso ocorre por uma diferença de proporção, onde nossa imagem tem um aspect-ratio menor, ou seja, a proporção de 
tamanho da imagem é diferente. Para termos um vídeo de mesma proporção que o da página da Hashtag teremos de mexer nessa 
propriedade.
Vamos fazer isso em etapas, e já começar removendo o estilo inline styledo nosso iframe. Depois podemos substituir a classe por uma 
que será mais relevante para as alterações que vamos aplicar. Abaixo o antes e depois.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (14/15)
000 000
368
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para modificar a proporção da imagem/video usaremos a propriedade apsect-ratio, tendo como valor a proporção que desejamos. 
Contudo ela sozinha não irá modificar a o iframe. Isso porque precisamos definir uma altura ou uma largura (e apenas um desses), 
para que o outro valor possa ser calculado seguindo a proporção definida.
Vamos então atribuir um aspect-ratio ao nosso iframe usando a classe que definimos anteriormente e informar a altura que 
desejamos. A largura será definida automaticamente.
Note como a imagem já tem o tamanho que queremos. Agora precisamos ajustar suas bordas.
Módulo 6 – Desafio 2 – Aprofundando a Seção Hero (15/15)
000 000
369
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para as bordas, mais uma vez vamos testar alguns valores até ter algo que fique agradável e parecido com o da página da Hashtag.
Como não vamos ajustar ainda o layout, a seção Hero ficará bem grande e ocupando um grande espaço da página. Se você quiser, 
pode deixar temporariamente sem visualização (display: none) para esconder o iframe e fazer com que a seção tome menos espaço 
enquanto continuamos com as próximas edições da página.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (1/27)
000 000
370
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para o iniciar esta seção vamos salvar a imagem de fundo que está sendo usado na página da Hashtag. Ela está disponível em 
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-02.png .
Depois disso vamos criar as classes necessárias para a seção. Como anteriormente, vamos adicionar a classe secao para as estilizações 
padrões, e adicionar uma classe para os estilos específicos da seção, que chamaremos aqui de secao-conteudos. Crie ainda uma classe 
container que irá englobar o conteúdo de nossa seção.
Lembrando que a <div> com a classe container deve englobar todo o conteúdo da seção.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-02.png
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (2/27)
000 000
371
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Apenas com essas modificações já notará que toda a seção ganhou uma aparência diferente. Isso porque os estilos de secao e 
container já estavam prontos e foram reaproveitados.
Agora vamos criar o seletor .secao-conteudo e criar os estilos específicos da seção conteúdos gratuitos. Iniciaremos adicionando o 
plano de fundo que salvamos. Um ponto que irá nos ajudar bastante é que todas as formatações de imagem e fundo já estão prontas! 
Basta copiar da nossa .secao-hero, mudando apenas a URL da imagem de fundo.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (3/27)
000 000
372
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora é hora de editar a seção concentrando nossos esforços nos conteúdo mais interno. Vamos descartar por enquanto as edições de 
layout e nos manter nos estilos que já aprendemos. Primeiramente, podemos mudar o elemento h2 para que seu tamanho respeite a 
escala do type scale que definimos no início do desafio.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (4/27)
000 000
373
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Compare o tamanho da imagem de nossa página com o tamanho da imagem na página da Hashtag. Notará que podemos diminuir o 
tamanho de nossa imagem, para termos uma cópia mais fiel do site. Esse detalhe pode ser mais dificil de perceber apenas 
visualmente, então terá de inspecionar o elemento da página.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (5/27)
000 000
374
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para editar o tamanho de maneira apropriada, associe uma nova classe à imagem no html e depois crie o seletor para especificar o 
tamanho apropriado.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (6/27)
000 000
375
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo com as edições, vamos agora criar os mesmo “balões” de informação que temos na seção da página original da Hashtag. 
Note que são algumas as edições que terão de ser feitas. Primeiramente vamos copiar o gradiente de cores da página original, 
inspecionando o elemento e tomando o cuidado que for possível para não “colar” nenhuma outra informação. Analisando o nosso 
documento html, esta informação está dentro de um h3, então vamos criar uma <div> que englobe todo o elemento e dar uma classe 
relevante para editarmos o estilo que precisamos.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (7/27)
000 000
376
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Criamos então um seletor .caixa-gratuito-h3 onde iremos colocar o mesmo gradiente que obtivemos ao inspecionar o elemento.
Apenas copiamos o gradiente, mas o que ele está dizendo é que a direção do gradiente é da esquerda para direita, indo da primeira 
cor para a segunda cor. Outro ponto importante, que foi trabalhado na seção Hero, é que não queremos que esse elemento ocupe 
toda a linha, então precisamos mudar o tipo de visualização para um tipo que ocupe apenas o espaço necessário, mas que mantenha 
as qualidades de bloco (como espaçamentos).
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (8/27)
000 000
377
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é parecido com o que fizemos nos botões da seção Hero, que é adicionar os estilos próprios, como a cor da fonte 
branca, os espaçamentos e os cantos arredondados. Tenha atenção que este elemento parece, mas não é um botão e seu design é um 
pouco mais quadrado que os dos botões da seção Hero. Teste alguns valores até encontrar algo que lhe agrade e seja próximo da 
página original da Hashtag, lembrando que os espaçamentos devem seguir os padrões do type scale que escolhemos. 
O próximo passo para finalizar esse elemento exige uma abordagem sobre um tema que ainda não vimos. É o uso da propriedade 
transform.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (9/27)
000 000
378
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Diferente dos botões que já fizemos, esses “balões” são inclinados, e fazer isso no CSS exige o uso da propriedade transform. Caso 
precise, a documentação para uso do transform pode ser encontrada em https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform .
O transform permite modificar o espaço do elemento, permitindo uma série de mudanças no elemento, como mexer no tamanho, 
mudar a orientação, inclinar e muitas outras coisas. Como é algo bem específico, é mais útil consultar sua documentação conforme a 
necessidade. Para nosso caso usaremos o valor rotate para rotacionar o elemento. O valor do rotate será em graus (deg), então tente 
experimentar alguns valores para entender como a propriedade funciona. Para o nosso caso o valor de -3deg irá inclinar sutilmente o 
elemento, como queremos.
https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (10/27)
000 000
379
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para finalizar este elemento, mas ainda não a seção, adicionamos uma sombra para dar mais profundidade à caixa.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (11/27)
000 000
380
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos para o elemento seguinte, que é a caixa que abriga os ícones e textos dos treinamentos. Nessa etapa vamos trabalhar 
novamente os redimensionamentos das imagens, bordas e outros temas estudados neste módulo. 
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (12/27)
000 000
381
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃOCrie uma <div> que contenha todo o conteúdo desejado e crie também uma classe para que possamos estilizar todo o conteúdo. 
Lembre-se de dar um nome relevante para a classe. Vamos seguir conforme abaixo. 
Edite o html e crie o seletor para a classe. 
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (13/27)
000 000
382
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Começaremos criando uma borda internar para “abrigar” todo o conteúdo. Usaremos a propriedade box-shadow para criar a borda, 
lembrando de usar o valor inset para que o contorno fique interno ao elemento. Ajuste os valores de desfoque e deslocamento até ter 
algo que fique agradável, ou parecido com os valores abaixo.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (14/27)
000 000
383
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Depois iremos adicionar bordas arredondadas com a propriedade border-radius. Mais uma vez, teste alguns valores até ter algo 
interessante. Depois ajuste os espaçamentos com padding, mas dessa vez lembrando de seguir a nossa escala pré-definida.
Ajustamos agora o html para que cada uma das imagens de nossa caixa tenha o mesmo tamanho dos ícones da página da Hashtag. 
Vamos modificar as tags <a> desta parte da seção, adicionando uma classe para definir este tamanho.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (15/27)
000 000
384
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Depois de adicionar a nova classe circulo-logo-curso a cada âncora desta caixa, vamos formatar o estilo para modificar as imagens. Já 
podemos mudar o tipo de visualização e adicionar um width e height apropriado, lembrando que âncoras são inline, e por isso irão 
ignorar o width (daí a necessidade de mudar o tipo de visualização).
Note como as imagens se amontoaram. Isso ocorre porque apesar de termos definido um tamanho para o container que vai abrigar a 
imagem, a imagem não está com tamanho definido. Para que possamos modificar a imagem, iremos “dizer” ao CSS que a imagem 
deve ocupar apenas o total de espaço de seu container.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (16/27)
000 000
385
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para alcançar isso, criamos um novo seletor, dessa vez especificando as img dentro da classe circulo-logo-curso.
Com este novo seletor, as imagens serão formatadas para ocupar apenas o espaço definido em seu próprio container.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (17/27)
000 000
386
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos terminar de formatar as imagens para que elas fiquem o mais próximo da original.
Note que os ícones estão com um fundo mais cinza. Essa cor é a #e7e7e7. Vamos precisar também tornar as bordas totalmente 
circulares e adicionar mais espaço interno. 
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (18/27)
000 000
387
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Lembre-se de utilizar um border-radius de 50% para que o container fique totalmente circular. Não deixe de adicionar uma sombra 
parecida com a que fizemos em momentos anteriores.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (19/27)
000 000
388
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos seguir para as listas com os links para as redes sociais. Note que cada uma delas deve estar numa caixa e que elas não tem o 
bullet point típico das listas. Vamos remover os pontos de todas as listas de nossa página, criando um seletor geral parecido com o que 
fizemos anteriormente.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (20/27)
000 000
389
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos agora utilizar a classe já criada gratuito-link-lista para criar a caixa que envolverá todo o conteúdo. Essas caixa será bem 
parecida com a que acabamos de fazer, então bastará copiar o estilo feito anteriormente e editar alguns valores. Lembre-se de 
aproveitar o momento para padronizar os espaçamentos deste seletor que já existia para o padrão type scale que estamos usando.
Lembre-se de usar apenas como base a caixa realizada anteriormente, alguns dos valores deverão ser adaptados. Modifique os valores 
até ter um resultado agradável visualmente.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (21/27)
000 000
390
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como na caixa anterior, será preciso redimensionar as imagens. Para isso criamos uma combinação de seletores.
Cada vez mais temos melhorando o nos design e estamos ficando mais próximos da página que queremos alcançar. Note que o texto 
interno está na cor azul de um link, então use o CSS para que a cor do texto seja herdade da cor do pai.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (22/27)
000 000
391
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Por fim, como estamos trabalhando com links, temos de aplicar o LVHA, para estilizar totalmente nosso documento. Neste caso a 
modificação é simples, sendo necessário apenas que o link tenha um sublinhado no momento que é tocado pelo mouse ou é ativado.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (23/27)
000 000
392
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As caixas com os links estão agora muito mais parecidas com o que queremos alcançar. 
Um próximo passo que ainda podemos avançar é mover o balão de texto inclinado, para que ele fique numa posição bem específica. 
Isso é atingido utilizando position: absolute, mas lembre-se que o elemento tomará como referência o primeiro pai que tem position: 
relative, então temos de primeiramente dar essa propriedade ao elemento que desejamos ter como referência, que no caso é a caixa-
cursos-hashtag.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (24/27)
000 000
393
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E na sequência indicaremos à classe caixa-gratuito-h3 sua posição. Vai notar que ainda não temos o que queremos, precisamos ainda 
que a caixa com o texto se mova um pouco mais para a esquerda. O tanto que queremos mover é a o tamanho da caixa.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (25/27)
000 000
394
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para fazer o movimento que queremos, será preciso usar uma propriedade que já vimos, que é o transform, mas dessa vez com um 
valor diferente. Usaremos o valor translate para indicar o quando o elemento deverá se deslocar, de forma que o CSS possa ajustar este 
valor automaticamente. Queremos então usar o translate para que a caixa de texto se mova de forma que sua metade esteja na 
metade da sua caixa maior no eixo X e Y (horizontal e vertical).
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (26/27)
000 000
395
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora que já temos todos os estilos prontos, basta aplicar as mesmas classes que já criamos à segunda parte do html, onde temos a 
parte de programação: caixa-curso-hashtag para englobar tudo, uma <div> para criar a caixa de texto para “programação” com a 
classe caixa-gratuito-h3 e a classe circulo-logo-curso para as âncoras.
Módulo 6 – Desafio 2 – Aprofundando a Seção Conteúdos Gratuitos (27/27)
000 000
396
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Bastou adicionar as classes para que as duas partes de nossa seção tomassem a mesma forma.
Vamos agora seguir para a seção de diferenciais.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (1/15)
000 000
397
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo o mesmo padrão que já estamos seguindo das outras seções, iremos começar pelas partes mais externas e depois ir 
aprofundando na seção até os elementos mais internos. De mais externo, e talvez o que mais chame a atenção, é o fundo numa cor 
diferente do restante. A cor neste caso é #f4f5f7.
Comece no documento html, adicionandoa classe padrão secao e a nova classe secao-diferenciais, que terá os estilos próprios.
Depois adicione uma <div> que englobe todo o conteúdo da seção que tenha a classe container. Esses pequenos passos já tornarão a 
seção bem mais organizada e com os devidos espaçamentos que colocamos anteriormente.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (2/15)
000 000
398
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Adicione a cor mencionada anteriormente ao fundo da seção. Utilizaremos a classe já criada anteriormente para isso.
Deve notar que alguns botões trabalhados anteriormente estão ficando por cima de nossa barra superior. Isso acontece porque como 
mexemos na posição relativa do elemento, ele ultrapassa os elementos comuns no eixo z da página. Vamos modificar o cabeçalho e 
colocar seu z-index mais alto que os outros.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (3/15)
000 000
399
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo com os outros elementos, vamos replicar a barra lateral que existe nesta seção.
Note que a barra parece bastante com uma borda lateral para o elemento. Seguiremos essa estratégia para criar esse design específico. 
Criaremos uma <div> neste elemento e criaremos uma nova classe.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (4/15)
000 000
400
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora com um seletor para a classe criada iremos criar a borda de apenas um dos lados usando a cor #ffb20f. Já vamos aproveitar para 
olhar nossa escala de espaçamentos e adicionar o espaçamento da barra lateral para o texto. 
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (5/15)
000 000
401
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Movendo agora para o fundo de cor mais azul, que se trata do fundo mais interno desta parte da seção. As bordas são arredondadas e 
também precisamos nos atentar aos espaçamentos internos. Contundo este fundo se aplica somente ao topo da caixa principal, com os 
outro parágrafos ficando com fundo branco. Iremos então criar uma nova classe e adicionar estes detalhes.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (6/15)
000 000
402
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos seguir para o restante da seção, onde não há o gradiente azul. Criamos uma nova <div> que irá abranger o restante do 
documento. Adicionamos o mesmo espaçamento que na caixa anterior.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (7/15)
000 000
403
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Use o seletor .container-diferenciais como um novo container que irá abrigar a parte mais externa da caixa. Nesta classe estilizaremos 
alguns espaçamentos e também adicionaremos uma sombra interna ao elemento. É importante que o espaçamento aqui coincida 
com o usado no topo da caixa, que tem o gradiente azul, para que a cor não seja “empurrada”.
Lembre-se que alguns destes valores, em especial os da sombra, devem ser definidos testando alguns valores até encontrar algo que 
fique com aparência agradável.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (8/15)
000 000
404
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é criar as caixas internas, lembrando que não mexeremos ainda no layout delas, apenas na estilização. Siga o mesmo 
padrão que temos feito até o momento, identifique os elementos que já podemos aprendemos (bordas arredondas, sombras, etc), crie 
uma classe para a caixa interna e comece a testar alguns valores para o estilo do elemento.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (9/15)
000 000
405
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como são três caixas iguais, iremos criar a classe caixa-itens-diferenciais e adicionar esta classe às três div’s responsáveis pelo 
conteúdo.
S
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (11/15)
000 000
406
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No seletor seguiremos os mesmos passos que já fizemos para criar uma caixa com conteúdo: definir um fundo, adicionar uma sombra, 
definir os espaçamentos e então qualquer ajuste particular que possamos achar necessário.
Lembrando apenas que para este caso a sombra não é interna, então não fazemos o uso do inset. O próximo passo e criar a caixa 
amarela que fica ao topo, que será bem parecida com todas essas que viemos fazendo até agora.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (10/15)
000 000
407
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Crie uma nova <div> que deverá encapsular apenas a imagem de cada caixa. Ela deve englobar apenas cada uma das img.
Daremos o fundo amarelo, da cor #ffaf00, e mudaremos o tipo de visualização para que o container ocupe apenas o espaço da imagem 
e não toda a linha. As bordas arredondas, como de costume, os espaçamentos e a sombra.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (11/15)
000 000
408
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Lembre-se de estilizar a própria imagem, para que ela possa ficar adequadamente ocupando a caixa.
Indo mais internamente, devemos checar o texto do conteúdo e ajustar o tamanho da fonte e os espaçamentos. Como ainda temos 
algumas classes que estão fora de nosso padrão, vamos aproveitar o momento e criar um seletor mais abrangente que resolva essa 
questão. Dessa forma agrupamos textos que tem o mesmo tamanho para que tornemos o nosso arquivo mais enxuto e facilite 
manutenções futuras. Lembre-se de apagar os seletores obsoletos.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (11/15)
000 000
409
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Faremos uma padronização parecida com os elementos h3 mais internos do texto.
Vamos fazer mais uma etapa bem parecida com as caixas da seção anterior, onde precisaremos mudar o position e usar o transform 
para obter o efeito da caixa amarela com a imagem se sobrepor à caixa maior.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (12/15)
000 000
410
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A etapa final para esta seção é ajustar as imagens no ponto mais inferior da caixa.
Indo sempre na linha de melhorar nosso documento CSS, vamos unificar a estilização do h3 em um único seletor.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (13/15)
000 000
411
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com a <div> que agrupa todas a imagens do ponto inferior da caixa, vamos criar uma classe para editar todas as imagens de uma só 
vez.
No seletor vamos colocar uma altura padrão, para que os logos possam ficar devidamente dispostos. Os logos que ficarem muito 
pequenos poderão ser substituídos futuramente por alguma imagem numa qualidade melhor. Para dar o efeito cinza e remover as 
cores, utilizamos uma propriedade chamada filter com o valor definido para uma escala de cinza.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (14/15)
000 000
412
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Algumas logos já tem a cor preta e por isso não serão afetadas por uma escala de cinza.
Para essas será preciso aplicar um estilo especifico, onde iremos mudar a opacidade da imagem. Ao diminuir a opacidade, o tom da 
imagem ficará mais próximo de cinza. Criamos então uma classe para cada logo que precisará deste tratamento, e depois um seletor 
que controla a opacidade. Note na próxima página como criamos as três classes e definimos os valores de opacidade para que ao final 
tivéssemos cada logo num discreto tom de cinza. Com isso terminaremos a seção, por enquanto.
Módulo 6 – Desafio 2 – Aprofundando a Seção Diferenciais (15/15)
000 000
413
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (1/14)
000 000
414
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para esta seção teremos uma tarefa diferente onde temos de criar um carrossel. Futuramente teremos uma aula específicapara isso, 
mas nesta etapa do desafio teremos de, da melhor maneira possível, preparar os elementos que foram possíveis para a criação deste 
carrossel.
Como nas seções anteriores vamos começar definindo a seção padrão e uma mais focada para os estilo próprios desta seção. Defina as 
duas classes na <div> que mais abrange o elemento e dentro desta <div> uma segunda contendo a classe container. 
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (2/14)
000 000
415
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Diferente da seção anterior, esta seção contém uma imagem de fundo, que pode ser obtida da página da Hashtag, ou acessando 
diretamente o link: https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-04.png .
Vamos criar o seletor .secao-oquefalam e adicionar o plano de fundo, seguindo exatamente as mesma regras de outros planos de 
fundo com imagens que já fizemos anteriormente. 
Vamos começar a nos mover para os elementos mais internos da seção, começando pelo título. Criamos uma classe para a <div> que 
encapsula o título da seção e depois adicionamos os estilos. Como as regras do fonte já foram definidas, vamos apenas alterar a cor da 
fonte.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUN-banner-04.png
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (3/14)
000 000
416
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos começar a adicionar as estruturas principais do Carrossel. Na <div> principal do carrossel vamos criar uma classe para o 
carrossel inteiro e depois para cada botão uma classe própria. Os botões do carrossel são imagens que podem ser obtidas ao 
inspecionar o elemento na página da Hashtag. Os links das imagens são: https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/06/ELEMENTO-seta-esquerda.png e https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/06/ELEMENTO-seta-direita.png . 
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-seta-esquerda.png
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-seta-esquerda.png
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-seta-direita.png
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-seta-direita.png
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (4/14)
000 000
417
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é ajustar as imagens de depoimentos. O primeiro passo aqui seria redimensionar as imagens e modificar o aspect-
ratio de forma a fazer algo parecido com o que fizemos no iframe da seção Hero. Acontece que por se tratar de uma img, os recursos 
que temos são limitados e a imagem poderia ficar deformado. Para que tenhamos um maior controle da imagem, vamos trabalhar 
como se tivéssemos uma imagem de fundo, pois assim teremos acessos à mais recursos de edição (controlar recursos como 
background-position).
Vamos primeiramente modificar o html de forma que não tenhamos mais uma <img> e sim uma <div> com uma imagem de fundo. 
Criaremos três div’s já que são três imagens diferentes. Usaremos duas classes para cada <div>, uma classe geral com os estilos e 
propriedades comuns à todos e uma especifica de cada imagem, onde vamos definir a imagem de fundo.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (5/14)
000 000
418
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os seletores individuais de cada classe terão apenas a definição do plano de fundo e cada link de cada imagem. Não se esqueça que os 
valores e aplicações desta parte da seção foram bem parecidos do que fizemos com o iframe da seção Hero.
Bastará então mudar o tipo de visualização, já que por padrão os elementos estarão tomando o comportamento de bloco, tomando 
todo o espaço disponível. Mudando o tipo de visualização, podemos fazer com que as imagens ocupem apenas o espaço necessário.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (6/14)
000 000
419
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os seletores individuais de cada classe terão apenas a definição do plano de fundo e cada link de cada imagem. Não se esqueça que os 
valores e aplicações desta parte da seção foram bem parecidos do que fizemos com o iframe da seção Hero.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (7/14)
000 000
420
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com as edições, vamos preparar a seta do carrossel que permite navegar pelo mesmo. Por enquanto faremos apenas a 
estilização dela. Com o html já preparado com as imagens, vamos apenas estilizar para que a mesma fique na posição desejada. Mais 
uma vez, é o processo parecido com o que fizemos anteriormente com as caixas de textos, onde alteramos a posição do elemento. 
Como são duas setas, teremos uma classe mais abrangente chamada oquefala-seta e uma mais especifica para cada lado da seta.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (8/14)
000 000
421
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Crie os seletores, mude o posicionamento dos elementos com position: absolute e comece a testar alguns valores de transformação 
para ter o deslocamento desejado das imagens. A lógica aplica aqui é a mesma que foi aplicada nas caixas de textos da seção 
conteúdos gratuitos, o intuito é definir uma posição da imagem relativa ao elemento pai, e usar o translate para adequar a posição 
dessa imagem.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (9/14)
000 000
422
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para ter um resultado ainda mais próximo do original, vamos adicionar uma camada azul sobre o elemento das imagens. Também 
temos de adicionar um botão de “play” e os botões inferiores.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (10/14)
000 000
423
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para ter um resultado ainda mais próximo do original, vamos adicionar uma camada azul sobre o elemento das imagens. Também 
temos de adicionar um botão de “play” e os botões inferiores. O primeiro passo é criar um <img> com a imagem da seta de play obtida 
no link https://www.hashtagtreinamentos.com/wp-content/themes/hashtag/assets/img/player-azul.svg . Adicionamos ainda uma classe 
que nos permitirá manipular essa imagem, já que ela precisa ter um tamanho e posição específico. Não esqueça que teremos de usar 
position: Absolute e por isso o elemento pai (classe oquefalam-carrossel-img) deverá ter position: relative.
https://www.hashtagtreinamentos.com/wp-content/themes/hashtag/assets/img/player-azul.svg
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (11/14)
000 000
424
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A adição do tom azulado sobre as imagens depende do uso de uma nova propriedade chamada background-blend-mode, que nos 
permite definir como imagens de fundo devem se fundir com cores de fundo. Se preciso, consulte a referência no MDN: 
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode .
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (12/14)
000 000
425
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Indo para os estágios finais da seção, iremos agora adicionar os três pontos inferiores e o botão. Parte do botão já está pronta, pois 
usaremos classes já criadas anteriormente.
Ao final da seção crie uma div para cada um dos pontos que teremos, que no caso serão três. Associe uma nova classe padrão à eles. 
Note que no primeiro ponto colocamos uma classe adicional chamada ativa, para que ela tenha uma cor de destaque.
Os valores das cores podem ser obtidos inspecionando o elemento no site da Hashtag. No caso as cores são #86a8bc e #14577f.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (13/14)
000 000
426
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para dar um pouco mais de dinamismo ao carrossel, adicione a propriedade cursor:pointer aos seletores que controlam os elementos 
principais do carrossel. Isso fará que o ponteiro do mouse ganhe a forma de uma “mãozinha”, como se fosse um link.
Módulo 6 – Desafio 2 – Aprofundando a Seção O que falam (14/14)
000 000
427
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Por fim vamos construir o botão final da seção, e esta etapa já está bem adiantada, já que temos quase todas as classes e propriedades 
já prontas de outros botões que construímos. Lembre-se apenas de copiar a cor do gradiente.
E mais uma seção concluída!
Módulo 6 – Desafio 2 – Aprofundando a Seção Na mídia (1/4)
000 000
428
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Esta é uma seção bem mais curta que as outras, mas ainda será importante para reforçar o aprendizado. Como sempre, vamos começar 
modificando o html, incluindo a classe padrão secao e também uma nova classe específica para os estilos dessa seção. Por fim 
encapsulamos todo o conteúdo da seção dentro de um container.
Ao aplicar estes estilos e comparar com o original da página da Hashtag, notará que esta seção tem espaçamentos menores. Vamos 
adicionar um novo padding que irá sobrescrever o padrão.
Módulo 6 – Desafio 2 – Aprofundando a Seção Na mídia (2/4)
000 000
429
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Note que os elementos estão se empilhando ao invés de manter uma estrutura mais horizontal, então teremos de ajustar o tipo de 
visualização, da mesma forma que fizemos nas seções anteriores.
Comece pela imagem da seta dupla e depois siga para os elementos textuais.
Módulo 6 – Desafio 2 – Aprofundando a Seção Na mídia (3/4)
000 000
430
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como eventualmente iremos ajustar os posicionamentos quando tratarmos do layout, por hora iremos ajustar apenas o segundo 
elemento textual.
Prosseguimos agora adicionando uma imagem de fundo ao elemento. A imagem de fundo está em 
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUND-Banner-05_1.png . Vamos reutilizar os mesmo 
padrões das outras imagens de fundo.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUND-Banner-05_1.png
Módulo 6 – Desafio 2 – Aprofundando a Seção Na mídia (4/4)
000 000
431
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E encerramos mais uma seção! Haveria um pouco mais de alterações que poderíamos fazer, mas para essas alterações seriam desfeitas 
quando fossemos trabalhar o layout então já podemos parar por aqui.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (1/7)
000 000
432
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos mais uma vez iniciar a seção com o mesmo padrão de sempre: modificando o html, incluindo a classe padrão secao e também 
uma nova classe específica para os estilos dessa seção. Por fim encapsulamos todo o conteúdo da seção dentro de um container. 
Note também que teremos de adicionar uma cor de fundo e ainda criar uma caixa que funcionará como um outro container para 
abrigar o conteúdo da sessão. Todas essas coisas já foram trabalhadas, então vamos apenas reaproveitar o código CSS usado. A 
formatação da caixa é a mesma usada na seção Diferenciais.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (2/7)
000 000
433
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos então reaproveitar os estilos já criados no seletor .container-diferenciais.
Dessa forma estamos reaproveitando um seletor que já existia, aplicando seu estilo à outras classes. 
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (3/7)
000 000
434
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é criar a caixa de texto superior. Note que ela é praticamente idêntica à caixa de texto da seção conteúdos gratuitos 
que fizemos. 
Por conta disso, vamos reorganizar nossos seletores de formar a reaproveitar ao máximo o que já foi feito.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (4/7)
000 000
435
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Em outro ponto, nos seletores individuais da classe de cada caixa, deixamos os estilos específicos, que no caso são as cores do gradiente.
Como temos a caixa com um position: absolute, inserimos um position: relative no seletor da classe container-blog. Para que o texto 
da caixa ocupasse totalmente o espaço da caixa sem que houvesse quebra de linha, usamos o valor max-content para a propriedade 
width.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (5/7)
000 000
436
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos para as caixa do interior da seção. Não podemos esquecer de usar no escala de espaçamentos para garantir uma fluidez 
do visual da página. O primeiro passo será criar uma caixa que terá o conteúdo das postagens do blog. Se olharmos no html vamos 
notar que já temos uma <div> colocada apropriadamente, então basta apenas criar uma classe para ela.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (6/7)
000 000
437
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A caixa que iremos criar é bem parecida com as outras que já fizemos, inclusive com a caixa mais externa da classe container-blog. 
Vamos então copiar seus valores para ter uma caixa parecida, editando apenas alguns valores para que o visual fique mais agradável, 
afinal a caixa interna é um pouco menos arredondada e com uma sombra menor. Vamos também aproveitar para colocar o 
espaçamento necessário (lembre-se de testar alguns valores até achar um que te agrade) e vamos também diminuir o tamanho da 
caixa, já que ela é bem menor que a caixa externa maior.
Note o seletor para img que define que o tamanho máximo da imagem deve ser o tamanho da caixa.
Módulo 6 – Desafio 2 – Aprofundando o blog da Hashtag (7/7)
000 000
438
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Antes de finalizar esta seção, vamos formatar o texto dos conteúdos para que a fonte siga o nosso padrão de escala. Note que, como em 
outras seções anteriores, reaproveitamos o seletor de h3. Colocamos um inherit na cor, para que ele herde a cor padrão que vamos 
colocar mais à frente.
Vamos remover ainda uma estilização desnecessária, para que o corpo do texto tenha o tamanho de fonte padrão de nossa página. 
Basta apagar o .blog-descricaopost. Finalize então ajustando o .blog-postadoem para que a fonte e a altura de linha sejam 
compatíveis com nosso padrão de escala.
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (1/9)
000 000
439
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como de costume, nosso seção irá se iniciar implementando a classe secao e mais uma nova classe, que chamaremos de secao-
comoajudar. Em seguida colocamos todo o conteúdo da seção dentro de uma div com a classe container.
O próximo passo será dividir a seção inteira em duas partes, uma com e outra sem fundo. Esse processo é bem parecido com o que 
realizamos na seção Diferenciais, que tinha uma caixa com a parte superior com a cor azul.
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (2/9)
000 000
440
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como esta seção é dividida em duas partes, seremos obrigados a criar duas separações dentro da seção inteira. Usaremos então duas 
div’s e daremos a cada uma sua própria classe, para que possamos aplicar os estilos individualmente. Vamos então já dividir nossa 
seção com duas <div> e em cada uma implementar sua própria classe e container.
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (3/9)
000 000
441
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos agora começar a aplicar os estilos. Note que a primeira parte da seção tem um espaçamento um pouco diferente do que o que 
estamos habituados, então vamos começar mudando algumas coisas do espaçamento original. Começamos zerando o padding total e 
depois aplicando os espaço que são específicos de cada subseção (a laranja e a cinza).
Vamos começar com esses valores e depois ajustamos conforme necessário.
Módulo 6 – Desafio 2 –Aprofundando a seção Como Ajudar (4/9)
000 000
442
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é uma que já estamos acostumados, vamos inserir a imagem de fundo na seção laranja. A imagem de fundo pode ser 
obtida inspecionando o elemento na página da Hashtag ou direto neste link: https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/06/BACKGROUND-banner-07.png .
Não se esqueça de já adicionar as formatações padrões que temos usado.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUND-banner-07.png
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/BACKGROUND-banner-07.png
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (5/9)
000 000
443
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora temos de criar a primeira caixa de texto da seção. Note que ela é quase idêntica à caixa da seção blog. Então vamos copiar parte 
da estilização da caixa do blog. Não se esqueça de criar uma div e dar à ela uma classe no h2 que terá a caixa.
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (6/9)
000 000
444
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é fazer a caixa branca inferior, onde fica a lista de como ajudar. Como essa caixa é bem parecida com a que fizemos 
anteriormente na seção blog, vamos copiar o seletor .secao-postblog e fazer apenas algumas edições, como no desfoque e também no 
tipo de visualização. Neste caso vamos querer usar todo o espaço disponível, então vamos dispensar o inline-block. Não esqueça da cor 
de fundo.
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (7/9)
000 000
445
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como se trata de uma lista com bullet points, vamos precisar salvar a imagem que é usada que faz o sinal de “check”. A imagem está 
em: https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-check_1.png . Como será uma imagem que 
antecede o texto da lista, para cada item da lista (<li>) vamos adicionar a imagem do check.
https://www.hashtagtreinamentos.com/wp-content/uploads/2022/06/ELEMENTO-check_1.png
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (8/9)
000 000
446
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Aplicaremos o conceito do LVHA nos links da nossa lista. Vamos criar um estilo para cada uma das pseudo-classes Link, Visited, Hover e 
Active.
Temos ainda só mais um passo antes de encerrarmos. 
Módulo 6 – Desafio 2 – Aprofundando a seção Como Ajudar (9/9)
000 000
447
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O último passo é ajustar a cor de fundo do texto inferior da seção. A melhor forma de fazer isso é modificando o seletor da classe body, 
aplicando a cor de fundo à todo o documento. Fazendo isso poderemos remover algumas das estilizações de cor de fundo que também 
utilizem esse fundo claro (removemos da seção diferenciais e da seção blog).
Com isso nossa seção está pronta! As outras edições que faltam serão feitas quando lidarmos com layout.
Módulo 6 – Desafio 2 – Aprofundando a seção Minicurso (1/5)
000 000
448
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo o padrão das outras seções, vamos começar analisando a seção da página da Hashtag e começar a aplicar os estilos 
necessários. Apenas analisando essa seção, já sabemos que precisaremos aplicar um fundo, que no caso da seção é uma imagem, mas 
para o desafio podemos usar um gradiente de cor. A vantagem de usar um gradiente de cor ao invés de uma imagem, é que um 
gradiente é bem mais rápido de carregar que uma imagem.
O próximo passo é modificar o html de nossa página, aplicando a classe da seção e também do container.
Módulo 6 – Desafio 2 – Aprofundando a seção Minicurso (2/5)
000 000
449
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Após isso vamos para o CSS, onde começaremos a estilizar a seção Minicurso, criando o gradiente de cor. Depois temos de sobrescrever 
a cor da fonte, já que nesta seção em específico a cor é branca.
Módulo 6 – Desafio 2 – Aprofundando a seção Minicurso (3/5)
000 000
450
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguimos agora com os elementos mais internos, inicialmente vamos criar o botão de enviar, que é parecido com outros botões feitos 
nas outras seções.
Aplicamos também o uso da pseudo-classe Hover no botão, para estiliza-lo quando for tocado pelo ponteiro do mouse.
Módulo 6 – Desafio 2 – Aprofundando a seção Minicurso (4/5)
000 000
451
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos formatar os campos de formulário, que ainda estão com o padrão do html. Como existem vários campos (inclusive na seção do 
rodapé), vamos fazer uso de um seletor mais geral. Colocamos uma formatação para a fonte para substituir a fonte padrão usada no 
input.
Podemos continuar estilizando o campo, formatando o texto interno do input.
Módulo 6 – Desafio 2 – Aprofundando a seção Minicurso (5/5)
000 000
452
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Antes de finalizar esta seção vamos observar o campo de input quando clicamos nele.
Note que no campo email existe uma espécie de borda preta. Isso ocorre porque o html automaticamente criar essa borda nos 
elementos que estão em foco. Se quisermos, podemos remover essa borda utilizando o CSS.
Pronto! E já temos mais uma seção encerrada! O próximo passo agora é a seção final, o rodapé.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (1/8)
000 000
453
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Feita a análise inicial da página da Hashtag, vamos iniciar com o processo usual de colocar todo o conteúdo da seção dentro da classe 
container e este container numa div com as classes secao e rodape.
Já demos uma classe à imagem do logo da Hashtag para que possamos redimensionar a imagem do rodapé.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (2/8)
000 000
454
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Atualize os espaçamentos do rodapé, indo até as classes que já estavam prontas e ajustando as medidas para que elas passem a seguir 
o padrão do type scale que escolhemos no início do desafio. Aumente o font-weight dos elementos para dar um pouco mais de 
relevância ao texto (agrupe eles num único seletor). Agrupe as outras classes num seletor global que já contenha as formatações que 
queremos.
Os espaçamentos fazem parte do layout, então o próximo passo é editar os ícones SVG para que eles fiquem no tamanho padrão. 
Poderíamos usar uma classe para cada SVG, mas é mais prático utilizar um seletor em todos os SVG que estejam dentro do rodapé.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (3/8)
000 000
455
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Repare que nos ícones das redes sociais, que estão dentro de uma âncora, temos um efeito azulado, como um texto que está ali por 
engano. Isso ocorre porque por ser um link, o navegador tenta inserir algum destaque em relação ao LVHA. Vamos formatar essas 
âncoras.
Para essa formatação damos uma classe à cada âncora e depois a cor transparente, para que o traço desapareça.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (4/8)
000 000
456
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Ajustamos os links da seção para que eles tenha uma cor de destaque quando sofrem a ação de hover ou estiver ativo. Não vamos 
aplicar completamente o LVHA pois estamos copiando a página da Hashtag, que optou por não estilizar o link em todos os sentidos, 
por uma escolha de design.
Outro ponto importante a ser copiado da página, é o comportamento dos SVGs quando estes sofrem a ação de hover.
Crie uma formatação para que o ícone tenha o mesmo comportamento.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (5/8)
000 000
457
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos agora criar a caixa lateral com o formulário do newsletter. Tanto essa caixa quanto o botão contido nela são bem parecidos com 
outras caixas e botões que já fizemos. O detalhe aqui é que no html usaremos o <form> como tag para receber aclasse que terá a 
formatação.
Criaremos então a formatação copiando do .comoajudar-lista, mudando apenas os valores que não são iguais, como a cor.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (6/8)
000 000
458
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para o botão não será tão diferente. Vamos adicionar uma classe para o botão, copiar as formatações já existentes de botões anteriores, 
formatando da maneira que ficará melhor para nós.
Para finalização do botão, vamos utilizar a pseudo-classe hover para estilizar o botão como necessário.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (7/8)
000 000
459
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos finalizar agora formatando o botão do whatsapp. Essa é uma tarefa também parecida com outras que já fizemos, iremos 
redimensionar o ícone e posicioná-lo. Não se esqueça de que temos de ainda formatar a imagem, para que ele ocupe apenas o espaço 
máximo do container.
Módulo 6 – Desafio 2 – Aprofundando o Rodapé (8/8)
000 000
460
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Formatamos ainda uma ação de hover, já que o ícone sofre uma pequena alteração quando o mouse paira sobre ele. Iremos utilizar a 
propriedade transform e testar alguns valores, até que seu deslocamento seja parecido com o da página da Hashtag.
E é isso! Com isso encerramos essa etapa do desafio, tendo uma página muito parecida com a home da Hashtag. 
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55
	Slide 56
	Slide 57
	Slide 58
	Slide 59
	Slide 60
	Slide 61
	Slide 62
	Slide 63
	Slide 64
	Slide 65
	Slide 66
	Slide 67
	Slide 68
	Slide 69
	Slide 70
	Slide 71
	Slide 72
	Slide 73
	Slide 74
	Slide 75
	Slide 76
	Slide 77
	Slide 78
	Slide 79
	Slide 80
	Slide 81
	Slide 82
	Slide 83
	Slide 84
	Slide 85
	Slide 86
	Slide 87
	Slide 88
	Slide 89
	Slide 90
	Slide 91
	Slide 92
	Slide 93
	Slide 94
	Slide 95
	Slide 96
	Slide 97
	Slide 98
	Slide 99
	Slide 100
	Slide 101
	Slide 102
	Slide 103
	Slide 104
	Slide 105
	Slide 106
	Slide 107
	Slide 108
	Slide 109
	Slide 110
	Slide 111
	Slide 112
	Slide 113
	Slide 114
	Slide 115
	Slide 116
	Slide 117
	Slide 118
	Slide 119
	Slide 120
	Slide 121
	Slide 122
	Slide 123
	Slide 124
	Slide 125
	Slide 126
	Slide 127
	Slide 128
	Slide 129
	Slide 130
	Slide 131
	Slide 132
	Slide 133
	Slide 134
	Slide 135
	Slide 136
	Slide 137
	Slide 138
	Slide 139
	Slide 140
	Slide 141
	Slide 142
	Slide 143
	Slide 144
	Slide 145
	Slide 146
	Slide 147
	Slide 148
	Slide 149
	Slide 150
	Slide 151
	Slide 152
	Slide 153
	Slide 154
	Slide 155
	Slide 156
	Slide 157
	Slide 158
	Slide 159
	Slide 160
	Slide 161
	Slide 162
	Slide 163
	Slide 164
	Slide 165
	Slide 166
	Slide 167
	Slide 168
	Slide 169
	Slide 170
	Slide 171
	Slide 172
	Slide 173
	Slide 174
	Slide 175
	Slide 176
	Slide 177
	Slide 178
	Slide 179
	Slide 180
	Slide 181
	Slide 182
	Slide 183
	Slide 184
	Slide 185
	Slide 186
	Slide 187
	Slide 188
	Slide 189
	Slide 190
	Slide 191
	Slide 192
	Slide 193
	Slide 194
	Slide 195
	Slide 196
	Slide 197
	Slide 198
	Slide 199
	Slide 200
	Slide 201
	Slide 202
	Slide 203
	Slide 204
	Slide 205
	Slide 206
	Slide 207
	Slide 208
	Slide 209
	Slide 210
	Slide 211
	Slide 212
	Slide 213
	Slide 214
	Slide 215
	Slide 216
	Slide 217
	Slide 218
	Slide 219
	Slide 220
	Slide 221
	Slide 222
	Slide 223
	Slide 224
	Slide 225
	Slide 226
	Slide 227
	Slide 228
	Slide 229
	Slide 230
	Slide 231
	Slide 232
	Slide 233
	Slide 234
	Slide 235
	Slide 236
	Slide 237
	Slide 238
	Slide 239
	Slide 240
	Slide 241
	Slide 242
	Slide 243
	Slide 244
	Slide 245
	Slide 246
	Slide 247
	Slide 248
	Slide 249
	Slide 250
	Slide 251
	Slide 252
	Slide 253
	Slide 254
	Slide 255
	Slide 256
	Slide 257
	Slide 258
	Slide 259
	Slide 260
	Slide 261
	Slide 262
	Slide 263
	Slide 264
	Slide 265
	Slide 266
	Slide 267
	Slide 268
	Slide 269
	Slide 270
	Slide 271
	Slide 272
	Slide 273
	Slide 274
	Slide 275
	Slide 276
	Slide 277
	Slide 278
	Slide 279
	Slide 280
	Slide 281
	Slide 282
	Slide 283
	Slide 284
	Slide 285
	Slide 286
	Slide 287
	Slide 288
	Slide 289
	Slide 290
	Slide 291
	Slide 292
	Slide 293
	Slide 294
	Slide 295
	Slide 296
	Slide 297
	Slide 298
	Slide 299
	Slide 300
	Slide 301
	Slide 302
	Slide 303
	Slide 304
	Slide 305
	Slide 306
	Slide 307
	Slide 308
	Slide 309
	Slide 310
	Slide 311
	Slide 312
	Slide 313
	Slide 314
	Slide 315
	Slide 316
	Slide 317
	Slide 318
	Slide 319
	Slide 320
	Slide 321
	Slide 322
	Slide 323
	Slide 324
	Slide 325
	Slide 326
	Slide 327
	Slide 328
	Slide 329
	Slide 330
	Slide 331
	Slide 332
	Slide 333
	Slide 334
	Slide 335
	Slide 336
	Slide 337
	Slide 338
	Slide 339
	Slide 340
	Slide 341
	Slide 342
	Slide 343
	Slide 344
	Slide 345
	Slide 346
	Slide 347
	Slide 348
	Slide 349
	Slide 350
	Slide 351
	Slide 352
	Slide 353
	Slide 354
	Slide 355
	Slide 356
	Slide 357
	Slide 358
	Slide 359
	Slide 360
	Slide 361
	Slide 362
	Slide 363
	Slide 364
	Slide 365
	Slide 366
	Slide 367
	Slide 368
	Slide 369
	Slide 370
	Slide 371
	Slide 372
	Slide 373
	Slide 374
	Slide 375
	Slide 376
	Slide 377
	Slide 378
	Slide 379
	Slide 380
	Slide 381
	Slide 382
	Slide 383
	Slide 384
	Slide 385
	Slide 386
	Slide 387
	Slide 388
	Slide 389
	Slide 390
	Slide 391
	Slide 392
	Slide 393
	Slide 394
	Slide 395
	Slide 396
	Slide 397
	Slide 398
	Slide 399
	Slide 400
	Slide 401
	Slide 402
	Slide 403
	Slide 404
	Slide 405
	Slide 406
	Slide 407
	Slide 408
	Slide 409
	Slide 410
	Slide 411
	Slide 412
	Slide 413
	Slide 414
	Slide 415
	Slide 416
	Slide 417
	Slide 418
	Slide 419
	Slide 420
	Slide 421
	Slide 422
	Slide 423
	Slide 424
	Slide 425
	Slide 426
	Slide 427
	Slide 428
	Slide 429
	Slide 430
	Slide 431
	Slide 432
	Slide 433
	Slide 434
	Slide 435
	Slide 436
	Slide 437
	Slide 438
	Slide 439
	Slide 440
	Slide 441
	Slide 442
	Slide 443
	Slide 444
	Slide 445
	Slide 446
	Slide 447
	Slide 448
	Slide 449
	Slide 450
	Slide 451
	Slide 452
	Slide 453
	Slide 454
	Slide 455
	Slide 456
	Slide 457
	Slide 458
	Slide 459
	Slide 460