Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante   Click to listen highlighted text! Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante

Linguagem e Técnica de Programação II – Aula 02

CSS3

Apresentação

Este módulo apresenta o CSS3 como a linguagem responsável pela definição da aparência visual das páginas Web. Enquanto o HTML organiza a estrutura e o conteúdo, o CSS define aspectos como cores, fontes, margens, espaçamentos, bordas, alinhamentos, layouts e adaptação a diferentes tamanhos de tela.

Os exemplos foram reorganizados para facilitar a compreensão do estudante, sempre relacionando o código CSS ao arquivo index.html, de modo que o aluno consiga visualizar com clareza:

  • o trecho HTML que será estilizado;
  • o trecho CSS correspondente;
  • o resultado esperado da integração entre os dois arquivos.

Objetivos da aula

Ao final desta aula, o estudante deverá ser capaz de:

  • compreender o papel do CSS3 no desenvolvimento Web;
  • relacionar corretamente o arquivo style.css ao arquivo index.html;
  • aplicar seletores CSS a elementos HTML;
  • utilizar propriedades visuais básicas com sentido técnico adequado;
  • compreender o modelo de caixa;
  • construir layouts introdutórios com Flexbox;
  • aplicar noções iniciais de responsividade.

Competências desenvolvidas

  • separação entre estrutura e apresentação;
  • interpretação integrada de HTML e CSS;
  • criação de folhas de estilo externas;
  • organização progressiva de layouts;
  • preparação para interfaces modernas e adaptáveis.

Metodologia sugerida

Sugere-se uma condução expositivo-prática, com demonstração progressiva no editor de código e execução imediata pelos estudantes. Recomenda-se trabalhar com dois arquivos básicos desde o início da aula:

  • index.html
  • style.css

A cada exemplo, o professor pode mostrar:

  1. o trecho no HTML;
  2. o trecho no CSS;
  3. o efeito visual produzido no navegador.

Recursos necessários

  • computador com editor de código, preferencialmente VS Code;
  • navegador atualizado;
  • projetor ou tela para demonstração;
  • pasta de trabalho contendo os arquivos index.html e style.css.

Conceitos fundamentais do CSS3

CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata. Sua função é controlar a aparência dos elementos estruturados em HTML.

O ideal, em projetos reais e também no ensino introdutório, é utilizar CSS externo, ou seja, um arquivo separado do HTML. Isso facilita:

  • manutenção;
  • organização;
  • reaproveitamento;
  • legibilidade do código.
  • A seguir, cada exemplo trará a integração com o arquivo index.html.

Exemplo 1 — Ligando o arquivo style.css ao index.html

Arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Aula de CSS3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Introdução ao CSS3</h1>
    <p>Este texto será estilizado pelo arquivo CSS externo.</p>
</body>
</html>

Arquivo style.css

h1 {
    color: blue;
}

p {
    color: green;
}

Explicação

O elemento <link rel="stylesheet" href="style.css"> conecta o HTML ao CSS. A partir disso, todas as regras escritas em style.css podem ser aplicadas aos elementos da página.

Exemplo 2 — Diferença entre estrutura e estilo

Arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura e estilo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Título da Página</h1>
    <p>O HTML organiza o conteúdo. O CSS define a aparência.</p>
</body>
</html>

Arquivo style.css

body {
    background-color: #f4f4f4;
}

h1 {
    color: #003366;
}

p {
    color: #333333;
}

Explicação

O HTML informa ao navegador o que é título e o que é parágrafo. O CSS altera a aparência visual desses elementos, sem modificar sua natureza estrutural.

Exemplo 3 — CSS interno comparado ao CSS externo

Arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>CSS interno</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Este parágrafo usa CSS interno.</p>
</body>
</html>

Explicação

Esse exemplo mostra CSS interno, escrito no próprio HTML. Ele é válido, mas em contextos didáticos e profissionais o uso de arquivo externo costuma ser preferível.

Exemplo 4 — Regra CSS básica aplicada ao HTML

Arquivo index.html

<body>
    <p>Parágrafo de teste.</p>
</body>

Arquivo style.css

p {
    color: purple;
}

Explicação

A regra CSS é composta de:

  • seletor: p
  • propriedade: color
  • valor: purple

Ela se aplica a todos os parágrafos do HTML.

Exemplo 5 — Múltiplas propriedades para o mesmo elemento

Arquivo index.html

<body>
    <h1>Portal da Turma</h1>
</body>

Arquivo style.css

h1 {
    color: navy;
    font-size: 32px;
    text-align: center;
}

Explicação

Um mesmo seletor pode conter várias propriedades. Nesse caso, o título recebe cor, tamanho de fonte e alinhamento.

Exemplo 6 — Comentários no CSS

Arquivo style.css

/* Estilo do título principal */
h1 {
    color: darkgreen;
}

Explicação

Comentários em CSS ajudam na documentação e organização do código, especialmente em projetos didáticos e colaborativos.

Exemplo 7 — Herança de propriedades

Arquivo index.html

<body>
    <h1>Curso Técnico</h1>
    <p>Texto do curso.</p>
</body>

Arquivo style.css

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

Explicação

Algumas propriedades, como color e font-family, tendem a ser herdadas pelos elementos filhos. Isso reduz repetição e melhora a organização do CSS.

Exemplo 8 — Cascata

Arquivo style.css

p {
    color: blue;
}

p {
    color: red;
}

Explicação

Quando duas regras possuem o mesmo nível de especificidade, a que aparece por último prevalece. Esse é um dos fundamentos da “cascata”.

Exemplo 9 — Unidades de medida

Arquivo index.html

<body>
    <p>Exemplo com tamanho de fonte definido.</p>
</body>

Arquivo style.css

p {
    font-size: 18px;
}

Explicação

A unidade px representa pixels. É uma das unidades mais utilizadas em exemplos introdutórios para controle de tamanho.

Exemplo 10 — Largura proporcional

Arquivo index.html

<body>
    <div>Bloco com largura proporcional</div>
</body>

Arquivo style.css

div {
    width: 50%;
    border: 1px solid black;
}

Explicação

A unidade percentual faz com que a largura do elemento dependa do espaço disponível no elemento pai.

Seletores CSS

Os seletores indicam quais elementos HTML receberão o estilo. Eles são o elo lógico entre o arquivo index.html e o style.css.

Exemplo 1 — Seletor por tag

Arquivo index.html

<body>
    <p>Primeiro parágrafo.</p>
    <p>Segundo parágrafo.</p>
</body>

Arquivo style.css

p {
    color: blue;
}

Explicação

Todos os elementos <p> do HTML serão estilizados, pois o seletor foi definido pela tag.

Exemplo 2 — Seletor por classe

Arquivo index.html

<body>
    <p class="destaque">Este texto está em destaque.</p>
    <p>Este texto não está em destaque.</p>
</body>

Arquivo style.css

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

Explicação

A classe permite estilizar apenas os elementos que possuem class="destaque". É uma das formas mais importantes de organização em CSS.

Exemplo 3 — Seletor por ID

Arquivo index.html

<body>
    <h1 id="titulo-principal">Página Inicial</h1>
</body>

Arquivo style.css

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

Explicação

O seletor por ID é identificado com #. Deve ser usado quando se deseja estilizar um elemento único dentro da página.

Exemplo 4 — Seletor universal

Arquivo style.css

* {
    margin: 0;
    padding: 0;
}

Explicação

O seletor universal aplica a regra a todos os elementos da página. É muito usado para normalização inicial de margens e espaçamentos.

Exemplo 5 — Seletor descendente

Arquivo index.html

<body>
    <div>
        <p>Parágrafo dentro da div.</p>
    </div>
    <p>Parágrafo fora da div.</p>
</body>

Arquivo style.css

div p {
    color: purple;
}

Explicação

Esse seletor alcança apenas os parágrafos que estejam dentro de uma div.

Exemplo 6 — Seletor filho direto

Arquivo index.html

<body>
    <div>
        <p>Filho direto da div.</p>
        <section>
            <p>Não é filho direto da div.</p>
        </section>
    </div>
</body>

