06 Criação e formatação de páginas web com CSS

Prévia do material em texto

Criação e formatação de páginas 
web com CSS
Apresentação
As folhas de estilo em cascata (CSS – Cascading Style Sheets) mudam a forma de organização das 
páginas. O HTML passa a ser utilizado somente como elemento para estruturar as páginas, e o CSS 
é utilizado na formatação da aparência destas. Com o CSS, é possível definir em um único local a 
formatação que será utilizada por cada TAG. Com isso, apenas um arquivo é alterado, sendo que a 
mudança é automaticamente propagada a todas as páginas que compõem o site. 
Nesta Unidade de Aprendizagem, você conhecerá as principais características do processo de 
formatação da páginas HTML com o CSS.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Reconhecer o papel do CSS na confecção de páginas web.•
Explicar as regras de definição de estilos CSS.•
Descrever a estilização de páginas web com HTML e CSS.•
Desafio
Leonardo é aluno da disciplina de Ferramentas de Desenvolvimento Web e está fazendo uma 
avaliação final do semestre. A quinta e última questão traz o seguinte contexto:
Você é um desenvolvedor de sites e precisa definir qual o tipo de seletor de CSS é usado para a 
formatação dos códigos HTML. Lembre-se que, na página a ser criada, várias formatações serão 
iguais em vários blocos, com códigos idênticos sendo reutilizados. Justifique o motivo da escolha da 
regra.
Infográfico
Neste Infográfico, é mostrada a diferença entre uma página em HTML e uma com os recursos da 
CSS somados ao HTML.
Conteúdo do Livro
A criação e formatação de páginas web é um aspecto fundamental do desenvolvimento moderno, 
permitindo a construção de sites visualmente atraentes e funcionais. Através do uso de HTML para 
estruturar o conteúdo e CSS para definir a apresentação, os desenvolvedores podem criar 
experiências de usuário ricas e interativas. CSS, ou Cascading Style Sheets, desempenha um papel 
crucial nesse processo, possibilitando a separação entre conteúdo e estilo, o que facilita a 
manutenção e atualização de sites.
Com o avanço das tecnologias web, o domínio de CSS tornou-se essencial para qualquer 
profissional da área. As capacidades do CSS vão além da simples aplicação de estilos; ele permite a 
criação de layouts responsivos que se adaptam a diferentes dispositivos, garantindo uma 
experiência consistente e acessível para todos os usuários. Além disso, o uso de CSS melhora 
significativamente o desempenho e a eficiência na gestão de estilos, especialmente em projetos 
maiores e mais complexos.
Neste capítulo, você explorará como o CSS é utilizado para estilizar páginas web de maneira 
eficiente e profissional. Aprenderá sobre a sintaxe e as regras de definição de estilos, e verá como 
aplicar esses conhecimentos na prática para criar sites responsivos e visualmente agradáveis. Este é 
um passo fundamental para qualquer desenvolvedor que deseja dominar a arte de construir páginas 
web modernas e funcionais.
FERRAMENTAS DE 
DESENVOLVIMENTO 
WEB
OBJETIVOS DE APRENDIZAGEM
> Reconhecer o papel do CSS na confecção de páginas web.
> Explicar as regras de definição de estilos CSS.
> Descrever a estilização de páginas web com HTML e CSS.
Introdução
A criação e a formatação de páginas web com a linguagem de estilo Cascading 
Style Sheets (CSS) são práticas fundamentais do desenvolvimento web moderno. A 
linguagem CSS permite separar a estrutura do conteúdo, definida pela linguagem 
HTML (HyperText Markup Language), da apresentação visual das páginas web. Com 
CSS, os desenvolvedores podem criar layouts atraentes, aplicar estilos consistentes 
em múltiplas páginas e melhorar significativamente a experiência do usuário. A 
utilização adequada de CSS é essencial para a criação de sites profissionais e 
funcionais.
O CSS oferece um poderoso conjunto de ferramentas para controlar a aparência 
de elementos HTML; isso inclui definir cores, fontes, espaçamentos, posiciona-
mentos e muitos outros aspectos. A flexibilidade proporcionada pelo CSS permite 
que os desenvolvedores adaptem rapidamente a aparência de uma página web 
sem a necessidade de alterar o HTML subjacente.
Criação e 
formatação de 
páginas web com CSS
Matheus da Silva Serpa
Neste capítulo, você vai ver desde os conceitos básicos do CSS até a apli-
cação prática de regras de estilo para criar páginas web bem formatadas e 
responsivas. Você vai compreender o papel do CSS na confecção de páginas 
web, vai conhecer as regras de definição de estilos e vai ver como aplicar HTML 
e CSS juntos para estilizar páginas web de forma eficiente.
A importância do CSS na criação de páginas 
web
O recurso Cascading Style Sheets (CSS) consiste em uma linguagem de estilo 
utilizada para descrever a apresentação de um documento escrito em HTML 
ou XML. A principal função do CSS é permitir a separação entre o conteúdo e 
a apresentação, o que facilita a manutenção e o desenvolvimento de páginas 
web (Bertagnolli; Miletto, 2014).
Um dos principais benefícios do uso do CSS é a capacidade de aplicar 
estilos de maneira consistente em várias páginas. Existem três formas prin-
cipais de aplicar CSS em um documento HTML: inline, interna e externa. O 
CSS inline é aplicado diretamente nos elementos HTML utilizando o atributo 
. Embora seja útil para alterações rápidas, não é recomendado para 
grandes projetos, pois dificulta a manutenção e a consistência (Bertagnolli; 
Miletto, 2014). 
Com o uso do CSS inline, um parágrafo pode ser estilizado da seguinte 
forma:
Texto em destaque
Nesse exemplo, a cor do texto é definida como vermelha (color: red;), e 
o texto é configurado como negrito (font-weight: bold;). Veja como ficaria 
o resultado:
Já o CSS interno é definido dentro da tag no cabeçalho do do-
cumento HTML, sendo útil para páginas únicas, em que o estilo não precisa 
ser reutilizado (Bertagnolli; Miletto, 2014).
Criação e formatação de páginas web com CSS2
Vejamos uma forma de aplicação do CSS interno:
 
 Exemplo de CSS Interno
 
 p {
 color: red;
 font-weight: bold;
 }
 
 Exemplo
 CSS
 Interno
Aqui, todos os parágrafos (p) na página terão o texto na cor azul (color: 
blue;) e em negrito (font-weight: bold;). Esse método é útil para pequenos 
projetos ou páginas únicas em que a manutenção e a consistência são menos 
preocupantes. Veja como ficaria o resultado:
Criação e formatação de páginas web com CSS 3
Por fim, o CSS externo é colocado em um arquivo separado com extensão 
.css e vinculado ao documento HTML por meio da tag (Bertagnolli; 
Miletto, 2014).
O método CSS externo é altamente recomendado para projetos 
maiores, pois facilita a manutenção e garante a consistência entre 
várias páginas. Vejamos um exemplo dessa aplicação:
index.html
 
 Exemplo de CSS Externo
 
 Utilizando
 CSS
 Externo
styles.css
p {
 color: green;
 font-weight: bold;
}
Criação e formatação de páginas web com CSS4
Nesse caso, o arquivo styles.css contém todas as regras de estilo e é 
vinculado ao documento HTML, permitindo que todos os estilos definidos no 
arquivo CSS sejam aplicados à página. Veja como ficaria o resultado:
O uso de CSS externo é particularmente vantajoso porque qualquer alte-
ração no arquivo CSS é automaticamente refletida em todas as páginas que 
o utilizam. Isso não apenas economiza tempo, mas também assegura uma 
aparência uniforme e profissional em todo o site. Por exemplo, se uma orga-
nização decide alterar a cor do seu logotipo e deseja refletir essa mudança 
em todas as páginas do site, pode fazê-lo simplesmente editandoum único 
arquivo CSS (Bertagnolli; Miletto, 2014).
Além disso, o CSS oferece uma ampla gama de possibilidades para criar 
layouts responsivos, que se adaptam a diferentes tamanhos de tela e dispo-
sitivos. Por meio de media queries, os desenvolvedores podem especificar 
diferentes estilos para diferentes condições, como largura da tela, permitindo 
que o site seja acessível e utilizável em smartphones, tablets e desktops 
(Alves, 2021). Essa flexibilidade é essencial no desenvolvimento moderno, 
em que os usuários acessam sites a partir de uma variedade de dispositivos 
com diferentes tamanhos de tela e resoluções.
O Quadro 1 destaca como os diferentes tipos de CSS impactam a ma-
nutenção, a consistência, o tempo de carregamento e a organização do 
código de um site.
Criação e formatação de páginas web com CSS 5
Quadro 1. Tipos de CSS
Característica CSS externo CSS interno CSS inline
Manutenção
Fácil – uma 
mudança reflete 
em todas
Moderada 
– mudanças 
refletem na 
página atual
Difícil – mudanças 
devem ser feitas 
em cada elemento
Consistência
Alta – estilos 
aplicados 
uniformemente
Moderada – 
aplicável apenas à 
página atual
Baixa – propenso 
a inconsistências
Tempo de 
carregamento
Melhor – pode ser 
cacheado pelo 
navegador
Médio – carrega 
os estilos junto 
com o documento
Pior – cada 
elemento carrega 
seus próprios 
estilos
Organização 
do código
Alta – separação 
clara entre 
conteúdo e estilo
Média – mistura 
conteúdo e estilo 
no mesmo arquivo
Baixa – conteúdo 
e estilo 
misturados
O CSS externo simplifica a manutenção do site, pois alterações em estilos 
são feitas em um único arquivo, propagando-se automaticamente por todas 
as páginas que o utilizam. Isso evita a repetição de código e reduz a chance 
de erros. A consistência é garantida porque todos os estilos são definidos 
centralmente, o que é difícil de manter com estilos inline ou internos. Além 
disso, os arquivos CSS externos podem ser cacheados pelo navegador, me-
lhorando o tempo de carregamento das páginas subsequentes. Em contraste, 
os estilos inline ou internos exigem que cada página carregue seus próprios 
estilos, aumentando o tempo de carregamento e dificultando a manutenção.
A utilização de CSS permite a criação de layouts sofisticados e res-
ponsivos. Media queries são funcionalidades do CSS que permitem 
aplicar estilos específicos com base em características do dispositivo, como 
largura, altura da tela, resolução, orientação e mais (W3C, 2012). Elas são fun-
damentais para desenvolver designs que se adaptam a diferentes tamanhos de 
tela, proporcionando uma experiência de usuário consistente em dispositivos 
móveis, tablets e desktops. Por exemplo, você pode definir diferentes estilos 
para uma página quando visualizada em um smartphone versus um monitor de 
desktop, garantindo que o conteúdo permaneça acessível e legível em qualquer 
dispositivo.
Criação e formatação de páginas web com CSS6
Vejamos como as media queries podem ser utilizadas para adaptar o design 
de uma página a diferentes tamanhos de tela. No código CSS a seguir, usamos 
uma media query para aplicar estilos específicos quando a largura da tela é igual 
ou inferior a 600 pixels, ajustando o fundo da página e o tamanho do texto do 
título para melhorar a legibilidade em dispositivos menores. 
styles.css
/* Estilos gerais */
body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
}
h1 {
 color: #333;
 text-align: center;
}
p {
 color: #666;
 line-height: 1.6;
}
/* Estilos específicos para telas menores que 600px */
@media (max-width: 600px) {
 body {
Criação e formatação de páginas web com CSS 7
 background-color: lightblue;
 }
 h1 {
 font-size: 20px;
 }
}
Index.html
 
 Exemplo de Media Queries
 
 Bem-vindo ao Desenvolvimento Web com CSS
 Esta é uma página de exemplo utilizando media que-
ries para criar um design responsivo.
Veja o resultado:
Criação e formatação de páginas web com CSS8
No arquivo styles.css, os estilos gerais são definidos para o corpo da 
página, os títulos de nível 1 e os parágrafos. Para o elemento body, a fonte 
é definida como Arial, uma cor de fundo cinza-claro é aplicada, e as margens 
e os preenchimentos são removidos para criar um layout limpo. Os títulos de 
nível 1 (h1) têm a cor definida como cinza-escuro e são centralizados na página, 
enquanto os parágrafos (p) têm a cor do texto definida como cinza-médio e uma 
altura de linha aumentada para melhorar a legibilidade. Além disso, uma media 
query é utilizada para aplicar estilos específicos a dispositivos com largura de 
tela igual ou inferior a 600 pixels. Nesses dispositivos, a cor de fundo do corpo 
muda para azul-claro, e o tamanho do texto dos títulos é reduzido para 20 pixels, 
ajustando o design para telas menores.
No arquivo index.html, o documento HTML faz referência ao arquivo CSS 
externo por meio da tag , permitindo que os estilos definidos em sty-
les.css sejam aplicados à página. O documento HTML define os metadados, 
incluindo a codificação de caracteres e o título da página, e inclui um título de 
nível 1 e um parágrafo, que serão estilizados conforme as regras definidas no 
arquivo CSS. Essa estrutura demonstra como utilizar HTML em conjunto com 
CSS e media queries para criar um design responsivo, adaptando a aparência 
da página para diferentes dispositivos e tamanhos de tela.
O CSS é fundamental para a criação de páginas web modernas e profissio-
nais. Ele permite que os desenvolvedores separem o conteúdo da apresenta-
ção, facilitando a manutenção e a atualização de estilos. Utilizando arquivos 
CSS externos, é possível aplicar mudanças de maneira consistente em todas 
as páginas de um site, economizando tempo e garantindo uniformidade. Além 
disso, com o uso de media queries, podemos criar layouts que se adaptam a 
diferentes dispositivos, proporcionando uma melhor experiência de navegação 
para os usuários.
Dominar o CSS é essencial para qualquer desenvolvedor web que deseja 
criar sites eficientes, responsivos e esteticamente agradáveis. Assim, a seguir, 
vamos conhecer as principais regras de estilo CSS.
Compreendendo as regras de estilo CSS
A linguagem CSS utiliza uma sintaxe específica para definir estilos, composta 
por seletores e blocos de declaração. Os seletores indicam quais elementos 
HTML devem ser estilizados, enquanto os blocos de declaração contêm as 
propriedades e os valores que definem os estilos (Alves, 2015). Compreender 
essa estrutura é essencial para aplicar corretamente os estilos e obter os 
resultados desejados no design das páginas web.
A estrutura básica de uma regra CSS é simples e direta, facilitando a 
aprendizagem e a aplicação. Cada regra CSS começa com um seletor que define 
Criação e formatação de páginas web com CSS 9
quais elementos HTML serão afetados pelo estilo. Em seguida, vem um bloco 
de declaração entre chaves {}, que contém uma ou mais declarações. Cada 
declaração consiste em uma propriedade CSS, seguida por dois pontos :, 
e um valor para essa propriedade, terminando com ponto e vírgula ;. A sintaxe 
básica do CSS é seletor { propriedade: valor; } (Alves, 2015).
O exemplo a seguir inclui um layout de cabeçalho, navegação e 
rodapé, estilizados por meio de um arquivo styles.css externo.
styles.css
/* Estilos gerais */
body {
 font-family: Arial, sans-serif;
 background-color: #f8f9fa;
 margin: 0;
 padding: 0;
}
header {
 background-color: #007bff;
 color: white;
 padding: 10px 0;
 text-align: center;
}
nav {
 display: flex;
 justify-content: center;
Criação e formatação de páginas web com CSS10
 background-color: #343a40;
}
nav a {
 color: white;
 padding: 14px 20px;
 text-decoration:none;
 text-align: center;
}
nav a:hover {
 background-color: #007bff;
}
main {
 padding: 20px;
}
footer {
 background-color: #343a40;
 color: white;
 text-align: center;
 padding: 10px 0;
 position: fixed;
 width: 100%;
Criação e formatação de páginas web com CSS 11
 bottom: 0;
}
index.html
 
 Exemplo de Layout com CSS
 
 
 Meu Site com Layout CSS
 
 
 Home
 Sobre
 Serviços
 Contato
 
 
 Bem-vindo!
 Esta é uma página de exemplo utilizando um layout 
CSS com cabeçalho, navegação e rodapé.
Criação e formatação de páginas web com CSS12
 
 
 © 2024 Meu Site
 
Veja o resultado:
No arquivo styles.css, começamos definindo estilos gerais para o corpo 
da página (body), como fonte, cor de fundo, margens e preenchimento. Em 
seguida, estilizamos o cabeçalho (header), atribuindo uma cor de fundo azul, 
uma cor do texto branca e um espaçamento de 10 pixels ao redor, com o texto 
centralizado.
A navegação (nav) é estilizada para exibir os links horizontalmente, cen-
tralizando-os com display: flex e justify-content: center. Os links 
dentro da navegação (nav a) são estilizados com uma cor de texto branca, um 
preenchimento, para criar espaçamento ao redor do texto, e sem sublinhado. 
Adicionalmente, ao passar o mouse sobre os links (nav a:hover), a cor de 
fundo muda para azul, para indicar a interação.
O main define um espaçamento de 20 pixels ao redor do conteúdo princi-
pal. O rodapé (footer) é estilizado com cor de fundo escura, texto branco e 
centralização do texto e está fixado na parte inferior da página com o uso de 
position: fixed e bottom: 0.
No arquivo index.html, o HTML estrutura a página com um cabeçalho, 
uma barra de navegação, uma seção principal (main) e um rodapé. Cada parte 
do HTML é estilizada conforme as regras definidas no styles.css, criando 
um layout coeso e bem-organizado. Essa abordagem demonstra como utilizar 
arquivos CSS externos para estilizar de forma eficiente e consistente um layout 
de página web completo.
Criação e formatação de páginas web com CSS 13
Existem vários tipos de seletores em CSS, incluindo seletores de elemento 
(tag), classe, ID, atributos, pseudoclasses, pseudo-elementos e o seletor 
universal. Cada tipo de seletor oferece diferentes níveis de especificidade 
e flexibilidade para estilizar elementos HTML (Alves, 2015), conforme será 
descrito a seguir.
Seletor de elemento (tag)
O seletor de elemento seleciona todos os elementos do tipo especificado. 
Por exemplo, o seletor p aplica estilos a todos os parágrafos (Alves, 2015):
styles.css
p {
 color: blue;
 font-size: 14px;
}
index.html
 
 Exemplo de Seletor de Elemento
 
 Este é um parágrafo estilizado.
 Outro parágrafo estilizado.
Criação e formatação de páginas web com CSS14
Nesse exemplo, o seletor de elemento p aplica estilos a todos os elementos 
, definindo a cor do texto como azul e o tamanho da fonte como 14 pixels.
Seletor de classe
O seletor de classe utiliza o caractere ponto (.) seguido do nome da classe. 
Pode ser aplicado a múltiplos elementos (Alves, 2015). Neste exemplo, todos os 
elementos com a classe destaque terão o texto na cor vermelha e em negrito:
styles.css
.destaque {
 color: red;
 font-weight: bold;
}
index.html
 
 Exemplo de Seletor de Classe
 
 Texto em destaque
 Texto normal
Criação e formatação de páginas web com CSS 15
Assim, o seletor de classe .destaque estiliza todos os elementos 
com a classe destaque, aplicando a cor vermelha e o peso de fonte negrito.
Seletor de ID
O seletor de ID utiliza o caractere cerquilha (#) seguido do nome do ID. Deve 
ser único por documento (Alves, 2015). Aqui, o elemento com o ID principal 
terá um fundo cinza-claro e um preenchimento de 10 pixels:
styles.css
#principal {
 background-color: #ccc;
 padding: 10px;
}
index.html
 
 Exemplo de Seletor de ID
 
 Conteúdo principal
 Outro conteúdo
Nesse exemplo, o seletor de ID #principal aplica estilos ao elemento 
 com o ID principal, definindo a cor de fundo e o preenchimento.
Criação e formatação de páginas web com CSS16
Seletor de atributo
O seletor de atributo seleciona todos os elementos com o atributo especi-
ficado (Alves, 2015). Por exemplo, [type="text"] aplica estilos a todos os 
campos de texto:
styles.css
input[type="text"] {
 border: 1px solid #000;
 padding: 5px;
}
index.html
 
 Exemplo de Seletor de Atributo
 
 
 
Nesse exemplo, o seletor de atributo input[type="text"] aplica estilos 
a todos os elementos com o atributo type="text", definindo a 
borda e o preenchimento.
Criação e formatação de páginas web com CSS 17
Seletor de pseudoclasse
O seletor de pseudoclasse seleciona elementos com base em um estado 
específico (Alves, 2015). Por exemplo, :hover aplica estilos a um elemento 
quando o mouse está sobre ele:
styles.css
a:hover {
 color: green;
}
index.html
 
 Exemplo de Seletor de Pseudo-classe
 
 Passe o mouse aqui
Nesse exemplo, o seletor de pseudo-classe a:hover aplica estilos a 
todos os elementos quando o mouse está sobre eles, mudando a cor 
do texto para verde.
Seletor de pseudo-elemento
O seletor de pseudo-elemento seleciona uma parte específica do elemento 
(Alves, 2015). Por exemplo, ::before pode ser usado para inserir conteúdo 
antes do conteúdo de um elemento:
Criação e formatação de páginas web com CSS18
styles.css
p::before {
 content: "Nota: ";
 font-weight: bold;
}
index.html
 
 Exemplo de Seletor de Pseudo-elemento
 
 Este é um parágrafo com pseudo-elemento.
Nesse exemplo, o seletor de pseudo-elemento p::before aplica estilos 
a todos os elementos , inserindo o texto "Nota:" antes do conteúdo do 
parágrafo e aplicando negrito.
Seletor universal (*)
O seletor universal * aplica estilos a todos os elementos da página. É útil 
para definir estilos globais ou redefinir margens e preenchimentos-padrão 
(Alves, 2015).
styles.css
* {
Criação e formatação de páginas web com CSS 19
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
index.html
 
 Exemplo de Seletor Universal
 
 Seletor Universal
 Este exemplo aplica estilos a todos oselementos da 
página.
Para facilitar a compreensão, o Quadro 2 apresenta uma visão geral dos 
principais tipos de seletores CSS e suas sintaxes:
Criação e formatação de páginas web com CSS20
Quadro 2. Tipos de seletores CSS
Tipo de seletor Sintaxe Descrição
Elemento elemento Seleciona todos os elementos 
do tipo especificado.
Classe .classe Seleciona todos os 
elementos com a classe 
especificada.
ID #id Seleciona o elemento com o 
ID especificado.
Atributo [atributo] Seleciona todos os 
elementos com o atributo 
especificado.
Pseudo-classe :pseudo-classe Seleciona elementos 
com base em um estado 
específico.
Pseudo-elemento ::pseudo-elemento Seleciona uma parte 
específica do elemento.
Universal * Seleciona todos os 
elementos.
As regras de CSS são aplicadas em cascata, em que as declarações mais 
específicas sobrescrevem as menos específicas. A ordem das regras no CSS 
também é importante: as últimas declarações aplicadas a um elemento têm 
precedência, o que é conhecido como "cascata" em CSS (Alves, 2015).
A especificidade é determinada pela combinação de seletores utilizados. 
Por exemplo, um seletor de ID (#id) tem maior especificidade do que um 
seletor de classe (.classe), e um seletor de classe tem maior especificidade 
do que um seletor de elemento (elemento). Quando dois estilos conflitantes 
são aplicados ao mesmo elemento, o estilo com maior especificidade será 
aplicado (Alves, 2015).
Compreender as regras de estilo CSS é essencial para qualquer desen-
volvedor web. A sintaxe do CSS permite definir claramente quais elementos 
serão estilizados e como esses estilos serão aplicados. Conhecer os diferentes 
tipos de seletores e como eles influenciam a especificidade e a cascata das 
regras é fundamental para criar estilos eficientes e evitar conflitos. Dominar 
Criação e formatação de páginas web com CSS 21
esses conceitos permite aos desenvolvedores criar páginas web esteticamente 
agradáveis, funcionais e bem organizadas. A seguir, vamos explorar mais um 
pouco a aplicação prática do CSS para estilizar páginas web.
Aplicando CSS para estilizar páginas web
A combinação de HTML e CSS é essencial para criar páginas web bem es-
truturadas e visualmente atraentes. O HTML fornece a estrutura básica do 
conteúdo, enquanto o CSS é utilizado para definir a apresentação visual, 
adicionando estilos, cores, fontes e layouts que melhoram a experiência do 
usuário (Bertagnolli; Miletto, 2014).
Uma maneira de aplicar CSS é incorporando-o diretamente dentro do 
documento HTML. Isso pode ser feito utilizando a tag no cabeçalho 
() do documento. Embora essa abordagem seja útil para pequenos 
projetos ou páginas web simples, em projetos maiores, é recomendável utilizar 
arquivos CSS externos para melhor organização e manutenção (Harold, 2010).
Vejamos um exemplo de aplicação do CSS incorporado para estili-
zação de uma página web:
 
 Exemplo de HTML com CSS Incorporado
 
 body {
 font-family: Arial, sans-serif;
 background-color: #ffffe0; /* Fundo amarelo 
claro */
 margin: 0;
 padding: 20px;
Criação e formatação de páginas web com CSS22
 }
 h1 {
 color: #00008b; /* Cor do texto do título: azul 
escuro */
 text-align: left; /* Alinhamento do texto do 
título: à esquerda */
 }
 p {
 color: #8b0000; /* Cor do texto dos parágrafos: 
vermelho escuro */
 line-height: 1.8; /* Altura da linha aumentada 
para 1.8 */
 font-size: 16px; /* Tamanho da fonte dos pa-
rágrafos */
 }
 
 Bem-vindo ao Desenvolvimento Web com CSS
 Esta é uma página de exemplo utilizando HTML e CSS 
incorporado.
Veja o resultado:
Criação e formatação de páginas web com CSS 23
Vamos detalhar cada linha do exemplo apresentado:
 � : declara o tipo de documento como HTML5, ajudando o 
navegador a renderizar a página corretamente.
 � : inicia o documento HTML e define o idioma do 
conteúdo como português do Brasil, o que é importante para a acessibili-
dade e a otimização para motores de busca (SEO, do inglês search engine 
optimization).
 � : contém metadados sobre o documento, como a codificação de 
caracteres e o título da página.
 � : define a codificação de caracteres como UTF-
8, suportando a maioria dos caracteres escritos.
 � Exemplo de HTML com CSS Incorporado: define 
o título da página que aparece na aba do navegador.
 � : contém o CSS incorporado que estiliza a página.
 � body: este seletor aplica estilos ao elemento , que é o contêiner 
principal de todo o conteúdo de uma página HTML.
 � font-family: Arial, sans-serif;: define a fonte do texto como Arial, 
ou uma fonte sans-serif similar, se Arial não estiver disponível.
 � background-color: #ffffe0;: define a cor de fundo do corpo da página 
como amarelo-claro.
 � margin: 0;: remove todas as margens-padrão ao redor do corpo.
 � padding: 20px;: adiciona um preenchimento de 20 pixels dentro do corpo.
 � h1: este seletor estiliza todos os títulos de nível 1 na página.
 � color: #00008b;: define a cor do texto do título como azul-escuro.
 � text-align: left;: alinha o texto do título à esquerda.
 � p: este seletor define estilos para todos os parágrafos na página.
 � color: #8b0000;: define a cor do texto dos parágrafos como vermelho-escuro.
 � line-height: 1.8;: define a altura da linha, melhorando a legibilidade 
do texto.
 � font-size: 16px;: define o tamanho da fonte dos parágrafos.
 � : abrange o conteúdo visível da página.
 � Bem-vindo ao Desenvolvimento Web com CSS: cria um 
título de nível 1.
 � Esta é uma página de exemplo utilizando HTML e CSS 
incorporado.: cria um parágrafo.
Como vimos, uma das capacidades mais poderosas do CSS é a criação 
de layouts responsivos com o uso de media queries, que permitem aplicar 
estilos específicos com base nas características do dispositivo de visuali-
Criação e formatação de páginas web com CSS24
zação, como largura da tela, resolução ou orientação. A seguir, acompanhe 
mais um exemplo.
Vejamos uma forma de aplicação de estilos específicos por meio de 
media queries:
/* Estilos gerais */
body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 
sans-serif;
 background-color: #ffffff;
 margin: 0;
 padding: 0;
}
header {
 background-color: #283593;
 color: #ffffff;
 padding: 15px;
 text-align: center;
}
nav {
 background-color: #3f51b5;
 color: #ffffff;
 padding: 10px;
 text-align: center;
Criação e formatação de páginas web com CSS 25
}
main {
 padding: 20px;
 text-align: left;
}
footer {
 background-color: #283593;
 color: #ffffff;
 text-align: center;
 padding: 10px;
}
/* Estilos específicos para telas menores que 768px */
@media (max-width: 768px) {
 header {
 font-size: 18px;
 }
 nav {
 font-size: 16px;
 }
 main {
 padding: 10px;
 }
Criação e formatação de páginas web com CSS26
 footer {
 font-size: 14px;
 }
}
O CSS define os estilos gerais para o corpo, o cabeçalho, a navegação, o 
conteúdo principal e o rodapé da página. O body tem um fundo branco e usa a 
fonte 'Segoe UI'. O header e o footer têm um fundo azul-escuro (#283593) 
e texto branco, enquanto o nav tem um fundo azul mais claro (#3f51b5). 
O recurso media query aplica estilos específicos quando a largura da tela é 
igual ou inferior a 768 pixels. Nesse caso, os tamanhos de fonte do header, do 
nav e do footer são reduzidos para melhorar a legibilidade em telas menores, 
e o padding do main é reduzido, para otimizar o espaço.
O Quadro 3 a seguir apresenta um exemplo de como as propriedadesCSS 
podem ser aplicadas para estilizar diferentes elementos de uma página web. 
Quadro 3. Exemplo de estilização com CSS
Elemento Propriedade Valor
body background-color #f0f0f0
h1 color #333
p color #666
h1 text-align center
p line-height 1.6
No Quadro 3, temos os seguintes elementos:
 � body: background-color: #f0f0f0;: define a cor de fundo do 
corpo da página como um cinza-claro. 
 � h1: color: #333;: define a cor do texto dos títulos de nível 1 como 
cinza-escuro.
 � text-align: center;: centraliza o texto dos títulos de nível 1.
 � p: color: #666;: define a cor do texto dos parágrafos como 
cinza-médio.
 � line-height: 1.6;: define a altura da linha dos parágrafos, melho-
rando a legibilidade.
Criação e formatação de páginas web com CSS 27
Vejamos um exemplo prático que combina HTML e CSS externo para 
criar uma página web estilizada. Nesse exemplo, o arquivo HTML inclui 
um link para um arquivo CSS externo chamado styles.css, que contém todas 
as regras de estilo. Isso demonstra uma prática recomendada para projetos 
maiores, em que a separação de conteúdo e apresentação facilita a manutenção 
e a escalabilidade do código.
styles.css
/* Estilos gerais */
body {
 font-family: 'Verdana', sans-serif;
 background-color: #e0e0e0;
 margin: 0;
 padding: 20px;
 color: #333;
}
header {
 background-color: #4CAF50;
 color: white;
 padding: 10px 0;
 text-align: center;
}
nav {
 background-color: #333;
Criação e formatação de páginas web com CSS28
 overflow: hidden;
}
nav a {
 float: left;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
nav a:hover {
 background-color: #ddd;
 color: black;
}
section {
 margin: 20px 0;
 padding: 20px;
 background-color: white;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Criação e formatação de páginas web com CSS 29
footer {
 background-color: #333;
 color: white;
 text-align: center;
 padding: 10px 0;
 position: fixed;
 bottom: 0;
 width: 100%;
}
index.html
 
 Exemplo de HTML com CSS Externo
 
 
 Meu Website com CSS Externo
 
 
Criação e formatação de páginas web com CSS30
 Home
 Serviços
 Contato
 
 
 Bem-vindo ao nosso site
 Esta é uma página de exemplo utilizando CSS 
externo para criar um layout visualmente atraente.
 
 
 Nossos Serviços
 Oferecemos uma variedade de serviços para atender 
suas necessidades.
 
 
 Contato
 Entre em contato conosco para mais informações.
 
 
 © 2024 Meu Website. Todos os direitos 
reservados.
 
Criação e formatação de páginas web com CSS 31
Veja como fica o resultado:
Combinar HTML e CSS é um método amplamente empregado para de-
senvolver páginas web profissionais. Utilizando arquivos CSS externos ou 
incorporando CSS no HTML, é possível controlar a apresentação visual do 
conteúdo com precisão. A capacidade de usar media queries para criar layouts 
responsivos garante que as páginas web sejam acessíveis e funcionais em 
uma ampla variedade de dispositivos. Ainda, compreender como utilizar 
seletores, regras e propriedades do CSS permite criar experiências de usu-
ário mais ricas e eficientes, facilitando a manutenção e a escalabilidade 
de projetos web. 
Em síntese, o domínio do CSS, em conjunto com HTML, capacita os desen-
volvedores a produzir páginas web amplamente funcionais e esteticamente 
agradáveis. Porém destaca-se que a aplicação de boas práticas e a utilização 
de ferramentas e frameworks adequados são fundamentais nesse contexto. 
Ao integrar esses conhecimentos e recursos, os desenvolvedores estarão 
mais bem preparados para enfrentar desafios e criar soluções inovadoras 
que atendam às necessidades dinâmicas dos usuários. 
Criação e formatação de páginas web com CSS32
Referências 
ALVES, W. P. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa, 
2021. E-book.
ALVES, W. P. Projetos de sistemas web: conceitos, estruturas, criação de banco de dados 
e ferramentas de desenvolvimento. São Paulo: Érica, 2015.
BERTAGNOLLI, S. C.; MILETTO, E. M. Criação e formatação de páginas Web com HTML/
CSS. In: MILETTO, E. M.; BERTAGNOLLI, S. C. (org.). Desenvolvimento de software II: 
introdução ao desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: 
Bookman, 2014. p. 61-94.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. 
Porto Alegre: Bookman, 2010.
WORLD WIDE WEB CONSORTIUM (W3C). Media queries and ‘view mode’ are W3C re-
commendations. W3C, 2012. Disponível em: https://www.w3.org/news/2012/media-
-queries-and-the-view-mode-media-feature-are-w3c-recommendations/. Acesso 
em: 18 jun. 2024.
Os links para sites da web fornecidos neste capítulo foram todos 
testados, e seu funcionamento foi comprovado no momento da 
publicação do material. No entanto, a rede é extremamente dinâmica; suas 
páginas estão constantemente mudando de local e conteúdo. Assim, os edito-
res declaram não ter qualquer responsabilidade sobre qualidade, precisão ou 
integralidade das informações referidas em tais links.
Criação e formatação de páginas web com CSS 33
Dica do Professor
Assista ao vídeo para conhecer o que é CSS, as regras de estilo, os tipos de seletores e a 
formatação das cores em CSS.
 
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/871a93f1f0d8e8aac397df0edce8cb22
Exercícios
1) De que formas a CSS pode ser definida no HTML?
A) Externa, anexa e linkada.
B) Inline, interna e externa.
C) Inline, offline e externa.
D) Apenas no Head.
E) Apenas dentro da TAG.
2) Como é o "Bloco de declaração" de uma regra de CSS?
A) Seletor="propriedade:valor"
B) Seletor(propriedade=valor;)
C) Seletor[valor:propriedade]
D) Seletor{propriedade:valor;}
E) Nome do seletor{propriedade:valor;}
3) São tipos de seletores de CSS:
A) Classe, subclasse e atributo.
B) TAG, atributo e variável.
C) ID, classe, atributo e pseudoatributo.
D) TAG, sub-TAG, atributo e constante.
E) TAG, ID, classe, pseudoclasse e atributo.
4) 
Que propriedade e valor de um seletor utliza-se para deixar dois elementos "lado a lado" em 
uma página? 
A) margin:left e margin:right
B) align:left e align:right
C) float:left e float:right
D) border:left e border:right
E) padding:left e padding:right
5) O que é um seletor universal e como é representado?
A) Um seletor que formatará apenas um elemento dentro de uma página, representado por um # 
antes do nome.
B) Um seletor que formatará todos os elementos dentro de uma página, representado por um 
asterisco (*).
C) Um seletor que formatará um grupo específico de elementos dentro de uma página, 
representado por um ponto antes do nome.
D) Um seletor que formatará uma TAG específica de uma página, representado pelo nome da 
TAG.
E) Um seletor que formatará um atributo específico de um elemento dentro de uma página, 
representado por colchetes em volta do atributo.
Na prática
A criação de um site é muito importante, pois possibilita que pessoas e organizações se conectem 
com o mundo. A linguagem HTML permite a estruturação da página, e as folhas de estilo em 
cascata (cascading style sheets – CSS) tornam possível a formação das páginas, definindo, por 
exemplo, cores e fontes. No vídeo a seguir, vamos criar uma páginae formatar utilizando a folha de 
estilos em cascata (CSS).
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
 
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/2c3c353fa775bcd45f9a9e8ba8ce48c4
Saiba mais
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Código CSS: entendendo a folha de estilos
Neste artigo vamos ver um pouco sobre o código CSS (Cascating Style Sheet)
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Formatação de Texto com HTML5 e CSS3
Vídeo disponibilizado pelo canal Curso em Vídeo demonstrando de maneira prática algumas 
formatações em HTML5 e CSS3.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.devmedia.com.br/codigo-para-background-html-e-css/37206
https://www.devmedia.com.br/codigo-css-entendendo-a-folha-de-estilos/37459
https://www.youtube.com/embed/oQExPqFT7ec