O documento fornece uma introdução sobre CSS (Cascading Style Sheets), definindo-o como um mecanismo para adicionar estilos a documentos web. Ele explica os componentes básicos de uma regra CSS, como seletores, declarações e propriedades. Além disso, discute como inserir folhas de estilo e a ordem de precedência entre elas, e introduz o modelo de caixa CSS.

1. Prof. Pedro Clarindo da Silva Neto
IFMT

2. CSS
Prof. Pedro Clarindo da Silva Neto
• Maujor
Abreviação para o termo em inglês Cascading
Style Sheet, traduzido para o português como
Folhas de Estilo em Cascata.
Definição

3. CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
Folha de estilo em cascata é um mecanismo
simples para adicionar estilos (por exemplo:
fontes, cores, espaçamentos) aos documentos
web.
Definição

4. CSS
Prof. Pedro Clarindo da Silva Neto
Não cabe à HTML fornecer informações ao
agente do usuário* sobre a apresentação dos
elementos.
Finalidade
*Qualquer dispositivo capaz de interpretar um documento
escrito em linguagem de marcação. Ex: Navegador,
leitores de tela, robôs de indexação, etc.

5. CSS
Prof. Pedro Clarindo da Silva Neto
Unidade básica de uma folha de estilo, menor
porção de código capaz de produzir efeito de
estilização.
Uma regra CSS é composta de 2 partes:
Seletor e Declaração.
Regra CSS

6. CSS
Prof. Pedro Clarindo da Silva Neto
seletor { propriedade: valor;}
Regra CSS
Regra CSS
Declaração

7. CSS
Prof. Pedro Clarindo da Silva Neto
Seletor: alvo da regra;
Declaração: determina os parâmetros de estilização;
Propriedade: define qual característica do seletor
será estilizada;
Valor: quantificação da propriedade.
Regra CSS

8. CSS
Prof. Pedro Clarindo da Silva Neto
p {
color: red;
background-color: black;
font-size: 12px;
}
Regra CSS
Seletor
Propriedades
Declaração
Regra CSS

9. CSS
Prof. Pedro Clarindo da Silva Neto
NÃO é CaSe SeNsItIvE;
M ú l t i p l o s e s p a ç o s são tratados como espaços simples;
/* Comentário de uma linha*/;
/* Comentário
de mais de
uma linha*/.
Tipos de Componentes de
Regra CSS

10. CSS
Prof. Pedro Clarindo da Silva Neto
p { font-family: Arial, Sans-serif; }
estiliza p com fonte da família sem serifas.
p { width: 400px; }
estiliza p com largura 400px.
Tipos de Componentes de
Regra CSS

11. CSS
Prof. Pedro Clarindo da Silva Neto
p { font-size: 120%; }
estiliza p com tamanho de fonte 1.2 vezes o valor
de referência.
p { background-color: red; }
estiliza p com fundo na cor vermelha.
Tipos de Componentes de
Regra CSS

12. CSS
Prof. Pedro Clarindo da Silva Neto
p { height: 2em; }
estiliza p com altura 2 vezes o valor de referência.
Tipos de Componentes de
Regra CSS

13. Componentes textuais
Prof. Pedro Clarindo da Silva Neto
Do tipo palavra-chave quando expresso por
uma string predefinida nas especificações.
p {
color: red;
background-color: acqua;
border-color: teal;
}
Tipos de Componentes de
Regra CSS

14. Prof. Pedro Clarindo da Silva Neto
Tipos de Componentes de
Regra CSS

15. Componentes textuais
Prof. Pedro Clarindo da Silva Neto
Outros exemplos de componentes textuais:
inherit: define uma propriedade herdada;
collapse: bordas de células de tabelas unidas;
italic: fonte em itálico;
uppercase: define texto em CAIXA ALTA.
Tipos de Componentes de
Regra CSS

16. Strings
Prof. Pedro Clarindo da Silva Neto
Devem ser grafados com aspas simples(‘) ou
duplas(“). Uma não pode ocorrer dentro de outra, a
menos que seja escapada com uma barra invertida ().
“Esta é uma ‘string’.”
‘ Esta é uma “string”.’
“Esta é uma ” string”.”
Tipos de Componentes de
Regra CSS

17. Componentes Numéricos
Prof. Pedro Clarindo da Silva Neto
Um componente é do tipo numérico quando
expresso por um número inteiro, um número
real ou em porcentagem.
<integer> - inteiro
<number> - reais
<percentage> - porcentagem
Tipos de Componentes de
Regra CSS

18. Definição
Prof. Pedro Clarindo da Silva Neto
São utilizados para "encontrar" (ou selecionar)
elementos HTML com base em seu nome de
elemento, id, classe, atributo, e muito mais.
Seletores

19. Seletor de elemento
Prof. Pedro Clarindo da Silva Neto
O seletor de elemento seleciona elementos com base no nome do elemento.
Você pode selecionar todos os elementos <p> em uma página como esta
(neste caso, todos os elementos <p> será o centro-alinhados, com uma cor
de texto vermelho):
p {
text-align: center;
color: red;
}
Seletores

20. Seletor id
Prof. Pedro Clarindo da Silva Neto
O seletor id usa o atributo id de um elemento HTML para selecionar um elemento
específico.
O id de um elemento deve ser único dentro de uma página, para que o seletor id seja
usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escreva o caracter “#”, seguido
da identificação do elemento.
#para1 {
text-align: center;
color: red;
}
Seletores

21. Seletor class
Prof. Pedro Clarindo da Silva Neto
O seletor de classe seleciona elementos com um atributo de classe
específico.
Para selecionar elementos com uma classe específica, escreva o
caractere “ .” , seguido do nome da classe.
.center {
text-align: center;
color: red;
}
Seletores

22. Seletor class
Prof. Pedro Clarindo da Silva Neto
Você também pode especificar que elementos HTML específicos
deverão ser afetados por uma classe.
p.centralizado {
text-align: center;
color: red;
}
Seletores

23. CSS
Prof. Pedro Clarindo da Silva Neto
•Folha de estilo externa;
•Folha de estilo interna;
•Estilo em linha.
Maneiras de Inserir uma
CSS

24. Folha de estilo externa
Prof. Pedro Clarindo da Silva Neto
Com uma folha de estilo externa, você pode alterar a
aparência de um site inteiro, alterando apenas um arquivo!
Cada página deve incluir uma referência para o arquivo de
folha de estilo externa no interior do elemento <link>.
Maneiras de Inserir uma
CSS

25. Folha de estilo interna
Prof. Pedro Clarindo da Silva Neto
Uma folha de estilo interna pode ser usado se uma
página tem um estilo único.
Maneiras de Inserir uma
CSS

26. Estilos inline
Prof. Pedro Clarindo da Silva Neto
Um estilo inline pode ser usado para aplicar um
modelo exclusivo de um único elemento.
Maneiras de Inserir uma
CSS

27. Quem prevalece?
Prof. Pedro Clarindo da Silva Neto
Se algumas propriedades forem definidas para o mesmo
seletor (elemento) em folhas de estilo diferentes, o valor
da última folha de estilo de leitura será usado.
Várias folhas de estilo

28. Ordem de cascateamento
Prof. Pedro Clarindo da Silva Neto
Várias folhas de estilo
Maior prioridade!
Um estilo inline (dentro de um elemento HTML específico) tem a prioridade
mais alta, o que significa que ele irá substituir um estilo definido dentro da
tag <head>, ou em uma folha de estilo externa, ou um valor padrão do
navegador.

29. Ordem de cascateamento
Prof. Pedro Clarindo da Silva Neto
Várias folhas de estilo
Um estilo inline (dentro de um elemento HTML específico)
tem a prioridade mais alta, o que significa que ele irá
substituir um estilo definido dentro da tag <head>, ou em uma
folha de estilo externa, ou um valor padrão do navegador.

30. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
Todos os elementos da HTML podem ser
considerados como caixas. Em CSS, o termo
“box model" é usado quando se fala de design e
layout.
BOX MODEL

31. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
O modelo de caixa CSS é essencialmente uma
caixa que envolve todos os elementos HTML. É
constituída por: margens, bordas, preenchimento
e conteúdo.
Box Model

32. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model

33. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Content: O conteúdo da caixa, onde texto e imagens aparecem;
Padding: Limpa uma área em torno do conteúdo. O
preenchimento é transparente;
Border: A fronteira que gira em torno do preenchimento e
conteúdo;
Margin: Limpa uma área fora da fronteira. A margem é
transparente.
Box Model

34. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model