Arquivo style.css

div > p {
    color: orange;
}

Explicação

Somente o parágrafo que for filho imediato de div será afetado.

Exemplo 7 — Pseudo-classe :hover

Arquivo index.html

<body>
    <a href="#">Passe o mouse aqui</a>
</body>

Arquivo style.css

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
}

Explicação

A pseudo-classe :hover altera o estilo quando o usuário passa o ponteiro do mouse sobre o elemento.

Exemplo 8 — Pseudo-elemento ::first-letter

Arquivo index.html

<body>
    <p>Este parágrafo demonstra pseudo-elemento.</p>
</body>

Arquivo style.css

p::first-letter {
    font-size: 32px;
    font-weight: bold;
}

Explicação

O pseudo-elemento ::first-letter atua apenas sobre a primeira letra do parágrafo.

Exemplo 9 — Seletores agrupados

Arquivo index.html

<body>
    <h1>Título</h1>
    <h2>Subtítulo</h2>
    <h3>Outro subtítulo</h3>
</body>

Arquivo style.css

h1, h2, h3 {
    color: darkblue;
    font-family: Arial, sans-serif;
}

Explicação

Vários seletores podem compartilhar a mesma regra, reduzindo repetição.

Exemplo 10 — Tag combinada com classe

Arquivo index.html

<body>
    <p class="aviso">Este é um aviso importante.</p>
    <div class="aviso">Esta div não receberá o mesmo estilo do parágrafo.</div>
</body>

Arquivo style.css

p.aviso {
    color: crimson;
    font-style: italic;
}

Explicação

A regra se aplica apenas ao elemento p que também possua a classe aviso.

Propriedades fundamentais do CSS3

 

Exemplo 1 — Cor do texto

Arquivo index.html

<body>
    <p>Texto com cor alterada.</p>
</body>

Arquivo style.css

p {
    color: red;
}

Explicação

A propriedade color define a cor do texto do elemento.

Exemplo 2 — Cor de fundo

Arquivo index.html

<body>
    <h1>Página com fundo colorido</h1>
</body>

Arquivo style.css

body {
    background-color: #eeeeee;
}

Explicação

A propriedade background-color altera a cor de fundo do elemento selecionado.

Exemplo 3 — Família tipográfica

Arquivo index.html

<body>
    <p>Texto com fonte Arial.</p>
</body>

Arquivo style.css

p {
    font-family: Arial, sans-serif;
}

Explicação

A propriedade font-family define a fonte principal e alternativas de segurança.

Exemplo 4 — Tamanho da fonte

Arquivo style.css

p {
    font-size: 20px;
}

Explicação

A propriedade font-size controla o tamanho da fonte.

Exemplo 5 — Peso da fonte

Arquivo index.html

<body>
    <p>Texto em negrito.</p>
</body>

Arquivo style.css

p {
    font-weight: bold;
}

Explicação

font-weight define o peso da fonte. O valor bold produz negrito.

Exemplo 6 — Alinhamento do texto

Arquivo index.html

<body>
    <h1>Título centralizado</h1>
</body>

Arquivo style.css

h1 {
    text-align: center;
}

Explicação

A propriedade text-align define o alinhamento horizontal do texto.

Exemplo 7 — Espaçamento interno

Arquivo index.html

<body>
    <div class="caixa">Conteúdo com padding.</div>
</body>

Arquivo style.css

.caixa {
    padding: 20px;
    border: 1px solid black;
}

Explicação

padding cria espaço interno entre o conteúdo e a borda.

Exemplo 8 — Espaçamento externo

Arquivo style.css

.caixa {
    margin: 20px;
    border: 1px solid black;
}

Explicação

margin cria espaço externo ao redor do elemento.

Exemplo 9 — Borda

Arquivo index.html

<body>
    <div class="bloco">Bloco com borda.</div>
</body>

Arquivo style.css

.bloco {
    border: 2px solid black;
}

Explicação

A propriedade border cria uma borda visível ao redor do elemento.

Exemplo 10 — Sombra

Arquivo style.css

.bloco {
    box-shadow: 2px 2px 6px gray;
}

Explicação

