O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.

1. Pra quê?
Por Karoline Suzuki
Css -

2. Quem sou?
Karol Suzuki
Graduada em Sistemas de Informações
Desenvolvedora Front – MJV
Coordenadora do Caqui Coders
Organizadora/Palestrante/Writer do
Nerdzão/Nerdgirlz
Amante de caveiras, unicórnios, bebidas
azuis e com gosto peculiares

3. Css não é ...

4. Css não é ...

5. “
O que não é
Linguagem de programação!

6. “
Mas o que é o css???

7. “
O que é
Linguagem de folha de estilo!

8. “
Como funciona?
Através das tags no css é possível
estilizar toda sua página!

9. “
Exemplo
Tag para estilizar todas as
suas tags de parágrafos.

10. Anatomia de um conjunto
de regras CSS

11. “
Anatomia
CSS
Dentro da Anatomia temos:
Seletor
Declaração
Propriedade
Valor da propriedade

12. Anatomia
CSS
Seletor :
O nome do elemento HTML no começo do
conjunto de regras. Ele seleciona o(s) elemento(s) a
serem estilizados (nesse caso, elementos <p>).
Para dar estilo a um outro elemento, é só mudar o
seletor.

13. Anatomia
CSS
Propriedade :
Forma pela qual você estiliza um elemento HTML.
(Nesse caso, color é uma propriedade dos
elementos <p>.) Em CSS, você escolhe quais
propriedades você deseja afetar com sua regra.

14. Anatomia
CSS
Valor da propriedade :
À direita da propriedade, depois dos dois pontos,
nós temos o valor de propriedade, que escolhe
uma dentre muitas aparências possíveis para uma
determinada propriedade (há muitos valores
color(cor) além do red(vermelho)).

15. Anatomia
CSS
Declaração :
Uma regra simples como color: red; especificando
quais das propriedades do elemento você quer
estilizar.

16. Anatomia
CSS
Observações Importantes :
Toda declaração de css fica dentro de Chaves {}
Dentro de cada declaração você deve usar : (dois
pontos) para seprar propriedade de valor de
propriedade
Dentro de cada conjunto de regras você usa o ;
(ponto e vírgula) para separar cada declaração da
próxima.

17. Modificando
multiplos
valores
de uma
propriedade
p {
color : red;
witdh: 200px;
font-size:
20px;
}

18. Selecionando
multiplos
elementos
p, li, ul {
color : red;
}

19. Diferença
entre
Seletores
Elementos HTML : ex <p>
ID’s :
ex: no Css - #id
no HTML - <p id= “id”>
Classes:
ex: no Css - .classe
no HTML - <p class=“classe”

20. Diferença
entre
Seletores
Atributo
ex: no Css - img[src]
no HTML - <img src=“imagem.jpg”>
e não tags que sejam só <img>
Pseudo-classe
ex: no Css - a:hover
no HTML - <a> quando passar o
mouse sobre a tag

21. Fontes
e
textos
- font-family (a fonte que
deseja usar nos textos);
- font-size (tamanho);
- color (cor do texto);
- text-decoration
(italico,sublinhado,negrito);
- letter-spacing(espaçamento
entre letras);

22. Sobre
layout
do seu
CSS
- Pense que o layout é uma
caixa

23. Fontes
e
textos
- Margin (margem)
Pense nela como sendo o
espaçamento externo dessa
caixa.

24. Fontes
e
textos
- Padding (espaçamento
interno)
Pense nele como sendo o
espaçamento do conteúdo
dentro da caixa.

25. Fontes
e
textos - Border (borda)
Pense nele como sendo o
contorno dessa caixa.

26. Fontes
e
textos
Nessa seção ainda podemos alterar algumas
propriedades de cada um desses elementos,
como por exemplo :
- width (largura do elemento)
- background-color (cor de fundo)
- color (cor do conteúdo do elemento)
- text-shadow (cria uma sombra dentro do texto)
- display (maneira de dispor o elemento no html)

27. Fontes
e
textos
O que não te explicaram sobre esse tipo de
declaração!
text-shadow: 3px 3px 1px black;
● O primeiro valor em pixel define o deslocamento horizontal da
sombra do texto — até onde ele se move: um valor negativo deve
movê-la para a esquerda.
● O segundo valor em pixel define o deslocamento vertical da
sombra do texto — o quanto ela se move para baixo, neste exemplo;
um valor negativo deve movê-la para cima.
● O terceiro valor em pixel define o raio de desfoque da sombra —
um valor maior significará uma sombra mais borrada.
● O quarto valor define a cor base da sombra.

28. Reset
do
Css!!!
Você sabia que os navegadores já colocam
alguns estilos por default nas páginas?
Mas você resetar esses configurações logo no
começo do seu css.
só usar o que tem nesse site:
https://meyerweb.com/eric/tools/css/reset/

29. E para funcionar no seu HTML
Você precisa declarar o import
dele, dentro da sua tag
<head><head/>

30. Para funciona
no seu HTML
Lembre se de declarar corretamente as
tags no corpo do HTML e CSS!!!
Use boas práticas de re-uso de código para
que não precise ficar escrevendo código que
não precisa! Procuro por Code Clean!
E se precisar de ajuda, procure ajuda de
pessoas que conhece, videos, artigos,
documentação etc, não tenha vergonha de
pedir ajuda!

31. E agora é só partir pro code
e aprender na prática como
funciona tudo!

32. Perguntas???

33. “O maior desafio que você
irá enfrentar na vida é
contra você mesmo! Saia da
zona de conforto e
confronte-se !”

34. Obrigada!
Linkedin: https://www.linkedin.com/in/karoline-suzuki-r2d2/
Facebook: https://www.facebook.com/karoline.suzuki
Github: https://github.com/suzukikarol
Instagram : @ka.suzuki.dev
Twitter : @KarolineSuzuk12/