Técnico em Informática

HTML / CSS
 GOVERNADOR
Elmano de Freitas da Costa

VICE-GOVERNADORA
Jade Afonso Romero

SECRETARIA DA EDUAÇÃO
Eliana Nunes Estrela

SECRETARIA EXECUTIVA DO ENSINO MÉDIO E DA EDUCAÇÃO PROFISSIONAL

Jucineide Fernandes

COORDENADORIA DA EDUCAÇÃO PROFISSIONAL

Rodolfo Sena da Penha

ORIENTADORA CÉLULA DE DESENVOLVIMENTO CURRICULAR E DO ENSINO TÉCNICO

Maria Alves de Melo

ORIENTADORA DA CÉLULA DE ESTÁGIO

Rivanir Maria Bezerra

NÚCLEO DE PROJETOS – COEDP

Antônio Moura Filho

COORDENADOR TÉCNICO PEDAGÓGICO DO EIXO: INFORMAÇÃO E COMUNICAÇÃO

Renanh Gonçalves de Araújo

EQUIPE DE ELABORAÇÃO
Renanh Gonçalves de Araújo
Francisco Aglayrton de Araújo Julião
Carlos Elmen Gerônimo de Andrade

3
 Caros professores do Eixo de Informação e Comunicação,

É com imenso reconhecimento e gratidão que nos dirigimos a

MENSAGEM AO PROFESSOR

vocês, pilares fundamentais na formação de nossos jovens

estudantes. Em um mundo cada vez mais digitalizado e conectado,
o papel de vocês se torna crucial para preparar nossos alunos não
apenas para enfrentar os desafios do presente, mas também para
inovar e liderar no futuro.

O trabalho que vocês realizam nas Escolas Estaduais de Educação

Profissional transcende o ensino de habilidades técnicas; vocês
estão moldando cidadãos capazes de compreender e transformar
o mundo através da tecnologia e da comunicação. Graças ao seu
empenho, dedicação e expertise, nossos estudantes estão se
destacando em competências digitais essenciais para o século XXI.

Neste contexto, reiteramos nosso compromisso de apoiar cada um

de vocês com recursos didáticos atualizados, infraestrutura de
ponta e oportunidades contínuas de desenvolvimento profissional.
Estamos juntos nesta missão de fazer da educação cearense um
modelo de inovação e qualidade.

Continuem a inspirar, educar e transformar. A importância do

trabalho de vocês não pode ser subestimada, e cada conquista de
nossos alunos é também uma celebração do esforço e paixão que
vocês dedicam à educação.

5
Caros alunos,

Vocês estão em uma jornada incrível e transformadora no Eixo

MENSAGEM AO ESTUDANTE
de Informação e Comunicação das nossas Escolas Estaduais de
Educação Profissional. Este é um campo vibrante e essencial,
onde as fronteiras da tecnologia e da inovação se encontram
com as necessidades humanas e sociais.

Cada um de vocês foi escolhido para este caminho porque

demonstrou capacidade e interesse em moldar o futuro. Em suas
mãos, a tecnologia não é apenas uma ferramenta, mas um meio
de criar soluções inovadoras para os desafios que nossa
sociedade enfrenta. Vocês estão aprendendo não só a como
operar tecnologias avançadas, mas também a pensar
criticamente sobre como elas podem ser usadas para o bem
comum.

Lembrem-se, a educação que vocês estão recebendo é

projetada para não apenas abrir portas no mercado de trabalho,
mas também para capacitar vocês a serem pensadores
independentes, inovadores capazes e cidadãos responsáveis.
Vocês são a próxima geração de profissionais que liderarão a
transformação digital em nosso estado e além.

Encorajamos vocês a aproveitar cada oportunidade de

aprendizado, a questionar e explorar, e a não ter medo de falhar,
pois é através dos erros que muitas vezes encontramos os
maiores aprendizados. Estamos aqui para apoiar cada passo de
seu crescimento, celebrar suas conquistas e ajudá-los a superar
os desafios.

Sigam em frente com curiosidade, paixão e determinação. O

futuro está esperando por vocês para moldá-lo.

6
 1. INTRODUÇÃO 9
1.1. Breve História do HTML 9
SUMÁRIO
1.2. Introdução ao HTML 9
2. ELEMENTOS HTML FUNDAMENTAIS 9
2.1. O Uso de Tags 9
2.2. Tags de abertura e fechamento 9
2.3. Atributos 10
2.4. Estrutura básica de um documento HTML 10
3. TÍTULOS E PARÁGRAFOS 13
4. FORMATAÇÃO DE TEXTO 14
5. LISTAS 15
5.1. Listas Ordenadas 15
5.2. Não Ordenadas 16
6. HIPERLINKS 16
7. MULTIMÍDIA EM HTML 18
7.1. Imagens 18
7.2. Vídeos 20
7.3. Formatos de arquivo suportados 21
8. TABELAS 22
8.1. Como criar tabelas 22
8.2. Estrutura de uma tabela 22
8.3. Atributos de tabela 23
9. ELEMENTOS DE BLOCO ELEMENTOS INLINE 25
9.1. Elementos de Bloco (Block-level elements) 25
9.2. Elementos Inline (Inline-level elements) 25
10. FORMULÁRIOS 26
11. HTML SEMÂNTICO 28
11.1. O que é html semântico? 28
11.2. Novas tags semânticas em HTML 28
12. INTRODUÇÃO À CSS 30
12.1. Definição 30
12.2. Finalidade 30
12.3. Regra CSS 30
12.4. Estilos 32
12.4.1. Estilos inline 32
12.4.2. Estilos incorporados 32
12.4.3. Estilos externos 34

7
 12.5 Organização dos arquivos 35
13. CORES E PLANO DE FUNDO 36
13.1. Background-Repeat 38
13.2. Background-Position 39
13.2.1 Opções para background-position 39
13.3. Background-Attachment 40
13.3.1 Opções para background-attachment 40
13.4. Background-Size 41
13.5. Fonte 41
13.6. Pseudo-classe 46
13.7. Agrupamentos 47
13.8. Largura e Altura 49
13.9. Bordas 50
14. MODELO DE CAIXA BOX 52
14.1. Padding 52
14.2. Margin 53
15. DIRECIONANDO E FLUTUANDO ELEMENTOS 55
16. POSICIONAMENTO 57
17. DISPLAY 60
18. FLEXBOX 63
19. CRIAÇÃO DE UMA LANDING PAGE 74
19.1. HTML 75
19.2. CSS 77
20. REFERÊNCIAS 81

8
INTRODUÇÃO

Breve História do HTML

O HTML (Hypertext Markup Language) foi criado em 1991 por Tim Berners-Lee, um
cientista da computação britânico, na CERN (Organização Europeia para a Pesquisa
Nuclear) na Suíça. Inicialmente, o HTML foi projetado para interligar instituições de
pesquisa próximas e compartilhar documentos com facilidade. O HTML surgiu junto com o
HTTP, ambos possibilitaram a internet ser popularizada.

Nos primeiros cinco anos (1990-1995), o HTML passou por várias revisões e
experimentou várias extensões, hospedadas primeiramente no CERN e depois no IETF.
Com a criação do W3C, o desenvolvimento do HTML mudou de local novamente.

Introdução ao HTML

HTML (Hypertext Markup Language) é a linguagem base para construção das

páginas web que acessamos diariamente. Seu conhecimento é fundamental para todo
programador web. O HTML abrange todo o básico, definindo elementos, atributos e outros
termos importantes, e mostrando onde eles se encaixam na linguagem..

ELEMENTOS HTML FUNDAMENTAIS

O Uso de Tags

As tags HTML são os elementos fundamentais no desenvolvimento de websites e

aplicações web. Elas permitem a estruturação e a formatação do conteúdo, bem como a
inclusão de imagens, vídeos e outros recursos.

Tags de abertura e fechamento

As tags HTML são constituídas por uma palavra-chave entre os sinais de menor e
maior, como <tag> (abertura). Para fechar uma tag, utiliza-se a barra ("/") antes da palavra-
chave, como </tag>. A maioria das tags possui uma abertura e fechamento, por exemplo:
<h1>título</h1> criando assim um elemento que envolve o conteúdo, embora algumas
sejam auto-fechados, como <img />.

9
 Obs: As tags HTML não são case sensitive, ou seja, não diferenciam letras
maiúsculas de minúsculas. Portanto, tanto faz você escrever <html></html> como
<HTML></HTML> porém, por boas práticas de condutas, é indicado que tudo seja inscrito
em caixa baixa (letras minúsculas).

Atributos

Os atributos HTML são palavras especiais usadas dentro da tag de abertura para
controlar o comportamento do elemento. Eles são um modificador de um tipo de elemento
HTML. Com eles, podemos identificar melhor um elemento, informar qual arquivo aquela
tag deve utilizar, indicar o tipo de um campo de texto, entre outros. A sintaxe dos atributos
em tags HTML é a seguinte:

<nome_do_comando atributo1="valor1" atributo2="valor2">

Por exemplo, na tag de imagem (<img>), os atributos comuns incluem src (que define
a fonte da imagem) e alt (que fornece um texto alternativo para a imagem). Por exemplo

<img src=”[Link]” alt=”foto-de-perfil” />

Os atributos podem ser classificados em três categorias:

1. Atributos requeridos: são atributos necessários para a etiqueta HTML. Sem eles,
a etiqueta por si só não terá o comportamento esperado.
2. Atributos opcionais: esses atributos são utilizados para modificar a
funcionalidade por defeito da etiqueta HTML.
3. Atributos globais: são atributos de âmbito geral que podem ser utilizados em
quase qualquer etiqueta HTM.

Entenderemos melhor no decorrer do conteúdo.

Estrutura básica de um documento HTML

A estrutura básica de um documento HTML é composta por tags que delimitam as

partes do documento, como <html>, <head>, <title>, <body>, e outras. Aqui está um
exemplo de como a estrutura básica de um documento HTML se parece:

10
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<!-- Conteúdo da página aqui -->
</body>
</html>

● <!DOCTYPE html>Esta declaração define o tipo de documento e a versão do

HTML (neste caso, HTML5).
● <html lang="pt-br">Esta tag é a raiz do documento HTML e o valor do atributo lang
define o idioma do documento.
● <head>Esta tag contém meta informações sobre o documento HTML, como o título
da página e o conjunto de caracteres.
● <meta charset="UTF-8">Esta tag define o conjunto de caracteres usado no
documento.
● <title>Esta tag define o título da página, que é exibido na aba do navegador.
● <body>Esta tag contém o conteúdo da página que será exibido no navegador.

Você pode copiar o código acima em um bloco de notas, salvar como [Link] e
depois abrir o documento no navegador, exemplo:

Salve como [Link]

11
 Agora clique duas vezes no arquivo com o nome index (caso o seu não fique com o
símbolo do chrome, não tem problema, basta clicar com o botão direito em cima e depois
abrir com um navegador de sua preferência). Exemplo do arquivo [Link]:

O resultado será:

Agora que você entendeu o que é o HTML e está começando na introdução, vamos
nos aprofundar mais ainda nesse assunto, e para isso, vamos instalar um Editor de Código.
Faça o download e instale. O endereço eletrônico abaixo:

[Link]

12
 Você pode deixar com o idioma em português do brasil, basta ir na opção de
extensões e instalar.

Após isso, basta fechar e abrir o VsCode.

TÍTULOS E PARÁGRAFOS:

○ <h1> a <h6>: São usadas para definir títulos e subtítulos, sendo <h1> o
título de maior importância e <h6> o de menor importância.
○ <p>: É usada para definir um parágrafo.

Exemplo:

Resultado no navegador:

13
FORMATAÇÃO DE TEXTO:

Os elementos de formatação foram projetados para exibir tipos especiais de texto:

● <b>- Texto em negrito

● <strong>- Texto importante
● <i>- Texto em itálico
● <em>- Texto enfatizado
● <mark>- Texto marcado
● <small>- Texto menor
● <del>- Texto excluído
● <ins>- Texto inserido
● <sub>- Texto subscrito
● <sup>- Texto sobrescrito

Abaixo temos o código de exemplo:

Resultado:

Observe que o código está bem alinhado, isso se dá devido a prática de identação
do código, que nada mais é que a organização do código, então no VsCode para que ele
faça isso, basta usar as teclas de atalho: alt + shift + f.

14
LISTAS

As listas são uma ótima maneira de organizar informações de maneira clara e concisa.

Listas Ordenadas

Use listas ordenadas quando a ordem dos itens é importante. Por exemplo, se você
estiver listando as etapas para realizar uma tarefa, uma lista ordenada seria apropriada.

● Exemplo:
1. Pré-aqueça o forno a 180 graus.
2. Misture a farinha, o açúcar e o fermento em uma tigela grande.
3. Adicione os ovos e a manteiga e misture bem.

<ol>: Define uma lista ordenada, e <li> define cada item da lista.

<ol>
<li>Pré-aqueça o forno a 180 graus.</li>
<li>Misture a farinha, o açúcar e o fermento em uma tigela grande.</li>
<li>Adicione os ovos e a manteiga e misture bem.</li>
</ol>
Resultado:

Você pode mudar o tipo e ordem adicionando os atributos na tag <ol></ol>, como
“type” indicando se serão letras , algarismo romanos ou números (padrão), assim como
“start” que especifica o valor inicial para numeração dos itens da lista. Exemplo:

<ol start="3" type="I">

<li>Item um</li>
<li>Item dois</li>
<li>Item três</li>
</ol>

15
 Resultado:

Não Ordenadas

<ul> Define uma lista não ordenada, e <li> define cada item da lista3.

Use listas não ordenadas quando a ordem dos itens não é importante. Por exemplo,
se você estiver listando uma série de itens que podem ser usados em uma receita, uma
lista não ordenada seria apropriada. Exemplo:

Resultado:

HIPERLINKS

Em HTML são links que permitem vincular nossos documentos a qualquer outro
documento que queremos. Também podemos vincular para partes específicas de
documentos e podemos disponibilizar aplicativos em um endereço web simples. Qualquer
conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de
outra forma) faça com que o navegador vá para outro endereço (URL).
Sua tag começa <a> e fecha </a>, além disso existe o atributo “href” que diz para
ser redirecionado. Dito isso, existem algumas nuances que vale a pena considerar:

16
 ● Link interno: Um link entre duas páginas da web, em que ambas as páginas
pertencem ao mesmo site, é chamado de link interno.
● Link externo: Um link de sua página da web para a página de outra pessoa.
● Links de âncora: São usados para criar links que podem levar o usuário a
diferentes partes de uma página web (dentro dela mesmo.

Exemplo de Link Interno:

Exemplo de Link externo:

Exemplo Âncora:

Digamos que você está criando uma landing page (site com 1 única página
navegável nele mesmo), então com a âncora, ao clicar, em nosso exemplo, você será
redirecionado(a) a parte marcada com o #nomedolocaldentrodosite, por exemplo, o código
acima vai para um parágrafo que tem o id com o mesmo nome do link vertical.

Exemplo:

Podemos até usar comandos de links para criar um download de arquivos. Exemplo:

17
MULTIMÍDIA EM HTML

Imagens

Para incorporar imagens em HTML, usamos a tag <img>, além disso, temos
atributos da tag, segue abaixo:

● O atributo src é usado para especificar o caminho para a imagem.

● O atributo alt é usado para fornecer uma descrição textual da imagem, que será
exibida caso a imagem não possa ser carregada.
● O atributo width define a largura da imagem.
● O atributo height define a altura da imagem.
● O atributo title define informações adicionais para o elemento. Caso passe o mouse
em cima da imagem, o texto será exibido.

Exemplo:

Resultado:

Caso a imagem não exista:

18
 Temos também. mas não obrigatório, a tag <figure> que no HTML é usada para
representar conteúdo independente, frequentemente com uma imagem e uma legenda
associada, que é definida pela tag <figcaption>. O conteúdo dentro de <figure> deve ser
relacionado ao fluxo principal do documento, mas pode ser posicionado como
independente, o que significa que, se removido, o fluxo principal do documento não será
afetado. Aqui está uma explicação detalhada das tags:
● <figure>: Serve como um contêiner para algum tipo de conteúdo autônomo,
geralmente uma imagem ou ilustração, junto com sua legenda. Pode ser usado para
fotos, diagramas, códigos, entre outros.
● <img>: É a tag usada para incorporar uma imagem no documento. O atributo src
especifica o caminho para a imagem que você deseja exibir, enquanto o atributo alt
fornece uma descrição alternativa que será mostrada se a imagem não puder ser
carregada.
● <figcaption>: Define a legenda para o conteúdo de <figure>. A legenda pode
descrever o que está na imagem ou fornecer uma explicação adicional sobre o
conteúdo da figura.
Quando usadas juntas, <figure> e <figcaption> criam uma associação clara entre a
imagem e sua legenda, o que é benéfico para acessibilidade e SEO, pois os mecanismos
de busca e tecnologias assistivas podem entender melhor o conteúdo e seu contexto.

Exemplo:

Resultado:

19
Vídeos

Para incorporar vídeos em HTML, usamos a tag <video>. O atributo src é usado
para especificar o caminho para o vídeo. Além disso, existem vários atributos em HTML
que podem ser usados para controlar a reprodução de mídia. São esses:
● controls: Exibe controles de reprodução do vídeo.
● autoplay: Inicia a reprodução do vídeo assim que ele estiver pronto.
● loop: Faz o vídeo começar novamente toda vez que termina.
● muted: Silencia o vídeo.
● Width: Largura do vídeo.
● Height: Altura do vídeo.
Exemplo:

Resultado:

Além disso, podemos incorporar vídeos do youtube, sem precisar termos o vídeo
baixado em nosso computador, no caso basta ir até o youtube, clicar em incorporar,
exemplo:

20
Depois disso basta copiar e colar o código e inserir no seu HTML

Essa prática na verdade é de um iframe (página externa com conteúdo) onde você
poderá inserir o vídeo no código HTML.

Formatos de arquivo suportados

HTML suporta vários formatos de arquivo para imagens e vídeos.

Imagens:
● JPEG
● PNG
● GIF
● SVG
● WebP
Vídeos:
● MP4
● WebM
● Ogg

21
TABELAS

Usa elemento <table> HTML representa dados tabulares — isto é, informações

apresentadas em uma tabela bidimensional composta por linhas e colunas de células
contendo dados. Abaixo temos as tags para uma tabela:
● <table> É usada para criar uma tabela.
● <thead> É usada para agrupar o conteúdo do cabeçalho em uma tabela.
● <tr> Indica uma linha da tabela.
● <th> Define uma célula de cabeçalho em uma tabela.
● <tbody> É usado para agrupar o corpo do conteúdo em uma tabela.
● <td> É usado para criar uma célula de dados padrão em uma tabela.
● <tfoot> É usado para agrupar o conteúdo do rodapé em uma tabela.

Exemplo:

22
 O resultado:

Atributos De Tabela

Está sem a borda devido não estarmos utilizando o atributo border, fazemos isso
com CSS, mas já que é uma explicação de HTML, basta inserir no table e indicar sua
espessura. Você pode aplicar no código acima o atributo border.

Exemplo:

O resultado:

Além disso, ainda temos outros atributos para tabelas como:

● colspan: O atributo colspan é usado para especificar quantas colunas uma célula de
tabela deve ocupar. O “col” vem de “column” (coluna) e “span” significa “expandir”
ou “abranger”. Portanto, colspan é usado para expandir células para que ocupem o
tamanho de quantas colunas quisermos.
● rowspan: O atributo rowspan é usado para especificar quantas linhas uma célula de
tabela deve ocupar. Assim como colspan, “row” vem de “row” (linha) e “span”
significa “expandir” ou “abranger”. Portanto, rowspan é usado para expandir células
para que ocupem o tamanho de quantas linhas quisermos.

23
 Exemplo do código abaixo:

Resultado:

Acima é possível visualizar o tamanho da célula com base nos comandos. Esses
atributos são muito úteis para criar tabelas mais complexas e personalizadas em HTML.

24
Obs: Não falaremos sobre cellspacing e cellpadding, pois não é interessante para a versão
HTML5, pois se usa CSS.

ELEMENTOS DE BLOCO ELEMENTOS INLINE

Elementos de Bloco (Block-level elements):

Os elementos HTML podem ser classificados em dois tipos principais: elementos de

bloco e elementos inline.

● Formam a estrutura principal da página3.

● Geram automaticamente uma quebra de linha antes e outra quebra depois do
elemento.
● Ocupam toda a largura disponível.
Exemplos: <div>, <h1>, <p>, <form>.

Elementos Inline (Inline-level elements):

● Fluem com o conteúdo.

● Não geram quebra de linha e são exibidos no mesmo bloco no qual estão
inseridos.
● Ocupam apenas o espaço necessário.

Exemplo:

Resultado:
a div empurrou o span para baixo, já o span ficou do lado da tag de link

25
FORMULÁRIOS

Em HTML são documentos ou ferramentas que permitem coletar informações de

maneira estruturada. Eles são uma forma eficiente de obter dados de várias pessoas de
maneira organizada e padronizada. Os formulários podem ser físicos, como os impressos
em papel, ou digitais, como os encontrados em sites e aplicativos.
Para criar um formulário em HTML, você pode usar a tag <form>, que define o
formulário, e dentro dela, você pode colocar vários elementos <input>, que são os campos
onde os usuários podem inserir informações. Além disso, você pode usar outros elementos
HTML para entrada de dados que não são definidos com <input>, como <select> e
<textarea>

Existem diferentes tipos de inputs de formulário que você pode usar, dependendo do
tipo de informação que você deseja coletar. Alguns dos tipos de input mais comuns incluem:

● text: Para entrada de texto simples.

● e-mail: Para entrada de e-mail.
● password: Oculta os caracteres digitados, ideal para senhas.

Exemplo:

26
 O resultado:

Mais elementos HTML que fazem parte do formulário:

● checkbox: Permite ao usuário selecionar ou desselecionar uma opção.

● radio: Permite que o usuário selecione apenas uma das opções exibidas.
● submit: Define um botão para enviar os dados do formulário.
● reset: Define um botão para resetar todos os valores do formulário aos valores por
defeito.

Exemplo:

27
 Resultado:

HTML Semântico

É quando o código HTML está descritivo, utilizando tags que são consideradas
semânticas. Isso deixa o código mais organizado e de fácil manutenção. O HTML semântico
tem como objetivo descrever o significado do conteúdo presente em documentos HTML,
tornando-o mais claro tanto para programadores quanto para browsers e outras engines
que processam essa informação.

Novas Tags Semânticas em Html5

As novas tags semânticas em HTML5 são marcações que agregam mais

significado ao HTML ao prover uma ligação entre o conteúdo e a estrutura de documentos
desse tipo. Alguns exemplos de novas tags semânticas em HTML5 são: <article>, <aside>,
<nav>, <section>, <footer>, <header>, <main>. Para usar tags semânticas corretamente,
é fundamental compreender a estrutura e o propósito do conteúdo em uma página. Ao
estruturar um documento HTML, é recomendado utilizar as tags semânticas de forma
hierárquica, definindo claramente a relação entre os elementos. Por exemplo, a tag
<header> é utilizada para representar o cabeçalho de um documento ou seção declarado
no HTML. O elemento <section> representa uma seção dentro de um documento e
geralmente contém um título. Utilizamos o elemento <article> quando precisamos declarar
um conteúdo que não precisa de outro para fazer sentido em um documento HTML, por
exemplo, um artigo em um blog. O elemento <nav> é utilizado quando precisamos
representar um agrupamento de links de navegação. O elemento <aside> é utilizado
quando precisamos criar um conteúdo de apoio/adicional ao conteúdo principal.

Abaixo temos um código de exemplo:

28
 Neste exemplo, a tag <header> é usada para o cabeçalho da página, que inclui o
título da página e a navegação. A tag <main> é usada para o conteúdo principal da página,
que inclui um <article> para o conteúdo do artigo e um <aside> para conteúdo adicional
relacionado ao artigo principal. Finalmente, a tag <footer> é usada para o rodapé da página.
Resultado sem CSS:

Com estilização em CSS podemos ter outro resultado, exemplo abaixo:

29
INTRODUÇÃO À CSS, MÉTODOS INLINE, INTERNO E EXTERNO

CSS é a abreviação para o termo em inglês Cascading Style Sheet, traduzido para
o português como folhas de estilo em cascata. Neste livro, adotaremos CSS como
abreviação e folhas de estilo em cascata para o termo por extenso.

Definição

A definição mais precisa e simples para folha de estilo encontra-se na homepage

das CSS no site do W3C e diz:“Folha de estilo em cascata é um mecanismo simples para
adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.”

Finalidade

As CSS têm por finalidade devolver à marcação HTML/XML o propósito inicial da

linguagem. A HTML foi criada para ser uma linguagem exclusivamente de marcação e
estruturação de conteúdos. Isso significa que, segundo seus idealizadores, não cabe à
HTML fornecer informações ao agente do usuário sobre a apresentação dos elementos.
Por exemplo: cores de fontes, tamanhos de textos, posicionamentos e todo o aspecto visual
de um documento não devem ser funções da HTML. Cabem às CSS todas as funções de
apresentação de um documento, e essa é sua finalidade maior. Daí a já consagrada frase
que resume a dobradinha CSS + HTML: “HTML para estruturar e CSS para apresentar.”

Regra CSS

A Regra CSS é a unidade básica de uma folha de estilo. Nessa definição, o termo
unidade básica significa a menor porção de código capaz de produzir efeito de estilização.

30
Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração
compreende uma propriedade e um valor. A sintaxe para se escrever uma regra CSS é
mostrada na figura abaixo:

Definição dos componentes de uma regra CSS:

• Seletor: é o alvo da regra CSS.
• Declaração: determina os parâmetros de estilização. Compreende a propriedade e o
valor.
• Propriedade: define qual será a característica do seletor a ser estilizada.
• Valor: é a quantificação ou a qualificação da propriedade.

Uma regra CSS poderá conter várias declarações separadas por ponto e vírgula.
Observe o exemplo a seguir:
p{
color: red;
background-color: black;
font-size: 12px;
}
Nesse exemplo identificamos os seguintes componentes da regra CSS:
• Seletor: é o elemento p. Seletores para elementos da marcação são deno-
minados seletores tipos;
• Declarações: são três – color: red; background-color: black; font-size: 12px;
• Propriedades: são três – color, que define a cor dos textos contidos em p,
background-color, que define a cor de fundo do elemento p e font-size, que
define o tamanho da fonte para o elemento p.

31
Estilos

Estilos inline

O método direto e simples de aplicar estilos a um elemento da marcação é com o

emprego do atributo style da HTML. Você escreve as regras de estilo diretamente dentro
da tag de abertura do elemento a estilizar, conforme mostra o exemplo a seguir:

<p style="width: 200px; color: white; background: red; font-size: 1.8em;">

<!-- Parágrafo com aplicação de estilos inline -->
</p>
Esse método dificulta a manutenção e retira um dos maiores poderes da
folha de estilo, que é o controle centralizado da apresentação. Toda vez que
for preciso alterar a apresentação, será necessário percorrer todo o código de
marcação do documento ou centenas de documentos, se o site for grande, à
procura das regras de estilo inline.

Estilos incorporados

Outro método de escrever a folha de estilos no próprio documento HTML é, com o

emprego do elemento style. Você escreve as regras de estilo dentro das tags
<style></style>, como mostrado no exemplo a seguir:

32
O resultado:

33
 A vantagem desse método sobre o anterior é que, agora, localizamos com mais
facilidade a folha de estilo, mas há a desvantagem de colocar a folha de estilos dentro do
próprio documento. Não seria sensato vincular uma mesma folha de estilo a vários
documentos empregando esse método. Toda vez que for preciso alterar a apresentação,
será necessário abrir o documento ou centenas de documentos, se o site for grande, e fazer
a mesma alteração de estilo em todos eles. Uma boa escolha para uso desse método seria
para o caso de aplicação de estilos específicos a um documento do site.

Estilos externos

Folha de estilo externa é aquela que não foi escrita no documento HTML. Trata-se
de um arquivo de texto contendo as regras de estilo e os comentários CSS. Um arquivo de
folha de estilo deve ser gravado com a extensão .css e pode ser vinculado a um documento
HTML de duas maneiras distintas, conforme explicado em seguida. Abaixo temos a tag
<link rel="stylesheet" href="[Link]">, que linka o HTML ao CSS externo ([Link])
e que vai gerar o mesmo resultado anterior. Exemplo:

34
 O resultado será o mesmo do anterior, porém agora temos um código mais
organizado, de fácil manutenção e com menos linha de código.

Organização dos arquivos

Antes de começarmos a colocar código CSS no HTML, vamos primeiro entender

sobre a organização dos diretórios (pastas) do projeto, mesmo que não obrigatório a ordem,
mas é o que mais se encontra de organização estrutural de um projeto web básico, abaixo
temos o VSCODE onde existe uma pasta chamada PROJETO_WEB no computador e
dentro dela 2 pastas, uma chamada img que é utilizado para imagens e a outra css que é
utilizado para [Link]. Já o [Link], fica fora das pastas, por ser mais semântico,
já que tudo carrega no HTML. Segue o exemplo:

35
CORES E PLANO DE FUNDO

As cores podem ser inseridas como valores hexadecimais (# ff0000), com nomes em
inglês das cores (red) ou RGB (RGB (255,0,0)).
O elemento <body> contém todo o conteúdo de um documento HTML. Assim, para
mudar a cor de fundo de uma página inteira, a propriedade de cor de fundo deve ser
aplicada ao elemento. Abaixo temos um exemplo onde a propriedade background-color
define a cor de fundo do elemento body.
Exemplo:

No HTML basta ter a ligação com a tag <link rel="stylesheet" href="[Link]">

e o resultado será a cor azul na página por completo. Exemplo:

Agora vamos observar o código CSS abaixo:

36
 HTML:

Aplicamos em uma tag <h1> a cor de texto (color) e uma cor de fundo
(background-color), então, a estilização será aplicada. Resultado:

Temos também comando para deixar uma imagem como fundo de elementos,
abaixo temos um código exemplo:

A url significa o caminho da imagem, enquanto o ../ é basicamente dizendo que será
acessado algum arquivo fora do diretório principal do css (pasta CSS), no caso é a pasta
img e dentro dela o [Link].
Resultado:

37
Existem outras:

Background-Repeat

Utilizamos esta propriedade para definir a maneira como a imagem será repetida no
elemento. Podemos especificar que a imagem se repetirá em todos os eixos, apenas no
horizontal, apenas no vertical ou não se repetirá.
A tabela a seguir apresenta todos os valores que podemos atribuir a background-
repeat.

repeat-y Repete-se na vertical.

repeat-x Repete-se na horizontal.

no-repeat Não se repete.

repeat Valor padrão, repete-se nas duas direções.

Caso você tenha um código onde a imagem é pequena para o elemento ela vai
automaticamente preencher repetindo, exemplo:

Então pode se utilizar os “repeats” para ajustar, exemplo:

38
 O resultado:

Background-Position

Com esta propriedade podemos definir a posição na qual a imagem será inserida.
Essa posição pode ser especificada utilizando uma combinação de valores, sendo o
primeiro a posição horizontal e o segundo a posição vertical.

Opções para background-position

O local de inserção de uma imagem pode ser especificado com valores pré-
definidos para os eixos horizontal e vertical conforme as tabelas abaixo.

Posição Horizontal

right Sinaliza que a imagem será renderizada à direita.

center Sinaliza que a imagem será renderizada no centro.

left Sinaliza que a imagem será renderizada à esquerda.

Posição Vertical
top Sinaliza que a imagem será renderizada no topo.
center Sinaliza que a imagem será renderizada no centro.
bottom Sinaliza que a imagem será renderizada na parte de baixo.

No entanto, também podemos especificar o posicionamento de uma imagem com

mais precisão, atribuindo à background-position valores em porcentagem, pixels ou outra
unidade de medida das CSS.
Por padrão, a imagem é inserida na posição 0% 0% ou 0px 0px, a qual representa o
canto superior esquerdo. Ao atribuirmos outros valores, movemos a imagem para a direita
e para baixo.

39
 Além disso, podemos configurar os eixos com diferentes unidades de medida, como
informar que a imagem ficará a 20 pixels de distância da margem esquerda e 40% em
relação ao topo da página.

No código podemos juntar os comandos do background, veja

O resultado:

Não é repetido a imagem e alinhamos a imagem à direita no topo.

Background-Attachment

Esta propriedade é utilizada para definir o que acontecerá com a imagem de fundo
quando da interação com a barra de rolagem, se ela ficará fixa, se ela se moverá junto com
o movimento de scroll, entre outras opções. Um Exemplo padrão é quando você tem um
menu e quer deixar fixo mesmo que a página role para o final. Exemplo é o comando
background-attachment: fixed;

Opções para background-attachment

scroll Valor padrão assumido pela imagem de fundo.

Define que ao rolar a página a imagem também irá
rolar.

40
 fixed Faz com que a imagem não se movimente junto com
o documento, dando a impressão de que o conteúdo
desliza sobre o fundo.

local Especifica que a imagem de fundo de um documento

interno vai se movimentar junto com o fundo do
documento principal.

inherit Especifica que a propriedade recebe, por herança, a

mesma configuração indicada para o elemento pai.

initial
Indica à propriedade que o valor padrão deve ser
utilizado.

Background-Size

Utilizamos esta propriedade para especificar o tamanho da imagem de fundo. Assim

como acontece com o background-position, existem diversas formas de declarar esse
recurso. Uma delas é definir os valores em pixels, sendo o primeiro valor para a largura e
o segundo para a altura. Exemplo abaixo

Além disso, podemos especificar valores pré-definidos para customizar o tamanho

da imagem de fundo. A tabela a seguir apresenta todos os valores pré-definidos que
podemos atribuir a background-size.

cover Amplia a imagem até o ponto que preencha toda a

área da página ou elemento.

contain Amplia a imagem ao maior tamanho possível

respeitando a área visível da página ou elemento.

inherit Especifica que a propriedade recebe, por herança, a

mesma configuração indicada para o elemento pai.

41
 initial
Indica à propriedade que o valor padrão deve ser
utilizado.

Existem vários outros comandos para plano de fundo, porém nessa apostila temos
as informações que são mais usadas no mercado.

Fonte

Usando o CSS é possível escolher as fontes para os elementos da página em

HTML com as seguintes propriedades:

● font-family: Esta propriedade é usada para especificar a fonte usada para

renderizar o texto;
● font-style: É usada para definir o estilo da fonte do conteúdo de texto do elemento;
● Font-weight: Esta propriedade CSS especifica o peso ou a intensidade da fonte
(ex.: negrito);
● font-size: Esta propriedade é usada para definir o tamanho da fonte do conteúdo de
texto do elemento. Pode ser em %, px, em, pt e entre outros;
● font: Esta é uma propriedade abreviada para definir várias propriedades de fonte
em uma única declaração;
● color: A propriedade color do CSS define o valor da cor de um elemento com seu
conteúdo em texto e suas decorações (estilos).

Para entendermos melhor, vamos para prática:

42
 Código CSS

Código HTML

O resultado:

De forma didática foi explicado o CSS com comandos separados para você
entender, porém é mais sensato da forma abaixo:

43
 Podemos também resumir as propriedades em uma única abreviação de comando.
Segue o exemplo abaixo:

Obs: o código acima a propriedade “font” tem os valores: italic que define o estilo da
fonte, bold o peso, 16px o tamanho da fonte, e "Arial", sans-serif a família da fonte.
Existe também a propriedade text-decoration do CSS que é usada para definir a
formatação de underline, overline, line-through ou blink. As decorações underline e overline
são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
Exemplo do código HTML e CSS:

44
 Resultado:

A propriedade text-align do CSS define o alinhamento horizontal do conteúdo inline

dentro de um elemento de bloco ou caixa de célula de tabela. Seus valores:
● start: O mesmo que left se a direção for da esquerda para a direita e right se a direção
for da direita para a esquerda.
● end: O mesmo que right se a direção for da esquerda para a direita e left se a direção
for da direita para a esquerda.
● left: O conteúdo inline é alinhado à borda esquerda da caixa de linha.
● right: O conteúdo inline é alinhado à borda direita da caixa de linha.
● center: O conteúdo inline é centralizado dentro da caixa de linha.
● justify: O conteúdo inline é justificado. O texto deve ser espaçado para alinhar suas
bordas esquerda e direita às bordas esquerda e direita da caixa de linha, exceto para
a última linha.
Exemplo:

45
 Resultado

PSEUDO-CLASSE
Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que
especifica um estado especial do elemento selecionado. Por exemplo, :hover pode ser
usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.
Pseudo-classes permitem que você aplique um estilo a um elemento não apenas
em relação ao conteúdo da árvore do documento, mas também em relação a fatores
externos como o histórico de navegação (:visited, por exemplo), o status do seu conteúdo
(como :checked em certos elementos de um formulário), ou a posição do mouse (como
:hover, que permite saber se o mouse está sobre um elemento ou não).

Sintaxe:

seletor:pseudo-classe {
propriedade: valor;
}

Abaixo aplicamos nos links, exemplo:

46
Abaixo temos o resultados por pseudo-classe:

a:link

a:visited

a:hover

a:active

Acima aplicamos todos voltados a hiperlinks, porém existem vários outros. Você pode
acessar: [Link]

AGRUPAMENTOS

No HTML, id e class são atributos que você pode adicionar a quase qualquer
elemento. Eles são usados principalmente para duas coisas: estilização com CSS e
manipulação com JavaScript.

ID:

● O atributo id é usado para especificar um identificador único para um elemento

HTML.
● Cada id deve ser único dentro do documento HTML.
● O id é usado quando você quer selecionar um único elemento.
Exemplo de uso:

<p id="meuParagrafo">Este é um parágrafo.</p>

47
Class:

● O atributo class é usado para especificar uma ou mais classes para um elemento
HTML.
● Diferente do id, a mesma class pode ser usada em vários elementos.
● A class é usada quando você quer selecionar um grupo de elementos.
Exemplo de uso:

<p class="minhaClasse">Este é um parágrafo.</p>

<p class="minhaClasse">Este é outro parágrafo.</p>

No exemplo acima, ambos os parágrafos têm a mesma class chamada “minhaClasse”.

O resultado:

Neste exemplo, o elemento div tem um id chamado “meuDiv” e três classes:

“classe1”, “classe2” e “classe3”. Isso é totalmente válido em HTML. As classes permitem
que você aplique estilos específicos a múltiplos elementos ao mesmo tempo, enquanto o id
é útil para identificar um único elemento.
Descrevendo o código acima, o elemento com o id “meuDiv” terá texto branco (color:
white;) em um fundo preto (background-color: black;), com um preenchimento de 20 pixels
(padding: 20px; será explicado em outro tópico).

Os elementos com a class “classe1” terão um tamanho de fonte de 20 pixels (font-

size: 20px;), os elementos com a class “classe2” terão uma borda sólida vermelha de 2

48
pixels (border: 2px solid red; será explicado em outro tópico), e os elementos com a class
“classe3” terão o texto alinhado ao centro (text-align: center;).

Lembre-se de que o CSS é aplicado de cima para baixo, então se houver conflitos
(por exemplo, duas regras diferentes para a cor do texto), a última regra definida será a que
prevalecerá. No entanto, as regras de id têm prioridade sobre as regras de class se ambas
estiverem tentando modificar a mesma propriedade.

LARGURA E ALTURA

Em CSS, width e height são propriedades usadas para definir a largura e a altura de um
elemento, respectivamente.

Width (Largura)

● A propriedade width define a largura de um elemento.

● Pode ser definida em várias unidades, como pixels (px), porcentagem (%), pontos
(pt), entre outras.

Exemplo de uso:

div {

width: 50%;

Neste exemplo, a largura do elemento div é definida como 50% da largura do seu elemento
pai.

Height (Altura)

● A propriedade height define a altura de um elemento.

● Assim como a width, pode ser definida em várias unidades.

Exemplo de uso:

div {

height: 100px;

49
Neste exemplo, a altura do elemento div é definida como 100 pixels.

Apesar de você ter visto o código acima, não é possível ver as dimensões, pois eles
somente criam o tamanho, para que possa ser entendido, o código abaixo apresenta cores
de fundo das divs (elemento de bloco), segue o exemplo:

BORDAS

Em CSS, a propriedade border é usada para definir a borda de um elemento. Ela é

uma propriedade abreviada para border-width, border-style e border-color.
1. border-width: Define a largura da borda. Os valores podem ser em px, em, rem, etc.
Por exemplo, 2px.
2. border-style: Define o estilo da borda. Alguns valores comuns incluem solid, dashed,
dotted, double, groove, ridge, inset, outset, e none.
3. border-color: Define a cor da borda. Pode ser qualquer cor válida em CSS, como
nomes de cores (red, blue), valores hexadecimais (#ff0000, #0000ff), RGB
(rgb(255,0,0), rgb(0,0,255)), etc.

Sua sintaxe básica:

/* Sintaxe básica para definir uma borda em CSS */
elemento {
border: valor largura estilo cor;
}

50
/* Exemplo de uso */
div {
border: 2px solid black;
}

Você também pode definir as bordas de cada lado de um elemento individualmente usando
as propriedades border-top, border-right, border-bottom e border-left.

/* Exemplo de uso */
div {
border-top: 2px solid black;
border-right: 2px solid blue;
border-bottom: 2px solid green;
border-left: 2px solid red;
}

Exemplo na prática:

51
MODELO DE CAIXA BOX

O modelo de caixa (Box Model) é uma parte fundamental do design e layout em

CSS. Ele descreve como o espaço é distribuído ao redor dos elementos. O modelo de caixa
consiste em quatro partes: conteúdo, padding, borda e margem.
1. Conteúdo (Content): Esta é a área onde o texto e as imagens aparecem.
2. Padding: É o espaço entre o conteúdo e a borda. O padding é transparente, o que
significa que a cor de fundo do elemento pode ser vista através dele.
3. Borda (Border): É a linha que envolve o padding e o conteúdo.
4. Margem (Margin): É o espaço ao redor do elemento, fora de qualquer borda definida.
Aqui está uma representação visual do modelo de caixa:

Quando você define a largura e a altura de um elemento, você está realmente

definindo a largura e a altura do conteúdo. Para calcular a largura e a altura total de um
elemento, você precisa adicionar o padding, a borda e a margem ao conteúdo.

Padding

É o espaço entre o conteúdo de um elemento e sua borda. Ele é usado para criar
espaço ao redor do conteúdo, dentro da borda definida. Por exemplo:
div {
padding: 10px;
}

52
 Neste exemplo, a div terá um padding de 10px em todos os lados. Você também
pode definir o padding para cada lado individualmente usando padding-top, padding-right,
padding-bottom e padding-left.

Margin

É o espaço ao redor de um elemento, fora de qualquer borda definida. Ele é usado

para criar espaço entre diferentes elementos. Por exemplo:
div {
margin: 20px;
}

Neste exemplo, a div terá uma margin de 20px em todos os lados. Assim como o
padding, você pode definir a margin para cada lado individualmente usando margin-top,
margin-right, margin-bottom e margin-left. Abaixo, temos um exemplo de como padding e
margin podem ser usados juntos:

div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Neste exemplo, a div tem um padding de 10px, uma borda sólida preta de 2px, e
uma margin de 20px. Isso significa que haverá 10px de espaço entre o conteúdo da div e
sua borda, e 20px de espaço entre a borda da div e quaisquer elementos adjacentes. Para
entender melhor, temos o exemplo abaixo na prática:

53
Temos também a possibilidade de alterar o modelo de caixa padrão (border-box)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

54
Para que você entenda melhor, vou explicar o código acima:
1. * Este é um seletor universal em CSS. Ele seleciona todos os elementos na página.
2. margin: 0; Isso define a margem de todos os elementos para 0. A margem é o espaço
ao redor dos elementos, fora de qualquer borda definida.
3. padding: 0; Isso define o preenchimento (padding) de todos os elementos para 0. O
preenchimento é o espaço entre o conteúdo de um elemento e sua borda.
4. box-sizing: border-box; Isso altera o modelo de caixa padrão. No modelo de caixa
padrão (box-sizing: content-box;), a largura e a altura definidas de um elemento se
aplicam apenas ao conteúdo do elemento, e o preenchimento e a borda são
adicionados a essas dimensões especificadas. Quando você usa box-sizing: border-
box;, a largura e a altura definidas de um elemento incluem o preenchimento e a
borda, mas não a margem. Isso significa que o preenchimento e a borda não
aumentam o tamanho do elemento, eles são incluídos no tamanho do elemento.
O resultado, caso seja incluído o código acima, é de uma página que pega o total
das laterais, e é padrão para o desenvolvimento web em css para termos mais liberdade
de manipulação de espaços dentro da body.

DIRECIONANDO E FLUTUANDO ELEMENTOS

Em CSS, a propriedade float é usada para especificar como um elemento deve

flutuar. Em outras palavras, ela define onde um elemento de caixa deve flutuar para a
esquerda ou direita em seu contêiner, permitindo que outros elementos se enrolem ao redor
dele. Aqui está um exemplo de como usar a propriedade float:
div {
float: left;
}

55
 Neste exemplo, a div será flutuada para a esquerda do contêiner pai, e os
elementos subsequentes se enroscaram à direita da div. A propriedade float pode ter um
dos seguintes valores:

● left: O elemento flutua para a esquerda de sua posição atual.

● right: O elemento flutua para a direita de sua posição atual.
● none: O elemento não flutua e será exibido exatamente onde está no código.
● inherit: O elemento herda o valor float de seu elemento pai.
É importante notar que a propriedade float pode alterar o comportamento do fluxo
normal do documento e pode causar problemas de sobreposição se não for limpa
corretamente. Para limpar um float, você pode usar a propriedade clear com um dos
seguintes valores: left, right, both, none, inherit. Para poder entender melhor, vamos para
prática com o código:

56
 Neste exemplo, temos dois divs, um flutuando à esquerda e outro à direita. O
terceiro div usa a propriedade clear para garantir que ele apareça abaixo dos dois divs
flutuantes. Cada div tem uma cor de fundo diferente para facilitar a visualização.

POSICIONAMENTO

As propriedades de posicionamento em CSS: static, relative, fixed, absolute e z-

index (para camadas).
● static: Este é o valor padrão. Um elemento com position: static não é posicionado de
maneira especial. Ele é posicionado de acordo com o fluxo normal do documento.
● relative: Um elemento com position: relative é posicionado em relação à sua posição
normal. As propriedades top, right, bottom e left são usadas para ajustar a posição
do elemento.
● fixed: Um elemento com position: fixed é posicionado em relação à janela de
visualização e não se move quando a página é rolada.
● absolute: Um elemento com position: absolute é posicionado em relação ao
elemento pai mais próximo que tem uma posição diferente de static. Se tal elemento
pai não existir, o elemento é posicionado em relação ao elemento <html>.
● z-index: A propriedade z-index é usada para especificar a ordem de empilhamento
de um elemento. Um elemento com um z-index maior está na frente de um elemento
com um z-index menor.

Exemplo do RELATIVE:

57
 CSS:

Resultado:

Acima o elemento ficou relativo a sua própria posição dentro da página, porém,
usamos outras propriedades que no caso foram top e left para poder deslocar o elemento
do seu topo com 20px e ao lado esquerdo com 50px. Então as propriedades top, left, bottom
e right fazem o elemento se deslocar a partir de sua posição original.

Exemplo do ABSOLUTE:

58
 CSS:

Resultado:

Podemos observar que o elemento absoluto ficou organizado com base no pai que
no caso é o elemento relative. Além disso, foi colocado à direita (rigth) no final (bottom).

Exemplo do FIXED

59
 Resultado:

Caso você role a página para baixo, identificará que o div que está fixo se manterá
no mesmo local independentemente se estiver ou não rolando a página.

DISPLAY

A propriedade display CSS define se um elemento é tratado como um bloco ou

elemento inline e o layout usado para seus filhos, como layout de fluxo, grid ou flex.
Formalmente, a propriedade display define os tipos de exibição internos e externos de um
elemento. Seus valores são:

● block: O elemento gera uma caixa de bloco, causando uma quebra de linha antes e
depois do elemento.
● inline: O elemento gera uma caixa inline, que não causa uma quebra de linha antes
ou depois do elemento.
● none: O elemento não será exibido na página.

60
 ● inline-block: o elemento se comporte como um elemento inline, mas ainda preserva
as características de um elemento block
● flex: O elemento se comporta como um contêiner flexível.
● grid: O elemento se comporta como um contêiner de grade.

Para entender melhor, vamos começar pelo BLOCK: Elementos HTML como como
div, section, p, h1, ul, li, article são exibidos como block por padrão e outros que
representam o comportamento abaixo:
● Ocupa 100% da largura do elemento pai
● Ocupa sempre a sua própria linha e é posicionado abaixo do elemento anterior
● A altura é definida de acordo com o conteúdo interno
● É possível definir Width e Height
● Você pode definir valor de margin-top e margin-bottom

Inline: Elementos HTML como span, a, img, em, strong e outros são exibidos como inline
por padrão. Aqui estão algumas características dos elementos inline:

● Não ocupam 100% da largura do elemento pai. A largura é definida pelo conteúdo
interno.
● Não ocupam a sua própria linha. Eles são posicionados na mesma linha que o
elemento anterior e o próximo, se houver espaço.
● A altura e a largura não podem ser definidas. Eles são determinados pelo conteúdo
interno.
● As margens superior e inferior não têm efeito, mas as margens esquerda e direita
funcionam normalmente.

Inline-Block: A propriedade display com valor inline-block permite que o elemento seja
exibido na mesma linha que os elementos adjacentes (como inline), mas ainda permite
definir largura e altura (como block). Aqui estão algumas características dos elementos
inline-block:

● Não ocupam 100% da largura do elemento pai, a menos que especificamente

definido. A largura é definida pelo conteúdo interno, a menos que uma largura seja
especificamente definida.

61
 ● Não ocupam a sua própria linha. Eles são posicionados na mesma linha que o
elemento anterior e o próximo, se houver espaço.
● A altura e a largura podem ser definidas.
● Você pode definir valores para margin-top e margin-bottom.

Vamos colocar na prática como abaixo:

62
 Neste exemplo, temos um div que é exibido como um bloco, um span que é exibido
inline e um div que é exibido como inline-block. Cada elemento tem uma cor de fundo
diferente para facilitar a visualização. Resultado:

FLEXBOX

A propriedade display: none é usada para ocultar um elemento HTML. Quando você
define display: none para um elemento, ele é completamente removido do fluxo do
documento e não ocupa espaço na página. Isso é diferente de visibility: hidden, que oculta
um elemento, mas o espaço que ele ocuparia ainda é reservado na página.

63
 A propriedade display: flex em CSS é usada para criar um contêiner flexível. Um
contêiner flexível se torna flexível permitindo que seus itens filhos se redimensionam e se
reposicionam para preencher o espaço disponível. Aqui estão algumas características dos
contêineres flex:

● Os itens filhos (flex items) serão dispostos em uma linha ou coluna, dependendo da
direção flex (definida pela propriedade flex-direction).
● Você pode controlar o alinhamento dos itens flex ao longo do eixo principal e
transversal usando as propriedades justify-content e align-items, respectivamente.
● Os itens flex podem “flexionar” seus tamanhos para preencher o espaço disponível
ou evitar o overflow, dependendo da propriedade flex aplicada a eles.

Então, quando se usa o display: flex, significa dizer que estamos trabalhando com
FLEXBOX. O termo “Flexbox” é uma maneira abreviada de se referir ao Módulo de Caixa
Flexível (Flexible Box Module), que é um modelo de layout no CSS. Quando você define
display: flex em um elemento, esse elemento se torna um contêiner flexível, e seus filhos
diretos se tornam itens flexíveis. Isso permite que você controle o layout, alinhamento e
espaçamento desses itens de maneira mais eficiente e com menos código do que outros
modelos de layout.
Para começar, imaginemos um elemento, pode ser uma div, um section, ou outros,
assim que determinamos que o elemento vai trabalhar com flexbox, esse elemento se torna
um FLEX CONTAINER, onde esse elemento pode ter outros elementos que serão
chamados de FLEX ITEM. Assim como na figura abaixo:

64
 Acima temos o container que pode ser uma div contendo outras divs (4 no caso) que
são os flex item, então a div pai tem as divs filhas.
Além disso, precisamos entender o alinhamento dentro do container, que são
precisamente o MAIN AXIS (eixo horizontal) e o CROSS AXIS (eixo vertical). Abaixo temos
outra figura que exemplifica isso:

É importante entender que temos tanto de onde começa a posição e onde termina,
para cada eixo. No eixo primário MAIN AXIS temos o ínicio sendo no MAIN START e o seu
término no MAIN END. Já no eixo secundário CROSS AXIS, temos seu inicio em CROSS
START e o seu término em CROSS END. Veja a figura abaixo:

65
 Vamos começar pela base para poder entender o fluxo do FLEXBOX, então para
isso temos o código abaixo:

Teremos o resultado:

66
 Pois o comportamento é em bloco das divs, deixando um elemento abaixo do outro,
porém se agora aplicarmos o FLEXBOX como abaixo:

Teremos como resultado:

Onde o valor flex deixa todos os elementos filhos (divs) um do lado do outro. Além
disso, podemos aplicar a direção, que enfatiza o conceito das direções Main Axis e Cross
Axis, com a propriedade flex-direction.
A propriedade flex-direction em CSS é usada em um contêiner flexível para
especificar a direção dos itens flex. Ela pode ter um dos seguintes valores:
● row: Os itens flex são dispostos na mesma direção do texto (da esquerda para a
direita em scripts de escrita de esquerda para a direita, da direita para a esquerda
em scripts de escrita de direita para a esquerda). Este é o valor padrão.
● row-reverse: Os itens flex são dispostos na direção oposta do texto.
● column: Os itens flex são dispostos verticalmente, do topo para baixo.
● column-reverse: Os itens flex são dispostos verticalmente, de baixo para cima.

67
 Vejamos o código abaixo:

O resultado será esse:

Porém se mudarmos o valor de flex-direction para row-reverse, o resultado é que os

elementos começaram do lado direito para o esquerdo, segue abaixo:

Temos os valores column e column-reverse, que deixa os elementos filhos em

colunas, ou seja, na vertical (Cross Axis). Para prática, basta mudar o valor de flex-direction.

68
 Resultado com column:

Resultado com Column-reverse:

Column-reverse agora começou com o valor 4 (inverteu os elementos).

Agora vamos falar sobre as propriedades align-content e justify-content em CSS.

Ambas as propriedades são usadas com contêineres flexíveis (display: flex ou display:
inline-flex). Essas propriedades darão mais controle de alinhamento em uma página.
justify-content: Esta propriedade alinha os itens flex ao longo do eixo principal do contêiner
flex. O eixo principal é definido pela propriedade flex-direction. Por exemplo, se flex-
direction é row (o valor padrão), o eixo principal é horizontal e justify-content irá controlar o

69
alinhamento horizontal dos itens flex. Aqui estão alguns valores possíveis para justify-
content:

● flex-start: Os itens são agrupados no início da linha.

● flex-end: Os itens são agrupados no final da linha.
● center: Os itens são centrados ao longo da linha.
● space-between: Os itens são distribuídos uniformemente na linha; o primeiro item
está no início da linha, o último item no final da linha.
● space-around: Os itens são distribuídos uniformemente na linha com um espaço
igual em torno deles.
● space-evenly: Os itens ou linhas são distribuídos de modo que o espaço entre
quaisquer dois itens (e o espaço para as bordas) seja igual.

align-content: Esta propriedade alinha as linhas flex ao longo do eixo transversal quando
há espaço extra no contêiner flex. O eixo transversal é perpendicular ao eixo principal. Por
exemplo, se flex-direction é row, o eixo transversal é vertical e align-content irá controlar o
alinhamento vertical das linhas flex. Aqui estão alguns valores possíveis para align-content:

● flex-start: As linhas são agrupadas no início do contêiner flex.

● flex-end: As linhas são agrupadas no final do contêiner flex.
● center: As linhas são centradas no contêiner flex.
● space-between: As linhas são distribuídas uniformemente; a primeira linha está no
início do contêiner, a última linha no final do contêiner.
● space-around: As linhas são distribuídas uniformemente com um espaço igual em
torno delas.
● stretch (valor padrão): As linhas ocupam todo o espaço do contêiner flex.

Para entender melhor, abaixo temos o exemplo do que foi explicado acima:

70
Vamos colocar a mão na massa.
Usando justify-content:
HTML:

71
 CSS:

Resultado:

Usando align-itens:
HTML:

CSS:

72
 Resultado:

Usando os dois anteriores em conjunto:

73
 Se você chegou até aqui, significa dizer que já leu bastante, praticou os comandos
e entendeu como utilizar o HTML e CSS, agora vamos juntá-los de forma a criar um site
responsivo.

CRIAÇÃO DE UMA LANDING PAGE

Parabéns por ter chegado até aqui, criaremos esse site:

Uma landing para treinar suas habilidades aprendidas nessa apostila, além disso,
trará vários benefícios, especialmente se você quer ser um profissional da área, freelancer
procurando por novas oportunidades ou precisa criar esse projeto para um cliente.

74
HTML

75
76
CSS

77
78
79
 Agora temos uma landing page que permite que você apresente suas habilidades,
experiências e projetos de maneira profissional e atraente. Personalize!

Você também pode acessar todo o código no link do github:

[Link]

80
 REFERÊNCIAS

[Link]
[Link]
[Link]
[Link]

81