box-shadow cria sombra ao redor da caixa do elemento, contribuindo para profundidade visual.

Box Model

O modelo de caixa é um dos conceitos centrais do CSS. Todo elemento visualizado na página pode ser compreendido como uma caixa formada por:

  • conteúdo;
  • padding;
  • border;
  • margin.

CSS Box Model | Felipe Abrantes | HTML | CSS | DIO

Exemplo 1 — Caixa com largura e altura

Arquivo index.html

<body>
    <div class="caixa-modelo">Exemplo de caixa</div>
</body>

Arquivo style.css

.caixa-modelo {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

Explicação

A largura e a altura definem a área do conteúdo da caixa.

Exemplo 2 — Padding

Arquivo style.css

.caixa-modelo {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid black;
}

Explicação

O conteúdo fica afastado das bordas internas.

Exemplo 3 — Border

Arquivo style.css

.caixa-modelo {
    border: 4px solid darkblue;
}

Explicação

A borda delimita visualmente a caixa.

Exemplo 4 — Margin

Arquivo style.css

.caixa-modelo {
    margin: 30px;
}

Explicação

A margem afasta a caixa dos elementos vizinhos.

Exemplo 5 — Caixa completa

Arquivo style.css

.caixa-modelo {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 15px;
}

Explicação

Esse exemplo mostra a composição clássica do Box Model.

Exemplo 6 — box-sizing: border-box

Arquivo style.css

.caixa-modelo {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

Explicação

Com border-box, a largura total passa a considerar conteúdo, padding e borda dentro do valor declarado.

Exemplo 7 — Centralização horizontal

Arquivo index.html

<body>
    <div class="caixa-centralizada">Caixa centralizada</div>
</body>

Arquivo style.css

.caixa-centralizada {
    width: 300px;
    margin: 0 auto;
    border: 1px solid black;
}

Explicação

margin: 0 auto centraliza horizontalmente uma caixa com largura definida.

Exemplo 8 — Controle de excesso de conteúdo

Arquivo index.html

<body>
    <div class="overflow-exemplo">
        Este texto é propositalmente maior do que a área definida para a caixa e servirá para demonstrar o comportamento do overflow.
    </div>
</body>

Arquivo style.css

.overflow-exemplo {
    width: 180px;
    height: 60px;
    overflow: hidden;
    border: 1px solid black;
}

Explicação

A propriedade overflow controla o que acontece quando o conteúdo ultrapassa os limites do elemento.

Exemplo 9 — display: block

Arquivo index.html

<body>
    <span class="bloco-span">Span convertido em bloco</span>
</body>

Arquivo style.css

.bloco-span {
    display: block;
    border: 1px solid black;
}

Explicação

Um elemento originalmente em linha, como span, passa a ocupar uma linha inteira ao receber display: block.

Exemplo 10 — display: inline

Arquivo index.html

<body>
    <div class="inline-div">Primeira div</div>
    <div class="inline-div">Segunda div</div>
</body>

Arquivo style.css

.inline-div {
    display: inline;
    border: 1px solid black;
}

Explicação

Ao receber display: inline, as divs deixam de ocupar linhas separadas.

Flexbox

O Flexbox é um modelo de layout criado para facilitar o alinhamento, a distribuição e a organização de elementos dentro de um contêiner.

Exemplo 1 — Container flex

Arquivo index.html

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

Arquivo style.css

.container {
    display: flex;
    border: 1px solid black;
}

.item {
    border: 1px solid blue;
}

Explicação

A propriedade display: flex transforma o contêiner em um contexto flexível.

Exemplo 2 — Direção em linha

Arquivo style.css

.container {
    display: flex;
    flex-direction: row;
}

Explicação

Os itens são organizados horizontalmente.

Exemplo 3 — Direção em coluna

Arquivo style.css

.container {
    display: flex;
    flex-direction: column;
}

Explicação

Os itens passam a ser organizados verticalmente.

Exemplo 4 — Alinhamento horizontal

Arquivo style.css

.container {
    display: flex;
    justify-content: center;
}

Explicação

justify-content controla o alinhamento no eixo principal.

Exemplo 5 — Alinhamento vertical

Arquivo style.css

.container {
    display: flex;
    height: 200px;
    align-items: center;
}

Explicação

align-items controla o alinhamento no eixo transversal.

Exemplo 6 — Espaçamento entre itens

Arquivo style.css

.container {
    display: flex;
    justify-content: space-between;
}

Explicação

Os itens são distribuídos com espaço entre eles.

Exemplo 7 — Quebra de linha com flex-wrap

Arquivo index.html

<body>
    <div class="container-wrap">
        <div class="caixa">1</div>
        <div class="caixa">2</div>
        <div class="caixa">3</div>
        <div class="caixa">4</div>
        <div class="caixa">5</div>
    </div>
</body>

Arquivo style.css

.container-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.caixa {
    width: 120px;
    border: 1px solid black;
}

Explicação

Quando não há espaço suficiente em uma linha, os elementos podem quebrar para a próxima linha.

Exemplo 8 — Crescimento proporcional

Arquivo style.css

.item {
    flex: 1;
}

Explicação

Cada item cresce de modo proporcional para ocupar o espaço disponível.

Exemplo 9 — Ordem visual

Arquivo style.css

.item-destaque {
    order: -1;
}

Arquivo index.html

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item item-destaque">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

Explicação

A propriedade order altera a ordem visual do item dentro do contêiner flex.

Exemplo 10 — Exemplo completo de menu com Flexbox

Arquivo index.html

<body>
    <nav class="menu">
        <a href="#">Início</a>
        <a href="#">Cursos</a>
        <a href="#">Projetos</a>
        <a href="#">Contato</a>
    </nav>
</body>

Arquivo style.css

.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    background-color: #003366;
    padding: 15px;
}

.menu a {
    color: white;
    text-decoration: none;
}

Explicação

Esse é um exemplo didático bastante útil, pois mostra o uso de Flexbox em um componente real de interface: um menu horizontal.

Responsividade

Responsividade é a capacidade de a interface adaptar-se a diferentes larguras de tela, como computadores, tablets e celulares.

Exemplo 1 — Meta viewport no index.html

Arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsividade</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Página Responsiva</h1>
</body>
</html>

Explicação

A meta viewport é fundamental para que a página se comporte adequadamente em dispositivos móveis.

Exemplo 2 — Media query básica

Arquivo style.css

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Explicação

Quando a largura da tela for de até 600 pixels, a regra será aplicada.

Exemplo 3 — Ajuste de fonte em telas pequenas

Arquivo index.html

<body>
    <p class="texto-responsivo">Texto que muda de tamanho conforme a tela.</p>
</body>

Arquivo style.css

.texto-responsivo {
    font-size: 20px;
}

@media (max-width: 600px) {
    .texto-responsivo {
        font-size: 14px;
    }
}

Explicação

A tipografia pode ser ajustada para melhorar legibilidade em telas menores.

Exemplo 4 — Imagem responsiva

Arquivo index.html

<body>
    <img src="imagem.jpg" alt="Imagem de exemplo">
</body>

Arquivo style.css

img {
    max-width: 100%;
    height: auto;
}

Explicação

A imagem passa a respeitar a largura disponível no contêiner, sem distorção.

Exemplo 5 — Container fluido

Arquivo index.html

<body>
    <div class="conteudo">Área principal</div>
</body>

Arquivo style.css

.conteudo {
    width: 90%;
    margin: 0 auto;
}

Explicação

A largura em percentual permite melhor adaptação a diferentes dispositivos.

Exemplo 6 — Flexbox com quebra

Arquivo style.css

.galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

Arquivo index.html

<body>
    <div class="galeria">
        <div class="foto">Foto 1</div>
        <div class="foto">Foto 2</div>
        <div class="foto">Foto 3</div>
    </div>
</body>

Explicação

A combinação de Flexbox com wrap ajuda a tornar layouts mais adaptáveis.

Exemplo 7 — Mudança de direção do layout

Arquivo index.html

<body>
    <div class="painel">
        <div class="coluna">Coluna 1</div>
        <div class="coluna">Coluna 2</div>
    </div>
</body>

Arquivo style.css

.painel {
    display: flex;
    gap: 20px;
}

@media (max-width: 600px) {
    .painel {
        flex-direction: column;
    }
}

Explicação

Em telas maiores, as colunas aparecem lado a lado; em telas menores, passam a ficar empilhadas.

Exemplo 8 — Ocultação de elemento secundário

Arquivo index.html

<body>
    <div class="menu-lateral">Menu lateral</div>
</body>

Arquivo style.css

@media (max-width: 600px) {
    .menu-lateral {
        display: none;
    }
}

Explicação

Esse recurso pode ser útil quando determinado elemento perde relevância em telas pequenas.

Exemplo 9 — Ajuste de espaçamento

Arquivo style.css

.card {
    padding: 20px;
}

@media (max-width: 600px) {
    .card {
        padding: 10px;
    }
}

Arquivo index.html

<body>
    <div class="card">Cartão de conteúdo</div>
</body>

Explicação

Em telas menores, espaçamentos excessivos podem comprometer a área útil. O ajuste melhora a usabilidade.

Exemplo 10 — Exemplo integrado responsivo

Arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Responsivo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cabecalho">
        <h1>Curso de Desenvolvimento Web</h1>
    </header>

    <main class="principal">
        <section class="bloco">HTML5</section>
        <section class="bloco">CSS3</section>
        <section class="bloco">JavaScript</section>
    </main>
</body>
</html>

Arquivo style.css

.cabecalho {
    text-align: center;
    padding: 20px;
    background-color: #003366;
    color: white;
}

.principal {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.bloco {
    flex: 1;
    padding: 20px;
    border: 1px solid #cccccc;
}

@media (max-width: 600px) {
    .principal {
        flex-direction: column;
    }
}

Explicação

Esse exemplo reúne cabeçalho, área principal, Flexbox e media query, constituindo um pequeno layout moderno e didático.

Exercício prático integrador

Proposta

Criem os arquivos index.html e style.css contendo:

  • cabeçalho com título;
  • menu horizontal;
  • área principal com três blocos de conteúdo;
  • rodapé;
  • uso de classes e IDs;
  • bordas, margens e paddings;
  • layout com Flexbox;
  • media query para adaptação em telas menores.

Estrutura mínima esperada no index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página com CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Minha Página</h1>
    </header>

    <nav class="menu">
        <a href="#">Início</a>
        <a href="#">Sobre</a>
        <a href="#">Contato</a>
    </nav>

    <main class="conteudo">
        <section class="caixa">Bloco 1</section>
        <section class="caixa">Bloco 2</section>
        <section class="caixa">Bloco 3</section>
    </main>

    <footer>
        <p>Rodapé da página</p>
    </footer>
</body>
</html>

Estrutura mínima esperada no style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

header, footer {
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 20px;
}

.menu {
    display: flex;
    justify-content: center;
    gap: 15px;
    background-color: #eeeeee;
    padding: 10px;
}

.menu a {
    text-decoration: none;
    color: #003366;
}

.conteudo {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.caixa {
    flex: 1;
    border: 1px solid #cccccc;
    padding: 20px;
}

@media (max-width: 600px) {
    .conteudo {
        flex-direction: column;
    }
}

Encerramento do módulo

Ao final desta aula, o estudante deve compreender que o CSS3 não é apenas um recurso estético, mas um componente essencial da construção de interfaces Web.

O domínio de:

  • ligação entre index.html e style.css;
  • seletores;
  • propriedades fundamentais;
  • modelo de caixa;
  • Flexbox;
  • responsividade
  • constitui uma base sólida para o desenvolvimento de páginas modernas, legíveis e adaptáveis.

Referências para aprofundamento

  • MDN Web Docs. CSS: Cascading Style Sheets. Mozilla. Disponível em documentação oficial da MDN.
  • W3C. CSS Snapshot. World Wide Web Consortium. Documentação oficial de padronização do CSS.
  • Meyer, Eric A. CSS: The Definitive Guide. O’Reilly Media.

Fim da aula 02

Click to listen highlighted text!