CSS3 Moderno e Organização Visual

O CSS3 será tratado aqui não apenas como “estilização”, mas como:

ferramenta de organização visual;
tecnologia de interface;
mecanismo de acessibilidade;
componente essencial da experiência do usuário;
base para responsividade moderna;
fundamento para frameworks futuros.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

utilizar CSS3 moderno profissionalmente;
compreender cascata, herança e especificidade;
aplicar seletores modernos;
construir tipografia profissional;
utilizar cores e variáveis CSS;
compreender box model;
aplicar efeitos visuais modernos;
organizar CSS de maneira escalável;
preparar a base para Flexbox, Grid e responsividade.

1. Introdução ao CSS

Fundamentação Teórica

CSS (Cascading Style Sheets) é a linguagem responsável pela apresentação visual das páginas Web.

O CSS atua sobre o DOM estudado no Módulo 1.

O navegador:

interpreta o HTML;
constrói o DOM;
interpreta o CSS;
constrói o CSSOM;
renderiza visualmente a página.

Formas de Aplicação do CSS

Tipo	Característica
Inline	Dentro da tag HTML
Interno	Dentro da tag `<style>`
Externo	Arquivo `.css` separado

Cascata

O termo “cascata” significa que o navegador resolve conflitos utilizando:

prioridade;
especificidade;
ordem de leitura.

Herança

Algumas propriedades são herdadas:

color;
font-family;
line-height.

Outras não:

margin;
padding;
border.

Especificidade

Prioridade simplificada:

inline > id > classe > elemento

Exemplo 1 — CSS Inline, Interno e Externo

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Introdução ao CSS</title>

    <style>

        h1 {
            color: blue;
        }

    </style>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <h1 style="color: red;">
        CSS Moderno
    </h1>

    <p>
        Exemplo de cascata CSS.
    </p>

</body>
</html>

Arquivo: `style.css`

h1 {
    color: green;
}

p {
    color: gray;
}

Discussão Técnica

O h1 ficará vermelho porque:

CSS inline possui maior prioridade.

Exemplo 2 — Herança e Especificidade

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Herança CSS</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="container">

        <h1 id="titulo">
            Front-end Moderno
        </h1>

        <p>
            CSS moderno organiza interfaces.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial, sans-serif;
    color: #333;
}

.container {
    color: darkblue;
}

#titulo {
    color: crimson;
}

Resultado Esperado

font-family será herdada;
p ficará azul escuro;
h1 ficará vermelho devido ao ID.

Referências

Livros

CSS: The Definitive Guide
HTML & CSS: Design and Build Websites

Sites

2. Seletores Modernos

Fundamentação Teórica

Seletores determinam quais elementos receberão estilos.

CSS moderno utiliza:

seletores compostos;
pseudo-classes;
pseudo-elementos;
filtros avançados.

Principais Seletores

Seletor	Função
`.classe`	Seleciona classe
`#id`	Seleciona ID
`elemento`	Seleciona tag
`:hover`	Estado do elemento
`::before`	Conteúdo antes
`::after`	Conteúdo depois
`:nth-child()`	Seleção posicional
`:not()`	Exclusão

Exemplo 1 — Pseudo-classes e nth-child

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Seletores Modernos</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <ul>

        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>

    </ul>

    <button>
        Enviar
    </button>

</body>
</html>

Arquivo: `style.css`

li:nth-child(even) {
    background-color: #eee;
}

button:hover {
    background-color: #333;
    color: white;
}

Exemplo 2 — before, after e not

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Pseudo-elementos</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <p class="destaque">
        Conteúdo importante
    </p>

    <p>
        Conteúdo comum
    </p>

</body>
</html>

Arquivo: `style.css`

p:not(.destaque) {
    color: gray;
}

.destaque::before {
    content: "★ ";
}

.destaque::after {
    content: " ✔";
}

Discussão Técnica

Pseudo-elementos:

não alteram o HTML;
adicionam conteúdo visual;
são muito usados em interfaces modernas.

Referências

Livros

CSS Secrets

Sites

3. Tipografia Profissional

Fundamentação Teórica

Tipografia é um dos pilares do design moderno.

Ela influencia:

legibilidade;
hierarquia visual;
experiência do usuário;
acessibilidade;
percepção profissional.

Conceitos Fundamentais

Conceito	Função
`line-height`	Espaçamento vertical
`letter-spacing`	Espaço entre letras
`rem`	Relativo à raiz
`em`	Relativo ao pai
Hierarquia visual	Organização do conteúdo

Google Fonts

O Google Fonts fornece fontes Web otimizadas.

Exemplo 1 — Google Fonts e Hierarquia

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Tipografia</title>

    <link rel="preconnect"
          href="https://fonts.googleapis.com">

    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
          rel="stylesheet">

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>
            CSS Tipográfico
        </h1>

        <p>
            Interfaces modernas dependem
            de boa legibilidade.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: "Roboto", sans-serif;
    line-height: 1.6;
    padding: 40px;
}

h1 {
    font-size: 3rem;
}

p {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

Exemplo 2 — rem e em

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>REM e EM</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="card">

        <h2>
            Card Responsivo
        </h2>

        <p>
            Tipografia escalável.
        </p>

    </section>

</body>
</html>

Arquivo: `style.css`

html {
    font-size: 16px;
}

.card {
    font-size: 1.2rem;
    padding: 2em;
}

h2 {
    font-size: 2rem;
}

Discussão Técnica

Boa prática moderna:

usar rem para tipografia global;
usar em para componentes internos.

Referências

Livros

Refactoring UI

Sites

4. Cores e Design Moderno

Fundamentação Teórica

Cores modernas devem considerar:

acessibilidade;
contraste;
identidade visual;
legibilidade;
dark mode.

Modelos de Cor

Modelo	Exemplo
RGB	`rgb(255,0,0)`
RGBA	`rgba(255,0,0,0.5)`
HSL	`hsl(0,100%,50%)`

Variáveis CSS

Variáveis melhoram:

manutenção;
padronização;
reutilização.

Exemplo 1 — Variáveis CSS

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Variáveis CSS</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>
            Design System Básico
        </h1>

        <button>
            Entrar
        </button>

    </main>

</body>
</html>

Arquivo: `style.css`

:root {
    --cor-primaria: #004b8d;
    --cor-secundaria: #00a86b;
    --texto: #222;
}

body {
    color: var(--texto);
    font-family: Arial;
}

h1 {
    color: var(--cor-primaria);
}

button {
    background-color: var(--cor-secundaria);
    color: white;
    border: none;
    padding: 12px 20px;
}

Exemplo 2 — Dark Mode Básico

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Dark Mode</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="card">

        <h1>
            Tema Escuro
        </h1>

        <p>
            Interface moderna responsiva.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

:root {
    --bg: #ffffff;
    --texto: #222;
}

@media (prefers-color-scheme: dark) {

    :root {
        --bg: #121212;
        --texto: #f5f5f5;
    }

}

body {
    background-color: var(--bg);
    color: var(--texto);
    font-family: Arial;
}

Discussão Técnica

O prefers-color-scheme:

detecta preferência do sistema operacional;
melhora UX;
tornou-se padrão moderno.

Referências

Livros

CSS Secrets

Sites

5. Box Model Profissional

Fundamentação Teórica

Todo elemento HTML é tratado como uma caixa.

O Box Model é composto por:

content;
padding;
border;
margin.

Estrutura Conceitual

margin
 └── border
      └── padding
           └── conteúdo

Exemplo 1 — Margin, Padding e Border

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Box Model</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="card">

        <h2>
            Produto
        </h2>

        <p>
            Interface moderna.
        </p>

    </div>

</body>
</html>

Arquivo: `style.css`

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 40px auto;
}

Exemplo 2 — box-sizing e overflow

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Overflow</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="container">

        <p>
            Conteúdo muito grande para a caixa.
        </p>

    </div>

</body>
</html>

Arquivo: `style.css`

* {
    box-sizing: border-box;
}

.container {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
    padding: 20px;
}

Discussão Técnica

Boa prática moderna:

* {
    box-sizing: border-box;
}

Isso evita cálculos inconsistentes de largura.

Referências

Livros

CSS: The Definitive Guide

Sites

MDN Box Model

6. Efeitos Visuais Modernos

Fundamentação Teórica

CSS moderno permite:

microinterações;
animações;
feedback visual;
refinamento visual profissional.

Recursos Modernos

Recurso	Função
`box-shadow`	Sombras
`linear-gradient`	Gradientes
`transition`	Transições
`transform`	Transformações
`animation`	Animações
`object-fit`	Controle de mídia

Exemplo 1 — Card Moderno

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Card Moderno</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <article class="card">

        <img src="produto.jpg"
             alt="Produto moderno">

        <h2>
            Notebook
        </h2>

        <p>
            Interface moderna.
        </p>

    </article>

</body>
</html>

Arquivo: `style.css`

.card {
    width: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

Exemplo 2 — Gradientes e Animações

Arquivo: `index.html`

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

    <meta charset="UTF-8">

    <title>Animações CSS</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <button>
        Entrar
    </button>

</body>
</html>

Arquivo: `style.css`

button {
    background: linear-gradient(90deg,
                #004b8d,
                #0077cc);

    color: white;

    border: none;

    padding: 14px 24px;

    transition: opacity 0.3s;
}

button:hover {
    opacity: 0.8;
}

Discussão Técnica

Evitar:

excesso de animações;
transições muito lentas;
efeitos que prejudiquem acessibilidade.

Referências

Livros

CSS Secrets

Sites

7. Organização Profissional do CSS

Fundamentação Teórica

Projetos modernos exigem:

escalabilidade;
reutilização;
padronização;
manutenção simplificada.

Boas Práticas

Prática	Objetivo
CSS modular	Separação lógica
DRY	Evitar repetição
Comentários	Organização
Nomenclatura consistente	Legibilidade

Exemplo 1 — CSS Modular

Estrutura

projeto/
│
├── css/
│   ├── style.css
│   ├── buttons.css
│   └── cards.css

Arquivo: `style.css`

@import url("buttons.css");
@import url("cards.css");

Arquivo: `buttons.css`

.botao {
    padding: 12px 20px;
}

Arquivo: `cards.css`

.card {
    border-radius: 12px;
}

Exemplo 2 — Convenções de Nomenclatura

Arquivo: `index.html`

<div class="card-produto">

    <h2 class="card-produto__titulo">
        Notebook
    </h2>

</div>

Arquivo: `style.css`

/* Componente card */

.card-produto {
    padding: 20px;
}

.card-produto__titulo {
    font-size: 2rem;
}

Discussão Técnica

O padrão acima é inspirado no:

BEM (Block Element Modifier).

Muito utilizado em:

equipes profissionais;
design systems;
projetos escaláveis.

Referências

Livros

Refactoring UI

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Introdução ao CSS;
Cascata e especificidade;
Seletores modernos;
Tipografia;
Cores e variáveis;
Box model;
Efeitos visuais;
Organização profissional.

Mini Projeto Integrador Sugerido

Construir:

landing page moderna;
tipografia profissional;
paleta consistente;
cards;
botões modernos;
dark mode básico;
efeitos visuais;
organização modular do CSS.

Linguagem e Técnica de Programação I – Aula 04

CSS3 Moderno e Organização Visual

Objetivos do Módulo

1. Introdução ao CSS

Fundamentação Teórica

Formas de Aplicação do CSS

Cascata

Herança

Especificidade

Exemplo 1 — CSS Inline, Interno e Externo

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Exemplo 2 — Herança e Especificidade

Arquivo: index.html

Arquivo: style.css

Resultado Esperado

Referências

Livros

Sites

2. Seletores Modernos

Fundamentação Teórica

Principais Seletores

Exemplo 1 — Pseudo-classes e nth-child

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — before, after e not

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

3. Tipografia Profissional

Fundamentação Teórica

Conceitos Fundamentais

Google Fonts

Exemplo 1 — Google Fonts e Hierarquia

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — rem e em

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

4. Cores e Design Moderno

Fundamentação Teórica

Modelos de Cor

Variáveis CSS

Exemplo 1 — Variáveis CSS

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Dark Mode Básico

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

5. Box Model Profissional

Fundamentação Teórica

Estrutura Conceitual

Exemplo 1 — Margin, Padding e Border

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — box-sizing e overflow

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

6. Efeitos Visuais Modernos

Fundamentação Teórica

Recursos Modernos

Exemplo 1 — Card Moderno

Arquivo: index.html

Arquivo: style.css

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `style.css`

Arquivo: `buttons.css`

Arquivo: `cards.css`

Arquivo: `index.html`

Arquivo: `style.css`