CSS: Estilização

Programação/Desenvolvimeto Web Responsivo • Prof. Me. William Tenório

O CSS

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a aparência visual de documentos HTML. Enquanto o HTML define a estrutura do conteúdo, o CSS define como esse conteúdo será apresentado ao usuário.

Com CSS é possível controlar cores, fontes, espaçamentos, tamanhos, alinhamentos, bordas e diversos outros aspectos visuais de uma página web.

O uso do CSS é essencial no desenvolvimento web moderno pois permite:

Página inicial BBC
Figura 1 – Comparação de página web com e sem CSS

A imagem apresenta uma comparação entre uma página web sem CSS e a mesma página utilizando CSS. O objetivo é demonstrar como o CSS altera significativamente a aparência visual de um site.

No lado esquerdo, identificado como “Página Web Sem CSS”, vemos uma página simples e sem formatação visual. O conteúdo aparece apenas com a estrutura padrão do HTML: um título grande, um menu com links (“Home”, “Info”, “Contact” e “About Us”) e um parágrafo com texto. Os elementos estão organizados de forma básica, sem cores, alinhamentos especiais ou elementos gráficos, mostrando como os navegadores exibem o HTML sem estilos adicionais.

No lado direito, identificado como “Página Web Com CSS”, a mesma página aparece estilizada. O layout é mais organizado e visualmente agradável, com cores, espaçamentos, tipografia diferenciada e elementos gráficos. O menu está posicionado no topo da página, o banner possui destaque visual e há caixas de conteúdo organizadas. A presença de uma ilustração e o uso de cores verdes ajudam a tornar a interface mais moderna e atrativa.

Essa comparação ilustra claramente o papel do CSS no desenvolvimento web: enquanto o HTML define a estrutura e o conteúdo da página, o CSS é responsável pela aparência visual, organização do layout e melhoria da experiência do usuário.

Formas de incluir CSS no HTML

Existem três maneiras principais de adicionar CSS a uma página HTML.

1) CSS inline (diretamente no elemento)

O CSS é adicionado diretamente na tag HTML por meio do atributo style. Essa abordagem não é recomendada para projetos maiores, pois dificulta a manutenção. 

<p style="color: red;">Texto em vermelho</p>

2) CSS interno

As regras CSS são colocadas dentro de um elemento <style> no elemento <head> do documento. 

<style>
	p {
	color: blue;
	}
</style>

3) CSS externo (boa prática)

As regras CSS são armazenadas em um arquivo separado, geralmente chamado style.css, e vinculadas ao HTML. 

<link rel="stylesheet" href="style.css">
Essa abordagem é considerada a melhor prática, pois permite reutilizar estilos em várias páginas e manter o código mais organizado.

Regras CSS

No CSS, uma regra define como determinados elementos HTML devem ser exibidos na página. Cada regra é formada por um seletor e um conjunto de propriedades. O seletor indica quais elementos do HTML serão afetados, enquanto as propriedades definem quais estilos serão aplicados.

Quando o navegador interpreta o CSS, ele procura no documento HTML os elementos que correspondem ao seletor definido na regra. Assim que esses elementos são identificados, o navegador aplica as propriedades especificadas diretamente nesses elementos.

Em outras palavras, uma regra CSS funciona como uma instrução que diz ao navegador: “para todos os elementos HTML que correspondem a este seletor, aplique os seguintes estilos”.

Cada regra é composta por três partes principais:

A estrutura básica de uma regra CSS é a seguinte: 

seletor {
  propriedade: valor;
  propriedade: valor;
}

Por exemplo, na regra abaixo o seletor p indica que todos os elementos <p> do documento HTML devem receber a cor vermelha. 

p {
  color: red;
}

Quando essa regra é interpretada pelo navegador, todos os parágrafos da página HTML passam a ser exibidos com texto vermelho. Isso demonstra como o CSS atua diretamente sobre os elementos HTML, alterando apenas sua apresentação visual.

Dentro do bloco de regras podemos definir várias propriedades diferentes para o mesmo elemento.

Exemplo: 

body {
  font-family: Arial;
}

header {
  background-color: #28a745;
  padding: 20px;
}

Seletores

Os seletores CSS são responsáveis por identificar quais elementos HTML receberão determinadas regras de estilo.

Página inicial BBC
Figura 2 – Comparação de página web com e sem CSS

Quando o navegador interpreta o código CSS, ele analisa o seletor e identifica quais elementos do documento HTML correspondem àquele seletor. Em seguida, aplica as propriedades definidas na regra CSS diretamente nesses elementos.

Em outras palavras, o seletor atua como um filtro: ele seleciona determinados elementos HTML e faz com que as regras CSS sejam aplicadas apenas a esses elementos.

Existem diferentes tipos de seletores.

Exemplos: 


/* seletor por tag. No ex, todos os parágrafos p ficarão com a cor da fonte em azul */
p {
  color: blue;
}

/* seletor por classe. No ex, todos os elementos com o atributo classe "destaque" ficarão com a cor da fonte em vermelho */
.destaque {
  color: red;
}

/* seletor por id. No ex, o elemento com o atributo id "titulo" ficará com o tamanho da fonte em 24px */
#titulo {
  font-size: 24px;
}

Atributos class e id

No HTML, os atributos class e id são utilizados para identificar elementos dentro de uma página. Eles são muito importantes porque permitem aplicar estilos CSS específicos ou manipular elementos com JavaScript.

Embora ambos sirvam para identificar elementos, eles possuem objetivos diferentes e são utilizados em situações distintas.

O atributo class

O atributo class é utilizado para identificar um grupo de elementos que compartilham as mesmas características ou estilos. Vários elementos podem possuir a mesma classe.

Isso é muito útil quando queremos aplicar o mesmo estilo a vários elementos da página. 

<p class="destaque">Este texto está em destaque.</p>
<p class="destaque">Outro texto em destaque.</p>

No CSS, as classes são referenciadas utilizando um ponto (.) antes do nome da classe. 

.destaque {
  color: red;
  font-weight: bold;
}

Nesse exemplo, todos os elementos que possuem a classe destaque terão o texto em vermelho e em negrito.

O atributo id

O atributo id é utilizado para identificar um elemento específico e deve ser único dentro da página. Ou seja, não devemos repetir o mesmo ID em vários elementos.

Ele é frequentemente utilizado para identificar partes específicas da página, como títulos, seções ou elementos que precisam de tratamento especial. 

<h1 id="titulo-principal">Bem-vindo ao site</h1>

No CSS, os IDs são referenciados utilizando o símbolo # antes do nome do identificador. 

#titulo-principal {
  color: blue;
  text-align: center;
}

Nesse caso, apenas o elemento que possui o id="titulo-principal" receberá esse estilo.

Diferença entre class e id

Atributo Uso Quantidade de elementos Seleção no CSS
class Agrupar elementos com características semelhantes Pode ser usada em vários elementos .nome-da-classe
id Identificar um elemento específico Deve ser único na página #nome-do-id

Exemplo combinando class e id

Um elemento pode possuir um id específico e também pertencer a uma class. 

<h2 id="titulo" class="destaque">
  Título da Página
</h2>

Nesse caso, o elemento pode receber estilos tanto da classe quanto do ID.

Herança e Especificidade em Regras CSS

Herança

Algumas propriedades CSS são herdadas automaticamente pelos elementos filhos. Isso significa que um elemento pode receber determinados estilos definidos no elemento pai.

Por exemplo: 

body {
  color: red;
}

Nesse caso, todos os elementos de texto dentro do body também aparecerão em vermelho, a menos que outro estilo mais específico seja aplicado.

Especificidade

A especificidade define qual regra CSS será aplicada quando diferentes regras tentam estilizar o mesmo elemento.

De forma geral, a prioridade segue a seguinte ordem:

Exemplo: 

body {
  color: red;
}

.classe-do-p {
  color: blue;
}

Nesse caso, o texto que possui a classe classe-do-p será exibido em azul, pois o seletor de classe possui maior especificidade do que o seletor por tag.

Exercício Guiado

Avaliação de seletores, herança e especificidade.

Baixe o arquivo aula-selectors.zip e descompacte-o.

A estrutura das pastas e arquivos está organizada como abaixo:

/aula-selectors
   index.html
   style.css

Avalie o conteúdo do arquivo index.html. Nele, são representados 7 parágrafos textuais, organizados conforme abaixo.

Figura 3 – Organização do arquivos HTML em relação aos parágrafos

Abra o arquivo index.html no navegador.

Edite o arquivo style.css.

Adicione as seguinte regras CSS abaixo, uma a uma, avaliando o efeito sobre a página HTML.

/* =====================
   SELETOR POR TAG
   ===================== */

p {
    color: blue;
}

/* todos os parágrafos ficam azuis */


/* =====================
   SELETOR POR CLASSE
   ===================== */

.destaque {
    color: red;
}

/* todos com class="destaque" ficam vermelhos */


/* =====================
   SELETOR POR ID
   ===================== */

#importante {
    font-weight: bold;
}

/* apenas o parágrafo com id importante */


/* =====================
   DESCENDENTE (A B)
   ===================== */

.container p {
    background-color: lightgray;
}

/* todo p dentro de .container */


/* =====================
   FILHO DIRETO (A > B)
   ===================== */

.container > p {
    background-color: yellow;
}

/*
somente p que são
filhos diretos de .container
*/


/* =====================
   HERANÇA
   ===================== */

.container {
    font-family: Arial;
}

/*
os parágrafos dentro
herdam a fonte
*/


/* =====================
   ESPECIFICIDADE
   ===================== */

p {
    font-size: 14px;
}

.destaque {
    font-size: 18px;
}

#importante {
    font-size: 22px;
}

/*
prioridade:

tag < class < id
*/

Box Model

No CSS, cada elemento HTML é representado visualmente como um retângulo. Esse conceito é conhecido como Box Model.

Página inicial BBC
Figura 3 – Modelo Box Model

O modelo de caixa é composto por quatro partes principais:

Controlar essas propriedades é essencial para organizar corretamente o layout de uma página.

margin é um espaço transparente externo entre a borda do elemento e outros elementos (margem externa). padding é um espaço transparente interno entre o conteúdo e a borda (margem interna). border é uma linha que envolve o padding e o conteúdo e pode ser estilizada.

Propriedades CSS básicas

Propriedade O que ela faz
color Define a cor do texto.
font-size Define o tamanho da fonte.
font-family Define a família da fonte utilizada.
font-weight Define o peso da fonte (normal, negrito ou valores numéricos).
text-align Define o alinhamento horizontal do texto.
background-color Define a cor de fundo de um elemento.
border Define uma borda ao redor do elemento.
margin Define o espaço externo entre elementos.
padding Define o espaço interno entre o conteúdo e a borda.
width Define a largura do elemento.
height Define a altura do elemento.
text-decoration Define decorações de texto, como sublinhado.
border-radius Arredonda os cantos da borda.

Pseudo-classes e Pseudo-elementos

No CSS, além de selecionar elementos diretamente por meio de tags, classes ou IDs, também é possível aplicar estilos com base em estados específicos dos elementos ou em partes específicas deles. Para isso utilizamos as pseudo-classes e os pseudo-elementos.

Pseudo-classes

As pseudo-classes permitem aplicar estilos a um elemento quando ele se encontra em um determinado estado ou condição.

Um exemplo comum ocorre com links ou botões quando o usuário passa o mouse sobre o elemento.

As pseudo-classes são escritas utilizando dois pontos (:) após o seletor.

Exemplo: 

a:hover {
  color: red;
}

Nesse exemplo, quando o usuário posiciona o cursor do mouse sobre um link (<a>), a cor do texto muda para vermelho.

Algumas pseudo-classes comuns são:

Exemplo com pseudo-classe

button:hover {
  background-color: blue;
  color: white;
}

Nesse caso, quando o usuário passa o mouse sobre o botão, a cor de fundo e a cor do texto são alteradas.

Pseudo-elementos

Os pseudo-elementos permitem aplicar estilos a partes específicas de um elemento HTML, mesmo que essas partes não existam diretamente no HTML.

Eles são escritos utilizando dois pontos duplos (::).

Alguns pseudo-elementos comuns são:

Exemplo com pseudo-elemento

p::first-letter {
  font-size: 200%;
  font-weight: bold;
}

Nesse exemplo, a primeira letra de todos os parágrafos será exibida com tamanho maior e em negrito.

Exemplo inserindo conteúdo

h2::before {
  content: "★ ";
  color: gold;
}

Nesse caso, um símbolo de estrela será inserido antes de todos os títulos <h2>, mesmo que esse conteúdo não esteja presente no HTML.

Pseudo-classes e pseudo-elementos são recursos importantes do CSS, pois permitem criar interações visuais e estilizações avançadas sem precisar modificar a estrutura HTML da página.

Exercício

Portal de uma empresa de tecnologia - Parte III

Iremos trabalhar no exercício básica da aula anterior. Use o código feito por você ou copie o exemplo abaixo.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <title>TechFuture Soluções Digitais</title>
</head>

<body id="topo">
    <!-- Cabeçalho -->
    <header>
        <h1>TechFuture Soluções Digitais</h1>
        <p>Transformando ideias em <b>soluções digitais</b> modernas e eficientes.</p>
    
		<!-- Menu de Navegação -->
		<nav>
			<ul>
				<li><a href="#sobre">Sobre Nós</a></li>
				<li><a href="#servicos">Serviços</a></li>
				<li><a href="#contato">Contato</a></li>
				<li><a href="https://www.tecmundo.com.br" target="_blank">Notícias de Tecnologia</a></li>
			</ul>
		</nav>
	</header>
    <!-- Seção Sobre Nós -->
    <section id="sobre">

        <h2>Sobre Nós</h2>

        <p>A TechFuture atua no mercado de tecnologia desenvolvendo sistemas sob medida para empresas de todos os portes.</p>

        <p>Nosso compromisso é com a <b>qualidade</b> e a <i>inovação</i>, entregando soluções que realmente fazem a diferença.</p>

        <img src="https://images.adsttc.com/media/images/64d5/5168/fbc6/5827/13ee/2f9d/medium_jpg/startup-vitap-macro-arquitetos_3.jpg">

    </section>

    <!-- Seção Serviços -->
    <section id="servicos">

        <h2>Serviços</h2>

        <ul>
            <li>Desenvolvimento Web</li>
            <li>Aplicativos Mobile</li>
            <li>Consultoria em Tecnologia</li>
        </ul>

    </section>

    <!-- Seção Contato -->
    <section id="contato">

        <h2>Contato</h2>

        <p>Email: contato@techfuture.com</p>
        <p>Telefone: (11) 99999-9999</p>
    </section>

    <!-- Rodapé -->
    <footer>

        <p> &copy; 2026 TechFuture Soluções Digitais. Todos os direitos reservados.</p>

        <p><a href="#topo">Voltar ao topo</a></p>

    </footer>

</body>

</html>

Requisitos obrigatórios: