[UFMS Digital] Fundamentos de Web - Videoaula do Módulo 2 - Unidade 1

Prévia do material em texto

Fundamentos de Web
Prof. Dr. Leonardo Souza Silva
Módulo 2 - Introdução às Folhas de 
Estilo em Cascata
Unidade 1 — Folhas de Estilo em Cascata (CSS)
Folhas de Estilo em Cascata
● Cascading Style Sheets (CSS).
○ Lida com a estética de uma página Web.
■ Pode controlar, por exemplo, cor do texto, estilo das fontes, 
efeitos, espaçamentos, disposição do conteúdo, dentre outros 
fatores.
● Enquanto o HTML define a estrutura do documento, o CSS nos 
permite refinar a apresentação do conteúdo apresentado.
CSS
“Quando tags de dedicadas à estética foram adicionadas à 
especificação do HTML 3.2, iniciou-se um pesadelo para 
desenvolvedores web. O desenvolvimento de grandes sites, 
onde fontes e informações de cores foram adicionados a cada 
página, tornou-se um processo longo e caro.”
Fonte: W3 Schools
HTML + CSS
● Em linha (inline)
● Incorporado
● Linkado ou vinculado 
○ Usando um arquivo externo, do tipo CSS
HTML + CSS 
Em linha
● Uso do atributo 
style em uma 
marcação HTML.
Fonte: Própria
HTML + CSS — Em linha
● Uso do atributo style em uma marcação HTML.
Fonte: Própria
HTML + CSS — Em linha
● Uso do atributo style em uma marcação HTML.
● Essa forma não é recomendada porque mistura a camada de 
conteúdo (HTML), com a camada de estilo (CSS) ou apresentação 
do conteúdo.
● Usado em situações de teste ou pontuais.
HTML + CSS — Em linha
Fonte: Própria
HTML + CSS — Em linha
Fonte: Própria
HTML + CSS 
Incorporado
● Seletores são 
usados para dar 
estilo a página.
● O código CSS é 
inserido entre as 
marcações 
e .
Fonte: Própria
HTML + CSS — Incorporado
Fonte: Própria
HTML + CSS
Incorporado
Fonte: Própria
HTML + CSS — Incorporado
Fonte: Própria
HTML + CSS 
Linkado
● Uso de um arquivo 
externo para o 
código CSS.
● O arquivo com a 
folha de estilos 
pode ser vinculado 
a várias páginas.
Fonte: Própria
HTML + CSS — Linkado
Fonte: Própria
HTML + CSS — Linkado
Fonte: Própria
arquivo.css
pagina.html
HTML + CSS — Linkado
Fonte: Própria
HTML + CSS — Linkado (Regras)
Fonte: Própria
Seletor
Chaves
Atributo (ou Propriedade)
Valor
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
(Algumas) Propriedades — CSS
Fonte: Própria
Tamanho da fonte
Família da fonte
Cor de fundo
Cor 
Borda
Largura
Altura
Seletores
● Padrões usados para selecionar os elementos a serem estilizados.
○ Os mais comuns são: elemento (própria tag), classe e id.
Fonte: W3Schools
SELETOR EXEMPLO DESCRIÇÃO
.class .intro Seleciona todos os elementos com a classe = “intro”
#id #primeironome Seleciona o elemento com o id = “primeironome”
* * Seleciona todos os elementos
elemento p Seleciona todos os elementos 
Seletores
● Padrões usados para selecionar os elementos a serem estilizados.
○ Os mais comuns são: elemento (própria tag), classe e id.
Fonte: W3Schools
SELETOR EXEMPLO DESCRIÇÃO
.class .intro Seleciona todos os elementos com a classe = “intro”
#id #primeironome Seleciona o elemento com o id = “primeironome”
* * Seleciona todos os elementos
elemento p Seleciona todos os elementos 
● Classe (class): pode ser reutilizável para diferentes 
elementos.
Seletores
● Padrões usados para selecionar os elementos a serem estilizados.
○ Os mais comuns são: elemento (própria tag), classe e id.
Fonte: W3Schools
SELETOR EXEMPLO DESCRIÇÃO
.class .intro Seleciona todos os elementos com a classe = “intro”
#id #primeironome Seleciona o elemento com o id = “primeironome”
* * Seleciona todos os elementos
elemento p Seleciona todos os elementos 
●id: Deve ser uma identificação única a ser usada 
para um elemento
HTML + CSS — Seletores — Class
Fonte: Própria
HTML + CSS — Seletores — Id
Fonte: Própria
H
TM
L 
+ 
CS
S 
—
 E
xe
m
pl
o
Fonte: Própria
HTML + CSS — Seletores — Descendência
Fonte: Própria
HTML + CSS — Seletores — Descendência
Fonte: Própria
HTML + CSS — Seletores — Pseudo-classes
● Palavra-chave adicionada aos seletores, especifica um estado 
especial do elemento selecionado. 
○ Exemplo → :hover 
■ Pode ser usado para alterar a cor de um elemento quando o 
usuário passar o cursor sobre ele.
Fonte: Própria
HTML + CSS — Seletores — Pseudo-classes
Fonte: Própria
HTML + CSS — Seletores — Pseudo-classes
Fonte: Própria
Marcação 
● A marcação define uma divisão ou uma seção em um 
documento HTML.
○ Frequentemente usado como bloco para outros elementos 
HTML, permitindo estilizá-los com o CSS ou executar 
determinadas ações com JavaScript.
● Recurso importante:
○ Alterar o estilo em partes do documento, e
○ Posicionar objetos e elementos na página.
H
TM
L 
+ 
CS
S 
- E
xe
m
pl
os
Fonte: Própria
Para finalizar…
● Recomendamos que você pratique e explore o uso do HTML e do 
CSS.
● Busque mais informações sobre:
○ Posicionamento dos elementos, e
○ Uso de layout flexível (Flexbox — Flexible Box).
Nesta aula…
● Entendemos como melhorar a apresentação do conteúdo da nossa 
página.
● Compreendemos o funcionamento das folhas de estilo em cascata 
e como utilizá-las em conjunto com as nossas páginas HTML.
Referências
FLATSCHART, Fábio. Html 5: embarque imediato. 1. ed. Rio de Janeiro: Brasport, 2011. Recurso on-line. ISBN 
9788574525778. Capítulo 1, Capítulo 2 e Capítulo 3. Disponível na Biblioteca Digital da UFMS. 
MAZZA, Lucas. HTML5 e CSS3: domine a web do futuro. São Paulo, SP: Casa do Código, 2014. Recurso 
on-line. ISBN 9788566250909. Capítulo 1 e Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
W3 Schools. HTML Tutorial. Disponível em: https://www.w3schools.com/html/ . Acesso em maio de 2025.
W3 Schools. CSS Tutorial. Disponível em: https://www.w3schools.com/css/ . Acesso em maio de 2025.
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://www.w3schools.com/html/
https://www.w3schools.com/css/
Licenciamento
Respeitadas as formas de citação formal de autores de acordo com as normas 
da ABNT NBR 6023 (2018), a não ser que esteja indicado de outra forma, todo 
material desta apresentação está licenciado sob uma Licença Creative Commons 
- Atribuição 4.0 Internacional. 
https://creativecommons.org/licenses/by/4.0/
https://creativecommons.org/licenses/by/4.0/