HTML & CSS - Seletores e posicionamento

Você será capaz de:

● Compreender como funciona o Box Model do CSS e como os

elementos da página se relacionam visualmente;
● Posicionar elementos na página de diferentes formas;
● Combinar e agrupar seletores de CSS para criar regras bem
definidas.

Por que isso é importante?

Além de estilos e tamanhos, o CSS também é responsável pelo layout da
página. Saber criar regras específicas que selecionam os elementos de
maneira apropriada e posicioná-los na página permite que você organize
as informações da página como quiser.
Seletores de pseudoclasses permitem que você adicione lógica condicional
de estilização.

Box Model - Modelo de caixas no CSS

Hoje nós vamos começar pela apresentação do famoso box model ou

"modelo de caixas" utilizado como base do CSS. É um conteúdo
fundamental para você entender como os elementos se relacionam na
tela em uma página HTML renderizada no browser, preste bastante
atenção!
Primeiramente, vamos estudar algumas propriedades bem interessantes
no vídeo a seguir:
comandos tags
<span></span> in line
<div></div> in block
que tal botar um estilo somente nas palavras cavalo-marinho desse texto.

Com a tag <span> você poderá botar estilo em partes do texto. que irá funcionar entre a o
incio da tag <span> e seu fechamento </span>

para isso colocamos uma class=” “ dentro do span e nos referimos a ele no
<style>, para escolher quais mudanças vamos querer no span. OBS: essa referência
é o com .nome , lembre-se referência de classe é com . e referencia de id é com #.

agora todas as tags span está com a cor azul.

vamos botar essa tag ao redor de todas as palavras cavalo marinho.

podemos também criar um container com a tag <div> com a class=”paragrafos”.

ficando <div class=”paragrafos”> e fazendo o fechamento </div>
e depois fazemos uma referencia com o .paragrafos no style apra botar um estilo
entre as tags <div class=”paragrafos”> … </div>

OBS: diferença entre o span e o div. O span é in line(em linha) significa que quando
acaba o span ele ainda fica em linha com o restante do texto. já o div é in block(em
bloco) que quebra essa linha ficando um mais alto que o resto.

olhe que botar o <div> ao redor de marinho, o marinho o separa do cavalo com
uma quebra de linha, ficando em duas linhas diferentes. muitas tags do HTML que
tem comportamento in line e outras ein bloco.

tambem podemos botar o <div> com id

largura(width)
a tag style width serve apra escolher a largura que vai pegar algum
elemento
Ela coloca a largura de um texto paragrafo ou foto. vocẽ pode colocar um valor fixo
em px que não mudará independente da imagem ou usar um valor em %, o valor
em porcentagem vai se adaptar a largura que esta exibindo o browser, o texto
então vai se movimentar para cobrir sempre a porcentagem.

Altura(height)
O estilo height serve para determinar a altura vertical que um texto
vai pegar, forçando o texto a ficar em determinado altura, é comum
que determinar uma altura em px pixel menor que a do texto o faça a
ficar com o texto sobreposta em cima do texto com letras sobre a
outras letras.

observe que o texto leia mais na imagem acima ficou por cima do
resto do texto.
mudar o overflow então poderá retirar toda essa sobreposição.

Overflow(sobreposição)

todo style tem uma caracteristica padrão que é overflow essa

característica vem por padrão também o valor visible. isso significa
que quando o texto por alguma configuração se sobrepor ao proprio
texto ele vai continuar ficar visível se sobrepondo e dificultando a
leitura.

caso queria tirar a sobreposição coloque o overflow para hidden. e

toda a aprte do texto que ficar sobreposto será escondido, é
interessado para botoes e menus na parte inferior que vocẽ quer que
sempre fiquem amostra.

Se vocẽ colocar o overflow no auto. O site vai criar uma barra de

rolagem para vocẽ deslizar respeitando o height. só colocando o auto
ele vai escolher se precisa criar uma barra na vertical ou horrizontal

mas caso queira que a barra criada pelo overflow seja somente na
vertical ou horizontal.
basta botar o overflow-y:auto (para uma barra de rolagem scroll na
vertical) ou overflow-x: auto(para uma barra de scroll na horizontal)
Acima você pôde ver algumas propriedades muito importantes do CSS em
ação: display , overflow , height e width ! Mas você sabe porque elas
fazem o que fazem?
Para ter um domínio melhor sobre o tema iremos entrar de cabeça em
como funcionam os blocos do CSS que montam visualmente as páginas
web e vamos aprender sobre o famoso Box Model , um dos conceitos
fundamentais do CSS!

O que é o Box Model?

A primeira coisa que temos que deixar bem explícita é que todos os
elementos HTML são renderizados como caixas pelo browser. Por isso nós
usamos o termo "box model" ou "modelo de caixas" quando nos referimos
a essa forma de renderização e, por tabela, quando falamos de alguns
elementos do layout.
Nos conteúdos desse bloco, você já utilizou HTML e CSS para criar e
estilizar uma página web, então, mesmo sem saber, você já está usando
o modelo de caixas para organizar o seu trabalho!
Só para exemplificar, se você utilizou a propriedade CSS background-color
em algum dos elementos do seu portfólio web, você certamente percebeu
que a cor de fundo foi aplicada não apenas à área diretamente atrás do
elemento html, mas também em uma pequena área ao seu redor. Isso
acontece porque quando você muda a cor de fundo de um elemento você
está colorindo toda a caixa em que ele está contido!
OBS: não confunda a tag background-color que é a cor como marca texto
na palavra tipo este com a tag background que bota a cor em todo fundo.

O box model é composto por algumas partes que formam uma caixa para
cada tag HTML que você utiliza. Essa caixa funciona mais ou menos
assim:
Modelo de Caixas do CSS
A partir dessa imagem, vamos explicar um pouco melhor o que é cada
propriedade:

width e height

Especificam, respectivamente, a largura(width) e a altura da área de

conteúdo, desconsiderando as bordas, margens e padding.

padding

Pode ser traduzido como "enchimento" e controla a quantidade de espaço

vazio entre o conteúdo em si e a borda da caixa.
Ele pode ser pensado como se fosse o "plástico bolha" ao redor do
conteúdo, e o seu uso, por padrão, aumenta o tamanho total do
elemento, enchendo a caixa e fazendo com que ela precise ser maior que
as dimensões do conteúdo.
Tenha isso em mente quando for balancear a altura e a largura, afinal,
uma caixa precisa ser maior que as dimensões do conteúdo quando ele
está coberto com plástico bolha, não é mesmo?

border

É a borda da caixa, pura e simples. A propriedade border em si é

considerada uma shorthand , ou seja, ela serve como um atalho para
controlar um conjunto de outras propriedades que poderiam ser definidas
individualmente, nesse caso border-width , border-style , e border-color !

● border-width : também pode controlar a largura da borda e o seu

valor inicial é medium .
● border-style : essa propriedade controla o estilo da linha e tem
como valor inicial none . Por isso que você não consegue ver
nenhuma borda se não alterar essa propriedade !
● border-color : essa propriedade controla a cor da borda, e tem
como valor inicial currentcolor . Esse valor define a cor da borda
como sendo o mesmo do elemento, então na maioria dos casos é
desejável modificá-la.
dica: deixar deixar a board com quinas arredondadas use o border-radius.
ex:border-radius: 5px;

dica: um modo de você saber onde está a borda é dar uma cor para ela. ex: imagens abaixo

margin
A margem funciona como um tipo de "campo de força" que expande o
elemento para além das suas dimensões visíveis. Ela fica do lado de fora
da borda e não é afetada pela estilização do elemento, servindo mais para
manejar o afastamento entre as caixas. Ainda assim, não esqueça que a
margem faz parte da caixa dentro do box model !

Para fixar - Visualizando o Box Model na prática

Vamos praticar? Primeiro veja o layout de caixas abaixo:

Agora vamos reproduzir esse esquema de itens no seu browser! Copie os

códigos abaixo e cole-os no seu VS Code, criando um arquivo index.html e
um arquivo style.css .
Você provavelmente não conhece algumas das propriedades utilizadas
nesse código, mas não tem problema: iremos trabalhá-las mais para
frente! Basta se concentrar nas classes que você deve alterar de acordo
com as instruções dos comentários.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Exercício de Fixação: box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="caixa width-and-height" style="background:
#036b52">A</div>
<div class="caixa width-and-height padding"
style="background: #41197f;">B</div>
<div class="caixa width-and-height padding margin"
style="background: #444955">C</div>
<div class="caixa width-and-height padding margin border"
style="background: #3898EC">D</div>
</body>
</html>

style.css

.caixa {
color: white;
display: inline-block;
line-height: 50px;
text-align: center;
vertical-align: top;
}

.width-and-height {
height: 50px;
width: 50px;
}

/* insira na classe abaixo um padding de 20px para aplicá-lo

aos itens B, C e D */
.padding {

/* insira na classe abaixo uma margem de 30px para aplicá-la

aos itens C e D */
.margin {

/* insira na classe abaixo uma borda com valor '5px solid

black' para aplicá-la ao item D */
.border {
}
Se você tiver curiosidade para saber sobre as propriedades display , text-
align e vertical-align , sinta-se livre para consultar as documentações
do MDN e da W3Schools . Mas não se preocupe, iremos falar melhor
sobre posicionamento dos elementos em alguns instantes.
O importante é que você tenha compreendido bem como funciona o box
model do CSS, que é base para todos esses assuntos! Se tiver alguma
dúvida não hesite em perguntar.

Posicionamento de Elementos
Agora, você vai aprender a posicionar elementos HTML utilizando CSS.
Para isso, assista ao vídeo abaixo:
os <img> é um objeto in line por isso os 3<img> estão um do lado do
outro. vamos tentar deixa-los sobrepostos usando a sobreposição de
elementos

para isso vamos colocar a praia em position:absolute isso faz que a foto da praia se
sobreponha a todos os outros termos da linha. então a foto e o óculos estão atras da praia.

vamos então botar todos em absolute para eles ficarem todos sobrepostos um ao outro o
CSS ele realiza as sobreposições de cima para baixo nas linhas de código, por isso o
óculos está por ultimo porque vai sobrepor tudo.
vamos colocar a altura da lateral e esquerda para todos ficarem alinhados. usando a tag top
para definir a distancia do topo da janela e left para colocar a distancia da margem
esquerda.

na hora do carregamento ainda pode ocorrer erros de carregamento por causa da

sobreposição observe que o óculos ficou abaixo do gus. podemos arrumar isso colocando o
eixo Z, faremos isso com o comando z-index: , isso faz vocẽ escolher o que vai sobrepor o
que. colocando como se fossem camadas do photoshop. a de menor numero vai por baixo
e cada numero acima vai colocando na parte superior.
vamos colocar agora para o titulo h1 da pagina musica descer junto com a tela.

com o position:fixed o objeto fica parado acompanhando a tela isso é muito util para colocar
em menus que acompanham o scroll da tela. vamos colocar um z-index para não dar
conflito de sobreposição escolhendo a ordem que ela estará.

perceba que o h1 escrito musica acompanha a tela.

agora vamos ver um elemento flutuante, o elemento flutuante afasta os outros elementos
quando ele se move, é como se o objeto flutuante se ergue-se fosse para o local e nenhum
outro objeto ficasse em sua sombra.
aplicamos o float e descrevemos que ele vai ficar left do texto ao coqueiro. a imagem está
no <p>entao quando você subir o texto do <p> ele vai continuar na esquerda porque
botamos float: left.

margin-right aumenta a margem par ao lado direito afastando o texto do coqueiro.

Viu como podemos economizar linhas de código simplesmente agrupando

estilos? Ao fazer isso, podemos corrigir rapidamente erros de estilo pela
página. Imagine: você precisa criar a versão dark-theme do seu site,
fazendo todos os backgrounds ficarem escuros, textos ficarem claros e
estilizar os títulos. Para isso, você precisaria editar cada elemento, mas
agora, basta agrupar os seletores que sofrerão as mesmas mudanças e
Voilà! Tudo resolvido!
E quanto às pseudoclasses? Desde um simples :hover , para o elemento
mudar quando o cursor do mouse passa por cima, até um :focus em um
input de formulário, para quando o elemento estiver selecionado e puder
ter um valor inserido, as pseudoclasses ajudam a estilizar melhor os
elementos, dando um retorno visual ao usuário e agregando mais estilo
ao seu site.
DICA: Experimente colocar a propriedade transition nos seus estilos que
possuem pseudoclasses. 😉

Para fixar I
Vamos praticar o que aprendemos.
Copie o código HTML abaixo e faça o que for pedido:
index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Agrupando Seletores</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Lista dos Melhores Sites que já vi</h1>
<p>Top 3 dos melhores sites que existem na web</p>
<p>Principais motivos para eu gostar deles</p>
</body>
</html>

1 - Adicione uma lista ordenada dos 3 melhores sites que você conhece.
2 - Crie um arquivo no mesmo diretório e nomeie-o de 'style.css'.
3 - Nesse arquivo .css, adicione os estilos para que:

● O texto das tags 'h1' e 'p' estejam centralizados.

● A cor de fundo da sua lista mude quando o cursor estiver sobre o
item.
● A fonte do item mude quando ele for clicado.

4 - Adicione uma lista não ordenada com, pelo menos, 3 características

que você gosta.
5 - No 'style.css', adicione a propriedade 'list-style: none' para ambas as
listas.
Dica : Nesse link , você irá encontrar a documentação sobre todas as
pseudoclasses do CSS.

Para fixar II
Para o próximo exercício, você não deve atribuir nenhuma classe ou id
aos componentes, mas apenas utilizar pseudoclasses para individualizar
cada elemento!
index.html

Agrupamento de Seletores e Pseudoclasses

Você verá a seguir como agrupar seus seletores e como usar as

pseudoclasses para estilizar ainda mais seu site:

podemos ver o agrupamento de seletores, quando damos o style a dois

ou mais grupos. usamos a , (virgula) para isso exemplo acima o grupo p
e a div vao receber o style font-family.

OBS: se tiver trabalhando com descendência ao invés de usar virgula use só o “espaço”

Pseudo classes

uma pseudo classe sempre vem com o nome de um elemento : e depois a pseudo classe.

o hover ele faz com que quando colocar o mouse sobre o elemento ele faça algo, no exemplo
quando passarmos o mouse sobre ele vai ficar com um background color verde.

então com esse codigo quando passarmos o mouse por cima gria um fundo verde no elemento.
ex: p:hover{ }
vamos aprender mais um outro

O active ele vai ser ativado quando o elemento for clicado. no exemplo abaixo a cor da fonte do
elemento vai mudar para branco quando clicado ex: p:active { }

Viu como podemos economizar linhas de código simplesmente agrupando

estilos? Ao fazer isso, podemos corrigir rapidamente erros de estilo pela
página. Imagine: você precisa criar a versão dark-theme do seu site,
fazendo todos os backgrounds ficarem escuros, textos ficarem claros e
estilizar os títulos. Para isso, você precisaria editar cada elemento, mas
agora, basta agrupar os seletores que sofrerão as mesmas mudanças e
Voilà! Tudo resolvido!
E quanto às pseudoclasses? Desde um simples :hover , para o elemento
mudar quando o cursor do mouse passa por cima, até um :focus em um
input de formulário, para quando o elemento estiver selecionado e puder
ter um valor inserido, as pseudoclasses ajudam a estilizar melhor os
elementos, dando um retorno visual ao usuário e agregando mais estilo
ao seu site.
DICA: Experimente colocar a propriedade transition nos seus estilos que
possuem pseudoclasses. 😉

Para fixar I

Vamos praticar o que aprendemos.

Copie o código HTML abaixo e faça o que for pedido:
index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
 <title>Agrupando Seletores</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Lista dos Melhores Sites que já vi</h1>
<p>Top 3 dos melhores sites que existem na web</p>
<p>Principais motivos para eu gostar deles</p>
</body>
</html>

1 - Adicione uma lista ordenada dos 3 melhores sites que você conhece.
2 - Crie um arquivo no mesmo diretório e nomeie-o de 'style.css'.
3 - Nesse arquivo .css, adicione os estilos para que:

● O texto das tags 'h1' e 'p' estejam centralizados.

● A cor de fundo da sua lista mude quando o cursor estiver sobre o
item.
● A fonte do item mude quando ele for clicado.

4 - Adicione uma lista não ordenada com, pelo menos, 3 características

que você gosta.
5 - No 'style.css', adicione a propriedade 'list-style: none' para ambas as
listas.
Dica : Nesse link , você irá encontrar a documentação sobre todas as
pseudoclasses do CSS.

Para fixar II

Para o próximo exercício, você não deve atribuir nenhuma classe ou id

aos componentes, mas apenas utilizar pseudoclasses para individualizar
cada elemento!
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Pseudoclasses</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Paleta de Cores</h1>
<p>Vamos criar uma paleta de cores com as divs abaixo:</p>
<div>
<h3>Cor primária</h3>
</div>
<div>
<h3>Cor Secundária</h3>
</div>
<div>
<h3>Cor Complementar</h3>
</div>
<div>
<h3>Cor Escura</h3>
 </div>
<div>
<h3>Cor Clara</h3>
</div>
</body>
</html>

1 - Estilize as divs para que, ao passar o cursor por cima das mesmas,
elas ganhem uma borda.
2 - Faça cada div ter uma cor própria.
3 - Estilize cada uma das tags h3 .
4 - Faça a terceira div ser maior que as demais.
5 - Deixe as tags ímpares h3 com o texto em itálico.

Combinações e Classes Descendentes

Neste ponto, você já aprendeu sobre o modelo de caixas, sobre como

posicionar elementos na sua página e como o agrupamento de seletores e
as pseudoclasses funcionam. Agora, você dará um passo mais a fundo na
dinâmica do CSS , aprendendo sobre combinações de classes em
elementos HTML e também a como utilizar a descendência para aplicar
estilizações à elementos específicos.
Ufa, parece bastante coisa, certo? Mas calma! Assista ao vídeo
maaaravilhoso a seguir e veja como sua aplicação é simples, porém
poderosa!

criamos uma style no .perigo border: 5px solid yellow. o solid é apra dizer que vai aparecer
e ter uma cor.

para escolher um elemento que também faça parte de uma classe .

usamos um .(ponto) p.perigo significa que é um <p>(paragrafo) que seja da classe perigo. e
se for vai ganhar o style border: 5px solid yellow;

descendência
temos um ul que é o pai, li que é o filho e o p que é o neto. o css usa essa estrutura de
elementos um dentro do outro.
para fazer um style.

Quando usado somente o espaço para separar os elementos de um style nós referimos a
uma descendência. então todos os termos que são um <p>paragrado filhos de um item
listado(li) e netos de um lista nao ordenada <ul> vao receber esse style. fundo verde letra
branca

podemos ainda colocar classe e descendência

Para fixar

E aí? Viu o quão incrível o CSS pode ser?! Agora, para fixar ainda mais o
conteúdo, vamos exercitar.
index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>#GoTrybe</title>
</head>
<body>
<h1><em>Combinações e Classes Descendentes</em></h1>
<br />
<h3>Top 5 frases memoráveis:</h3>
<ol>
<li><em>Com grandes poderes vêm grandes
responsabilidades.</em> - Tio Ben (Homem Aranha)</li>
<li><em>Houston, temos um problema.</em> - Jack
Swigert</li>
<li><em>Sempre parece impossível até que esteja
feito.</em> - Nelson Mandela</li>
<li><em>Parte da jornada é o fim.</em> - Tony Stark
(Homem de Ferro)</li>
<li><em>Às vezes, o melhor que podemos fazer é começar
novamente.</em> - Steve Rogers (Capitão América)</li>
</ol>
 <h3>As maiores linguagens de programação:</h3>
<ul>
<li>Python</li>
<li>Java</li>
<li>JavaScript</li>
<li>C#</li>
<li>C / C++</li>
</ul>
<h3>Maiores aliados de uma pessoa desenvolvedora:</h3>
<ul>
<li>
<a href="https://pt.stackoverflow.com/"
target="_blank">StackOverflow</a>
</li>
<li>
<a href="https://www.w3schools.com/"
target="_blank">W3Schools</a>
</li>
<li>
<a href="https://developer.mozilla.org/pt-BR/"
target="_blank">MDN Web Docs</a>
</li>
<li>
<a href="https://devdocs.io/"
target="_blank">DevDocs</a>
</li>
<li>
<a href="https://app.betrybe.com/"
target="_blank">Trybe</a>
</li>
</ul>
</body>
</html>

Crie o arquivo style.css e resolva os seguintes exercícios:

1 - Faça com que todos os itens de Listas Ordenadas tenham uma cor de
fundo amarela. Se a numeração do item for PAR, faça a cor de fonte ser
verde. Se o número for considerado ÍMPAR, utilize a propriedade text-
transform para deixar o texto maiúsculo. (Dica: combinar classes pode
ser útil aqui).
2 - Faça todas as tags Header (h1, h2...) possuírem cor de fonte
vermelha e, se alguma delas estiver em itálico, aumente seu tamanho
para 40px e acrescente uma borda de 1px preta e sólida.
3 - Faça todas as li's terem 20px de tamanho de fonte e, para todo texto
em itálico dentro de alguma li, utilize a propriedade font-weight para
deixá-lo negrito.
4 - Na listagem de linguagens de programação, faça com que as 3
primeiras da lista possuam cor de fonte azul e, se alguma possuir "java*"
no texto, utilize uma cor de fundo rosa.
5 - (Bônus) Para cada link na lista de aliados da pessoa desenvolvedora,
faça com que ao passar o mouse sobre cada um, o texto fique em negrito
e assuma a cor de fonte "temática do site"
Dica 1: Utilize o seletor :hover para controlar o passar do mouse.
Dica 2: Sugestão de cores padrão. StackOverflow (laranja), W3Schools
(verde), MDN (preta), DevDocs (amarela), Trybe (verde).

[EXTRA]
nth-child(odd)
esse comando serve para você criar um style para um grupo específico de
<ul> lista naõ ordenada ou <ol> lista ordenada e colocar efeitos
somente nos <li> itens listados impar ou pares. essa pseudo classe é
usada em uma classe <ol> ou <ul> referenciando os filhos li.
nth-child(odd) para os <li> impares e
nth-child(even) para os pares

ol=lista ordenada
li=listed item, termos da lista a qual pertence ol ou ul
ol li =ordened list com filha l
:
nth-child(): pode ser odd(impar) ou even(par)

comandos: exemplo de propriedades de cabeçalho

#cabecalho{
position: fixed;
top:0;
left:0;
right:0;
background-color: green;
comando site descrevendo os positions
https://www.devmedia.com.br/como-usar-a-propriedade-position-css/
24451

Overflow- coloca a imagem para caber em algo ou bota

uma scrollbar quando algo está muito grande.

https://www.w3schools.com/css/
css_overflow.asp

The overflow property specifies whether to clip the content or to add

scrollbars when the content of an element is too big to fit in the specified
area.

The overflow property has the following values:

● visible - Default. The overflow is not clipped. The content renders

outside the element's box
● hidden - The overflow is clipped, and the rest of the content will be
invisible

pode usar overflow-x:hidden

● scroll - The overflow is clipped, and a scrollbar is added to see the

rest of the content
● auto - Similar to scroll, but it adds scrollbars only when necessary

FLEX BOX
ajuda a alinhar objetos, olhar o site abaixo.

https://developer.mozilla.org/pt-BR/docs/Web/CSS/
CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Recursos adicionais (opcional)

E aí, gostou do que aprendeu até aqui? Nesta parte, nós colocamos outras
referências para você se aprofundar no tema. Artigos, tutoriais, livros
etc…

● Tutorial - Como utilizar as ferramentas de desenvolvedor do

browser
● Artigo - GitHub Pages
● Playlist - Curso de HTML 5 - Gustavo Guanabara
● Curso Online Gratuito - Introdução ao HTML - Scrimba
● Curso Online Gratuito - HTML, CSS, e JavaScript para
desenvolvedores web
● Tutorial - Série de artigos ensinando HTML & CSS
● Tutorial - Aprenda a estilizar o HTML com CSS - Mozilla
● Pseudoclasses - Mozilla
● Site - CSS Tricks