Prévia do material em texto

2
AGENDA
DO
MÓDULO
{O que é CSS?}
{Seletores}
{Cores}
{Bordas}
{Tipografia}
{Sombras}
Agenda do módulo
Anotações
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
3
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
MISSÃO DO 
MÓDULO
Simplificar o entendimento sobre as 
bases das CSS.
4
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
O que é CSS?
{01.}
Nos anos 90, Håkon Wium Lie e 
Bert Bos criaram um jeito mais 
fácil para estilizar e formatar o 
HTML:
CSS - Cascading Style Sheets ou 
Folhas de Estilo em Cascata.
5
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
As CSS são utilizadas como uma espécie de paleta 
de cores de um pintor, que precisa dar vida, cores, 
formas e sombras à sua arte.
É dentro das CSS que são definidas as regras de 
como os elementos HTML aparecerão visualmente 
para o usuário. 
6
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
O CSS pode ser incluído no código de três maneiras:
01. Inline
As regras do estilo são inseridas dentro da tag de 
um elemento do HTML. 
02. Incorporada
As regras do estilo são inseridas diretamente no 
arquivo HTML, mas ficam agrupadas entre as tags 
.
03. Externa
As regras do estilo são salvas em um arquivo a parte 
com a terminação .css e são linkados às páginas do 
site pelo código .
 
 
 
7
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Para definir a prioridade em CSS são levados em consideração:
 > o tipo de folha de estilo
 > a posição da folha de estilo
 > a posição da regra de estilo na folha de estilo
 > a especificidade da regra de estilo
PULO DO
GATO
 > Utilize o !important apenas quando 
realmente for necessário.
8
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
O !important é uma abordagem que deve ser utilizada sempre em últimos 
casos ou somente quando estamos fazendo algum teste rápido.
Muitos programadores enfrentam esse problema de “se eu mexer aqui, 
será que dá certo?”.
O segredo para se diferenciar e ser assertivo com o CSS é: especificidade. 
A especificidade é o nível de detalhamento 
do seletor da regra CSS.
Em teoria, teoria e prática são 
iguais. Na prática, não são.
Yogl Berra
8
Para ter 
um 
impactante, 
seja específico.
MÃO 
NA MASSA
Crie uma página HTML simples com 
algumas tags no :
 > Crie uma tag e dentro dela inclua uma e uma tag . 
 > Fora da , crie outra tag e insira os textos que desejar dentro 
de cada uma das 3 tags.
 > No , insira uma tag e dentro dela faça a estilização com 
CSS.
Defina cores diferentes para div, h1 e p. 
9
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
E como sabemos qual o nível de especificidade do seletor que 
escrevemos? Utilizamos um cálculo:
O número assim obtido é a pontuação da especificidade da regra.
H
TM
L 
e 
C
SS
: D
es
en
vo
lv
im
en
to
 W
eb
 b
ás
ic
o
10
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Seletores
{02.}
01. Seletor universal
02. Seletor tipo
03. Seletor classe
Responsável por "zerar" as propriedades de margin e 
padding para todos os elementos da marcação. 
Qualquer declaração de estilo do autor ou usuário 
sobrescreve a folha de estilos nativa.
Usado para estilizar os elementos da marcação, 
as tags, que são de um mesmo tipo, por exemplo: 
elemento do tipo p (parágrafo), do tipo div, do tipo 
ol, do tipo strong, e assim por diante. 
Esse atributo é usado especificamente para 
associar um elemento HTML com um elemento do 
CSS. 
É representado por um ponto “.”.
Exemplo: .minhaClasse 
11
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
04. Seletor ID
06. Seletor descendente
05. Seletor atributo
Casa com o elemento que tem determinado valor 
para o atributo ID. 
É representado por uma cerquilha “#”.
Exemplo: #meuID 
Lembre-se que quando o atributo ID é usado no 
HTML, ele é único àquele objeto. 
Casa com o elemento que descende de 
determinado elemento. 
Aquela tag que fica dentro de outra tag.
É representado por um espaço entre os elementos 
da regra.
Exemplo: tag1 tag2
Casam com elementos cujo atributo HTML 
satisfaçam determinadas condições. 
É representado por colchetes “[]”. 
Exemplo: Tag[] (onde, “tag” representa um tipo de 
Elemento).
12
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
07. Seletor filho
08. Seletor “que imediatamente sucede”
Casa com o elemento filho de determinado elemento. 
É representado por sinal de maior “>”.
Exemplo: tag1 > tag2
Casa com o elemento irmão que imediatamente 
segue determinado elemento. 
É representado por sinal de mais “+”. 
Exemplo: tag1 + tag2
PULO DO
GATO
 > Sempre que possível utilize o seletor 
“filho”.
Seletor Filho só não é indicado quando a regra 
CSS que você precisa aplicar é muito mais global 
do que específica.
MÃO 
NA MASSA
Com o template em mãos, siga as instruções escritas no próprio código 
html para mudar a cor dos elementos, usando o seletor solicitado em cada 
instrução. 
 > Para mudar a cor, basta colocar a propriedade “color” no CSS.
13
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
09. Seletor “sucede”
10. Pseudo seletores
Casa com o elemento irmão que segue determinado 
elemento. 
É representado pelo til “~”.
Exemplo: tag1 - tag2
É uma palavra-chave adicionada a seletores 
que especifica um estado especial do elemento 
selecionado. 
É representado por dois pontos “:”.
Por exemplo: :hover pode ser usado para alterar a 
cor de um botão quando o usuário passar o cursor 
sobre ele.
14
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
15
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Cores
{03.}
Sistema de Cores Hexadecimal
Para representar cores nos códigos HTML e CSS, é 
utilizado o sistema hexadecimal.
Os 16 dígitos hexadecimais são: 
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Em uma regra CSS tanto faz usar letras maiúsculas 
ou minúsculas ao escrever o código hexadecimal de 
uma cor. Também é possível abreviar a notação para 
três dígitos quando a letras que se repetem.
Na notação abreviada cada um dos três dígitos é 
automaticamente dobrado, por exemplo:
#FFF = #FFFFFF 
#CF9 = #CCFF99
#cde = #ccddee
#49c = #4499cc
16
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
PULO DO
GATO
 > Existem várias ferramentas 
online para determinar o código 
hexadecimal de uma cor.
Nós sugerimos o site Color Codes.
Quando o monitor nos mostra uma cor, seja na 
tv, no computador ou no celular, ele está usando 
apenas três pontos de luz, um de cada cor primária: 
vermelho, verde e azul. 
E por isso é conhecido como 
Existem duas maneiras de se definir a quantidade 
de cada uma das três cores:
 > Uma faixa de números de 0 até 255; ou
 > Uma faixa de porcentagens de 0% até 100%.
RGB
red / green / blue
https://htmlcolorcodes.com/
https://htmlcolorcodes.com/ 
MÃO 
NA MASSA
É hora de treinar as habilidades com cores no CSS.
Siga as instruções do código e mude as cores dos textos, conforme está 
solicitado.
17
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Você também pode definir uma cor no CSS usando 
o nome dela. 
 Lista de nomes de cores aceitas pelo CSS >
Para definir a cor de um elemento use a propriedade 
color, dessa maneira: p { color: yellow; }
Para definir a cor de fundo de um elemento use a 
propriedade background-color, dessa maneira:
div { background-color: yellow; }
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
18
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Tipografia
{04.}
Depois da cor, a fonte é provavelmente a mais 
fundamental propriedade de uma página.
Para alterar o peso da fonte usamos a propriedade 
font-weight.
 p { font-weight: bold }
 p { font-weight: normal}
 p { font-weight: thin }
Os tipos de fontes mais utilizadas são: serif, sans-
serif, monospace, cursive.
Podemos alterar a fonte de uma tag p, utilizamos 
a propriedade font-family e usar um desses tipos 
como atributo.
 p { font-family: cursive }
 
Para alterar o tamanho da fonte utilizamos a 
propriedade font-size.
 p { font-size: 80px }
A medida da fonte é definida em pixels, como as 
demais medidas de tamanho usadas no HTML. 
MÃO 
NA MASSA
O texto no arquivo index.html da aula deve ter as seguintes especificações:
 > Tamanho de 32px
 > Negrito
 > Ser uma fonte sem serifa
 > A fonte deve estar em itálico
19
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Também é possível representar por valores:
 p { font-weight: 800 }
 p { font-weight: 400 }
 p { font-weight: 100 }
Para importar fontes em HTML, usamos a tag e especificamos o URL 
da fonte no atributo “href” da tag .
PULO DO
GATO
 > Você pode gerar as tags link usando 
o Google Fonts.
O resultado deve ficar assim:
As propriedades das bordas permitem que você controle o estilo, a cor e a 
espessura das quatro bordas de um elemento HTML. Não necessariamente 
todas as bordas ao mesmo tempo.
As bordas podem ser 
definidas com um 
comando, para que todos 
os quatro lados fiquem 
iguais
As bordas de cada lado 
podem ser editadas 
individualmente.
Ou editadas como um 
único objeto, mas com 
alguns detalhes diferentes.
A aparência de cada borda é definida por três propriedades.
 > width - a espessura em pixels
 > style - o estilo da borda (se é pontilhada, sólida, tracejada)
 > color - em hexadecimal
20
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Bordas
{05.}
21
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
PULO DO
GATO
 > É de boa prática escolher, e adotar, 
sempre a mesma ordem da sintaxe. 
22
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Estilos de borda e seus nomes oficiais:
Borda dotted
Borda groove
Borda solid
Borda insert
Borda dashed
Borda ridge
Borda double
Borda outset
MÃO 
NA MASSA
 > Defina uma borda para cada do código, 
sendo ela do tipo do nome da classe.
 > Dê uma cor para cada borda.
23
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Os bilhões são feitos de 
centavos.
Felippi Crevellari
Há outros 4 valores que o text e o box-shadow aceitam:
Blur-radius, ou grau de 
desfocagem. 
É aquele efeito suave que fica na 
borda da sombra.
Spread-radius: 
é o valor que define o quanto 
a sombra irá se expandir ou 
encolher para além do tamanho 
da forma original.
text-shadow
text-shadow
24
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Sombras
{06.}
Podemos aplicar um efeito de sombra de duas 
maneiras:
 > Box-shadow: em box dos elementos;
 > Text-shadow: nos textos.
E como descrevemos tudo isso no código CSS? Em uma linha! 
Na seguinte sequência.
text-shadow
exemplo.css x
box-shadow
Cor: 
segue o mesmo padrão que o 
restante do CSS.
“Inset”:
 ao ser inserido faz com que a sombra deixe de 
ser algo projetada pelo elemento que estamos 
editando e crie, no lugar, o efeito de baixo-relevo.
25
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
PULO DO
GATO
 > Não tenha vergonha de buscar 
referências!
MÃO 
NA MASSA
 > Coloque um “box shadow” na box azul e um 
“text shadow” no texto.
26
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
Saber não é o bastante, 
devemos aplicar. Disposição não 
é o suficiente, devemos fazer.
Johann Wolfgang von Goethe
27
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
DESAFIO
CONQUER
 > Importe o CSS no HTML e 
estilize a página.
 > As cores podem estar em RGB 
ou em HEX.
if (challenge)
 // start
O tamanho padrão da fonte de todo o site 
deve ser de 16px
A fonte padrão para todo o site deve ter 
um peso de 400.
A fonte deve ser “Roboto”. Caso o usuário 
não tenha essa fonte no sistema, deve ser 
aplicada uma fonte sem serifa.
Os botões e links devem ter peso de fonte 
700.
Ao passar o mouse em cima dos links/
botões, a cor de fundo deve ficar 
levemente mais clara e de forma suave, 
com transição.
Os textos de botões e links não devem 
ficar sublinhados. 
Cards e botões/links devem ter box-
shadow e bordas arredondadas.
28
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
QUERO MAIS
if (interested)
 // gimmemore
Design para quem 
não é designer 
Robin Williams
Box-shadow 
generator
CSS Battle
 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
https://cssbattle.dev/
29
H
TM
L 
e 
C
SS
: 
In
tr
od
uç
ão
 a
o 
C
SS
29
Anotações
	{01.} O que é CSS?
	{02.} Seletores
	{03.} Cores
	{04.} Tipografia
	{06.} Sombras
	Anotações
	Agenda do Módulo
	{05.} Bordas
	Botão 14: 
	Botão 15: 
	Botão 24: 
	Botão 25: 
	Botão 9: 
	Botão 10: 
	Botão 11: 
	Botão 21: 
	Botão 12: 
	Botão 22: 
	Botão 17: 
	Botão 18: 
	Botão 19: 
	Botão 20: 
	Botão 6: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Page 24: 
	Page 25: 
	Page 26: 
	Page 27: 
	Page 28: 
	Page 29: 
	Botão 5: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Page 24: 
	Page 25: 
	Page 26: 
	Page 27: 
	Page 28: 
	Page 29: 
	Caixa de seleção 1: Off
	Caixa de seleção 3: Off
	Caixa de seleção 4: Off
	Caixa de seleção 5: Off
	Caixa de seleção 6: Off
	Caixa de seleção 7: Off
	Caixa de seleção 2: Off
	Text Field 127: