CSS para iniciantes

1. Unidades de medida

2. Funções

3. Padrão vs Herança

4. Box model (margin, padding, etc.)

5. Display (block, inline e block-inline)

a. Grid

i. Infos Importantes

ii. Usos > Tags

b. Flexbox

i. gap

ii. flex: 1

iii. flex vs grid

6. Position (static, relative, absolute, fixed)

7. Pseudo Classes

8. Pseudo Elements

9. Variáveis (customização)

10. Media Querie - modo dark/light

11. Css Utilitário

12. Frameworks

a. documentaçao e uso

b. vantagens e desgantagens

CSS para iniciantes 1

 Unidades de medida
px

Unidade de referencia, mas não representa em sí 1px exato (é adaptável

dependendo da densidade da tela)

rem

Relativo à font-size da raíz/html (na maioria dos browsers é 16px) - principal

unidade de uso

1rem = 16px

em

Também é relativa à tipografia, porém do elemento pai.

vh & vw

Relativo a altura e largura da tela, respectivamente.

🗣 obs. não é igual à % já que porcentagem é relativo ao pai e não à

tela.

fr

Unidade fraccionaria, distribui o espaço

Funções
calc()

Permite fazer calculos dentro do css.

É interessante para misturar unidades de medida, por exemplo remover 100px
da tela, independente do seu tamanho calc(100vw - 100px)

Padrão vs Herança

CSS para iniciantes 2

 Há tags que não podem ser mudadas pelo pai, ou seja, herdar a característica
definida no pai, por já terem a sua característica própria pre establecida. Para
poder “herdar” a característica do pai deve ser utilizada a propried ade que
queremos com o valor: inherit (herdar).

antes depois

Box Model
Uma interface web bem feita é composta de diversas caixas que organizam o
conteúdo. margin, padding, border, height, width definem os valores dessas caixas.

CSS para iniciantes 3

 height width

A altura total da caixa, por padrão é A largura total da caixa, por padrão
o somatório do conteúdo + é o somatório do conteúdo +
padding (top/bottom) + border padding (left/right) + border
(top/bottom) (left/right)

como funciona esse somatorio?

Se definimos um elemento com width de 100px, enquanto não haja padding

ou border, o valor total do width será 100 pixels. Mas se acrescentarmos uma
borda ou padding, os valores dos mesmos serão acrescentados ao width,
fazendo com que o wisth total do elemento seja maior que 100px. Por
exemplo, se definimos um padding de 10px, o width total será 120px (pois
temos padding de 10px na esquerda e 10px na direita)

padding
border

Distancia entre conteúdo e borda

Borda do conteúdo
(espaçamento interno)

margin

Espaçamento externo do conteúdo.

Diferente dos outros elementos
elas nao são somadas,
implesmente prevalece aquela que
é maior Ordem que os valores seguem. (padding:
quando há 2 valores / margin: 4)
exemplo

CSS para iniciantes 4

 se temos uma div com margin
30px e um h1 embaixo com
margin 40px, a margin que
ficará entre eles será 40px

Display

Block
Inicia uma nova linha e não permite que outros elementos sejam posicionados em
sua linha. Aceita todas as propriedades do box model (width, height, padding,
etc.).

Elementos block

<div> <h1, h2, …> <p> grid

Inline
Permite que os elementos se poscicionem um ao lado do outro, ou seja, respeita o
fluxo da escrita sem iniciar uma nova linha.

Elementos inline

<span> <a>

Porém, não é possível definir valores de width , height , margin (top/bottom) e etc.

Inline-block
O elemento continua sendo inline mas agora é possivel modificar os valores de
width , height e etc.

Grid
(display block)

Sua função é posicionar elementos na tela. O elemento definido com display grid
torna-se um grid container (pai) e os elementos que este envolve, grid itens
(filhos)

CSS para iniciantes 5

 No display: grid os grid itens se expandem na tela, ocupando todo o espaço
em branco que conseguirem

sem grid/com grid

sem display grid com display grid

Infos. importantes
Na propriedade grid, as margin não colidem, ou seja, elas não mantem seu
comportamento normal de pervalecer aquela que é maior, elas são somadas.

sem/com

sem display grid com display grid

Para manter proporcional, sempre utilize valores em fr . Note que se não

determinar nenhum valor de gap as colunas ficarão grudadas. Diferente de
quando usamos um valor fixo como o px , se o valor determinado for menor
que a tela, naturalmente ficará uma certa medida de gap porém não fica
proporcional.

diferença

valor em px valor em fr , sem gap

CSS para iniciantes 6

 1 fr = “distribua os elementos para ocupar o espaço em branco”

como funciona? ele vê o conteúdo das colunas e usa como padrão aquela
com mais conteúdo, adaptando-se para que caiba todo ele na horizontal.

O valor padrão do grid é strech, tenta alargar ao máx. aquele elemento maior

Os grid itens devem ser alineados no pai. Menos quando quer alinear um item
em específico (align-self)

align-itens / justify-itens / place-itens

→ Para falar com todos os ítens, utiliza-se no pai

align-self / justify-self / place-self

→ Para falar com um ítem em específico

Com valor fr o justify não funciona, pois ele força o conteúdo a se distribuir
no espaço em branco

Para justificar ou alinear o conteúdo deve sempre haver espaço sobrando

se vc tentar align ou justify e não mudar nada, veja em inspecionar o tamanho
do grid, se não houver espaço sobrando então deve-se alterar o valor de
height/width

Problema

CSS para iniciantes 7

 Quer colocar informações do lado de uma imagem mas as linhas ficam muito
maiores que o conteúdo

Por que isso acontece? Aqui a imagem está definida para que ocupe da linha
2 até a linha 4. Porém seu tamanho é muito maior que o das informações a
seu lado, fazendo com que a linha fique grossa para que a img caiba, assim
alterando as infos. à direita.
Como resolver? Primeiro, no pai (o container grid), iremos definir os 3
primeiros valores como auto, para que ocupem apenas o espaço que seu
conteúdo ocupa (o primeiro valor é do título, o segundo é do preço e o
terceiro a descrição da bike). O último valor iremos definir como 1fr, para que
distribua todo o espaço que resta da imagem para que caiba, na última linha.
Uma vez feito isso, posicionamos nossa foto para que ocupe da linha 2 até a 5
( grid-row: 2 / 5 ). E agr sim podemos pocicionar nosso botão para ficar do
lado direito tmb. Ficará assim:

CSS para iniciantes 8

 → Esse tipo de layout é muito complexo, por isso tente evitar.

Como evitar?

Mudando a estrutura do nosso html.

Antes (código html e css)

Se olhamos o site podemos reparar que está composto por um título, embaixo
uma imagem e do lado as informações da imagem. Bata adicionar uma div
com a tag info, envolvendo todos os elementos da informações da bike
(preço, descrição e botão), no nosso html.

Depois (html e css)

CSS para iniciantes 9

 Agora nosso css ficará muito mais simples e limpo.

Usos
display: inline-grid

Torna o elemento um grid container com comportamento inline

grid-template-columns

Define quantas colunas teremos. Fala com o grid container. (valor

correspondente a cada coluna que queremos)

→ queremos criar 4 colunas de 30px

grid-template-columns: 30px 30px 30px 30px;

→ O ideal para grid é usar a unidade de medida fr , que distribui certinho os

espaços.

→ se queremos distribuir duas colunas igualitariamente usa

grid-template-columns: 1fr 1 fr;

→ mas se queremos que a da direita seja maior

grid-template-columns: 1fr 2 fr;

grid-template-rows

CSS para iniciantes 10

 Define o tamanho das linhas. Cada tamanho dado corresponde a uma linha,
os valores não definidos ficarão como auto (o valor auto pode ser al terado
tmb)
Pode forçar a criação de novas linhas para caber, diferente das colunas que
não pode.

obs. Cada vez que vc forçar uma linha menor que o conteúdo, o conteúdo vai
estourar

→ aqui o valor establecido para a

segunda linha foi menor que o
tamanho da imagem. Como o grid-
templae-rows não consegue diminuir
o tamanho da mesma, fica
estourada, ou seja, ultrapassa seu
container se sobrepondo ao botão
de comprar

grid-template-__: repeat()

Serve para repetir os valores. Primeiro define quantas vezes quer que repita e
dps o valor que será repetido

grid-template-__: auto-fit

“tente encaixar quantos items forem possiveis”

grid-template-__: minmax()

Permite definir dois valores, o mínimo que o elemento poderá ter, e o máx

grid-auto-rows

Por padrão, toda linha nova que é criada, é criada com valor auto. Com essa
propriedade vc consegue alterar o valor que essas novas linhas criadas terão

CSS para iniciantes 11

 grid-column

Define quanto espaço o elemento ocupará no grid. Fala com o grid item.

como funciona?
determina o valor de colunas que o grid item irá ocupar

Valor único
se colocar um único valor (ex. 2), o elemento irá ocupar a coluna
correspondente a esse valor (nesse caso a img ficará apenas na 2 coluna)

Expansão

2 / 4 depende das colunas

Se eu quero que a img se expanda entre colunas, utiliza-se uma /

para definir o inicio e o final - a primeira linha e a útlima (nesse caso: 1

/ 3 ).

CSS para iniciantes 12

 → pq grid-column: 1 / 3 e não 1 / 2 ? Quando falamos em
expansão, já não falamos em colunas e sim em linhas. Se vermos no
inspecionar>grid, veremos um quadro vermelho com números, no
topo, correspondentes às linhas que temos.

1 / -1 independente
Se vc quer que a imagem ocupe sempre a totalidade de colunas,
independente de quantas colunas/linhas vc tiver, utiliza-se 1 / -1 .

CSS para iniciantes 13

 Assim, mesmo se a gente mexer no grid-template-columns de 2 para 4, a
nossa imagem ainda se extendera na totalidade das colunas

span

Expande a foto na totalidade de colunas definidas pelo span, a partir

daquela que nasceu.
ex. grid-template-column: 1fr 1fr 1fr, 1fr; (4 colunas)
grid-column: span 2;

grid-row

Define em qual linha o item ficará

grid-area

Define em qual coluna e qual linha o item ficará ao msm tempo. Primeiro
coloca a column e dps row.

{
grid-area: 2 / 1;
}
--> O item ficará na 2 coluna, 1 linha

align-content

Considera a vertical

CSS para iniciantes 14

 justify-content

Considera a horizontal

place-content

Considera a horizontal e vertical. Primeiro alinea e dps justifica. Assim, pode

ser utilizado com dois valores, primeiro o align e dps o justify.

{
place-content: start end;
}
--> o elemento fica no inici
e no final em relação à ver

Flexbox
Display de posicionamento, parecido ao grid porém com propriedades diferentes

display: flex

Os filhos passam a ter um tamanho flexível e ficam um ao lado do outro

Flex-wrap: wrap

CSS para iniciantes 15

 Serve para quebrar a linha. Caso todos os elementos não caibam na mesma
linha, quebre para a próxima

Gap

Define distância entre os elementos. Utiliza-se no pai

→ O Align e Justify funcionam da mesma forma que no Grid. Lembre-se que

essas propriedades só funcionam se existir espaço entre os elementos.

Flex: 1 ;
Atalho para valores padrão de:

flex-grow: 1

Valor padrão: 1

Se esse elemento deve crescer para ocupar o espaço vazio. O 0 impede o

crescimento, valores maiores que 0 funcionam como a unidade fr do grid.

flex-basis: 0

Valor padrão: 0

Valor inicial antes de distribuir o espaço em branco.

flex-shrink: 1

Valor padrão: 1
Caso exista um valor de base, o flex-shrink irá determinar se esse valor pode
ser reduzido ou não. 0 significa que ele não pode ser reduzido.

Flex vs Grid
Use ambos no seu layout, eles resolvem problemas diferentes. O grid te dá
controle em todos os eixos e o flexbox apenas no total de itens por linha.

⬆️

Position

CSS para iniciantes 16

 static

Posição padrão “segue os elementos no seu fluxo padrão”

“one fica acima de two e two acima de three”

relative

É bem parecido com o static, já que mantem o elemento no fluxo padrão

(natural flow). Porém, o position reative permite fazer 4 coisas que no static
não é permitido, sendo elas: alterar o top, right, bottom e left do elemento.
“permite alterar a posição do elemento em relação ao local onde ele estaria
normalmente na posição static ”

CSS para iniciantes 17

 🗣 Lembrete! O espaço ocupado pelo elemento continuará a ser
ocupado, mesmo que o elemento seja movimentado.

Entretanto, é bem raro vc utilizar os valores top/bottom - left/right diretamente

no elemento com position: relative, já que o único que vc estará fazendo é
tirar ele do seu fluxo normal no documento, sendo bem dificil estilizar
elementos ao seu redor, já que acaba invadindo o espaço do outros.
Normalmente, vc utilizará o position relative mas não para alterar etes 4
valores.

absolute

Aqui é onde normalmente mexeremos nesses 4 valores de top/bottom e

left/right.

O fluxo padrão do elemento ignora completamente o filho 1 (one), atuando

como se ele não existisse; tanto que se o apagarmos do html o documento
não sofrerá outras alterações

CSS para iniciantes 18

 Isto é porque o position: absolute retira completamente o elemento do fluxo
padrão do nosso documento, fazendo com que todos os outros componentes
atuem como se esse elemento não existisse. Por isso, acaba sendo muito útil
para fixar um elemento acima de outro sem alterar o resto. Por exemplo,
posicionar o elemento filho acima da borda do pai.

Porém, seu padrão é ficar absoluto em relação a o último elemento relativo e

caso não haja todo o documento, por isso, se queremos que fique relativo ao
pai devemos adicionar um position: relative na div do pai. Porém, funciona
também com o positio: absolute no pai, o importante é que seja um valor
diferente do static

como funciona o padrão do absolute?

Adefinição de position: absolute é ficar absoluto em relação ao seu pai.

Quando esse pai não é definido o documento todo cumpre esse papel por
padrão. Uma vez que definimos um certo elemento como pai, esse padrão
é alterado, fazendo com que ele siga a sua definição de ficar absoluto em
relação ao seu pai.

fixed

CSS para iniciantes 19

 É bem similar ao absoluto, porém agora é sempre relativo ao documento
inteiro, ou seja, não é possivel definir um outro pai que nao seja todo o
documento. Também, ficará sempre fixo na tela (mesmo mexendo o site, ele
ficará nesse lugar).

sticky

É uma mistura do relative com o fixed. O elemento ficará na sua posição

relativa à sua original porém fixa, então quando mexermos o site ficará
fixo.Por padrão é relativo, mas no momento que mexermos a pag ficará fixo.

🗣 Lembre-se que os valores top/bottom e left/right não funcionaram sem

definir o position

⬆️

Pseudo Classes
Estados
Permite modificar os diferentes estado do html. É específico para links e
elementos que permitem interagir.

:hover

Quando passamos o mouse por cima de um elemento

:focus

Por padrão ele define um outline

como focar?
clica na tela e da tab

sem foco com foco

CSS para iniciantes 20

 :active

No momento que vc clicka no elemento, ele é ativado

:visited

Serve para avisar quando vc já visitou uma página. Ele domina acima dos
outros estados.

--> Como codifca?

seletor:estado{
propriedade: valor;
}

--> exemplo
.botao:hover{
background-color: #f2f2f2;
}

Seletores
São mais fortes, não obedecem a ordem de cascata

:first-child

Seleciona o primeiro filho

:last-child

Seleciona o último filho

:nth-child (4)

É uma função. 4 (quarto elemento), even (seleciona os elementos pares), odd

(seleciona os elementos ímpares), 3n (seleciona de 3 em 3) → podem ser
utilizados outros números (4n - de 4 em 4; 5n - de 5 em 5, e assim vai)

:not()

Nega a seleção de um elemento

CSS para iniciantes 21

 Pseudo Elementos
::after

Adiciona um elemento de html no css. Ou seja, não é uma marcação e sim

uma estilização, e é assim que o browser irá ler.
Nesse caso, acrescenta depois da tag definida.

::before

É igual o after só que ao invez de adicionar depois do elemento, coloca antes.

CSS para iniciantes 22

 como brincar com esses elementos?

Criar uma bolinha na frente da lista

Primeiro tira a bolinha da ul

::first-line e ::first-letter

Seleciona a primeira linha e a primeira letra do conteúdo, respectivamente

⬆️

Variáveis (customzação)
Serve para valores que formos usar repetidamente no nosso código, facilitando
sua reutilização. Normalmente define-se a variavel na raíz do codigo (:root)

(raíz) :root {
--roxo: #84e; (--variável:valor da variável)
}

Para utilizar basta colocar na propriedade var(- - nome da var) (color: var(- - roxo))

Media Querie
O media possui varias utilidades além de usar para ajustar responsividade da tela
com max-width. Uma delas seria definir a escala de cor do site dependendo dos
ajustes de cor da nossa maquina, ou seja, modo claro ou modo escuro.

CSS para iniciantes 23

 A forma mais correta de definir isso é escolhendo uma cor como padrão,
geralmente o branco e definindo as variaveis do branco como padrão (no :root).
Já as variaveis do modo escuro definimos dentro da tag @media (prefers-color-
scheme: dark)

Agora dependendo da
configuração do usuario o site
será dark ou light. E caso sua
maquina nao suporte o media
ainda verá as preferencias do
padrão, que nesse caso é light

⬆️

CSS Utilitarios
Há estilizações no nosso código que usaremos repetidamente, por exemplo, um
padrão nos títulos. Para evitar escrever repetitivamente o mesmo código utiliza-se
o css utilitário. Como funciona?
No nosso css escreveremos classes específicas com os estilos que iremos
reutilizar (uma tag para cada estilo) e depois no nosso html colamos o nome da
tag na class do elemento que queremos estilizar com aquele estilo em específico.
Ou seja, o caminho contrario que normalmente utilizamos (definir uma tag na
class do elemento no hml e depois estilizar no css). Por exemplo:

CSS para iniciantes 24

 🗣 Uma dica para criação de
nome: defina o nome da
class com as iniciais da
propriedade, por exemplo:
margin-bottom (mb) e um -nº
para definir o seu tamanho.
Então, mb-1 é o menor
margin-bottom, mb-2 é um
pouco maior, mb-3 maior
ainda e assim
sucessivamente.

Frameworks
Há bibliotecas que já contem valores pre-determinados, igual fazemos no css
utilitário, funcionando como uma espécie de template ou modelo. Estas
“bibliotecas” são chamadas de frameworks. É bem comúm serem utilizadas no
desenvolvimento de softwares mais avançados. Porém para já ir treinando seu
uso, aprenderemos a aplica-las no nosso codigo de html e css.

As duas que veremos são:

Bootstrap

Tailwind

Documentação
Na documentação do framework está toda a informação necessária sobre o
código da biblioteca (reset css, a tipografia, padding, etc.). Esta será a nossa guia

CSS para iniciantes 25

 para saber qual class colocar no nosso código e o que será aplicado com dita
class.

Utilização
Primeiramente devemos linkar nosso framwork a nosso código html. Para isso,
accesamos a pagina do nosso framework e seguimos os passos de instalação. No
bootstrap basta copiar o código e colar ele no <head>

<!-- CSS only -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/cs

Após linkar, basta olhar a documentação e começar a estilizar nosso código.

🗣 É muito vantajoso aprender um framework pois vc não precisará perder

tanto tempo na estilização do documento. Porém, se vc não conhece o
framework vai ser mais trabalhoso e não é recomendado. Outra
desvantagem, tendo estudado o framework, é que por serem valores
padrões e de livre acceso, as paginas feitas dessa maneira ficarão com
a mesma cara, já que não é vc personalizando o código css.

⬆️

CSS para iniciantes 26