HTML do Zero a 100 Exemplos: Estrutura, Formulários, Mídia e Todos os Grupos de Propriedades CSS

HTML dá à página web a sua estrutura, e CSS dá a ela aparência e layout. Este artigo vai de uma página de uma linha até 100 exemplos prontos para usar. Você vai aprender as tags para texto, listas, links, formulários, tabelas, mídia e estrutura da página, e depois as propriedades CSS para cores, espaçamentos, texto, fundos, posicionamento, flexbox, grid, transições e animações. Cada exemplo é um trecho pequeno que você pode colar em um arquivo e abrir no navegador. Leia uma seção, depois altere os exemplos e veja o que acontece.

O que você precisa

Um editor de texto simples, como o VS Code ou o Bloco de Notas, e um navegador moderno, como Chrome, Edge ou Firefox. Salve o arquivo com a extensão .html e abra com clique duplo, ou arraste-o para a janela do navegador. Não é preciso experiência em programação. Saber o que é uma pasta de arquivos vai ajudar.

Como testar um exemplo

Crie um arquivo chamado teste.html e cole o exemplo dentro do body de uma página completa (use a estrutura do Exemplo 1). Salve e abra no navegador. Exemplos que contêm apenas CSS precisam de um elemento style dentro do head.

Tópico 1: Estrutura básica e o head do documento

Toda página HTML tem a mesma estrutura: doctype, o elemento html, o head com informações sobre a página e o body com o que o leitor vê.

Esqueleto do documento

A linha doctype indica ao navegador que deve usar HTML moderno. O elemento html tem o atributo lang, que informa aos leitores de tela e tradutores o idioma da página. Tudo o que o leitor vê fica dentro do body.

O elemento head

O head não aparece na tela. Ele contém o título que aparece na aba do navegador, o charset que faz os acentos e os caracteres tailandeses e árabes serem exibidos corretamente, a descrição usada nos resultados de busca e a tag viewport que deixa a página do tamanho certo no celular.

Títulos, parágrafos e listas

Use h1 uma vez por página para o título principal, e h2 e h3 para as seções. p cria parágrafos. ul é uma lista com marcadores, ol é uma lista numerada, e dl é uma lista de pares de termo e descrição. Escolha os elementos pelo significado, e não pela aparência, e ajuste a aparência com CSS depois.

Exemplo 1: Página mínima

O menor documento HTML completo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha primeira página</title>
</head>
<body>
  <h1>Olá, HTML</h1>
</body>
</html>

Exemplo 2: Títulos

h1 é o título mais importante, e h6 é o menor.

<h1>Título principal</h1>
<h2>Seção</h2>
<h3>Subseção</h3>
<h6>Título menor</h6>

Exemplo 3: Parágrafos e quebra de linha

p cria parágrafos; br força uma nova linha dentro dele.

<p>Primeiro parágrafo.</p>
<p>Segundo parágrafo<br>com uma quebra de linha.</p>

Exemplo 4: Lista não ordenada

ul com itens li mostra marcadores.

<ul>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Exemplo 5: Lista ordenada

ol numera os itens; start define o primeiro número.

<ol start="3">
  <li>Planejar</li>
  <li>Construir</li>
  <li>Testar</li>
</ol>

Exemplo 6: Lista de descrição

dl associa termos (dt) a descrições (dd).

<dl>
  <dt>HTML</dt>
  <dd>A estrutura de uma página web.</dd>
  <dt>CSS</dt>
  <dd>A aparência e o layout.</dd>
</dl>

Exemplo 7: Links

a define o endereço; download salva o arquivo; mailto abre o e-mail.

<a href="https://example.com">Visite o Example</a>
<a href="#topo">Voltar ao topo</a>
<a href="mailto:[email protected]">Envie um e-mail</a>
<a href="relatorio.pdf" download>Baixe o relatório</a>

Exemplo 8: Imagem e texto alternativo

img mostra uma imagem; alt a descreve para leitores de tela.

<img src="gato.jpg" alt="Um gato cinza dormindo em um sofá" width="300" height="200">

Exemplo 9: Comentário e meta viewport

O comentário não aparece na página; a tag viewport deixa a página do tamanho certo no celular.

<!-- Este comentário não aparece na página -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Exemplo 10: Head do documento

lang, charset, title e description ficam no head.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Loja</title>
  <meta name="description" content="Uma pequena loja online.">
</head>
<body>
  <p>Bem-vindo!</p>
</body>
</html>

Tópico 2: Texto e elementos inline

Elementos inline ficam dentro de uma linha de texto. Alguns acrescentam significado para leitores e mecanismos de busca, e outros apenas mudam a aparência do texto.

Significado versus aparência

strong marca um texto importante e em indica ênfase. Leitores de tela podem mudar a entonação em ambos. b e i deixam o texto em negrito ou itálico sem acrescentar significado. Use strong e em quando o significado importa.

Elementos de texto especiais

mark destaca um trecho, small mostra texto pequeno, sub e sup escrevem fórmulas químicas e expoentes, code mostra código na linha, pre preserva espaços e quebras de linha, e kbd mostra uma tecla pressionada.

Caracteres e links

Escreva < e & como &lt; e &amp; para que o navegador não os interprete como tags. Links usam a com href. Use download para salvar arquivos, mailto para abrir o e-mail, e sempre escreva um texto de link claro, em vez de clique aqui.

Exemplo 11: Negrito, itálico e ênfase

strong e em carregam significado; b e i mudam apenas a aparência.

<p>Isto é <strong>importante</strong> e isto é <em>enfatizado</em>.</p>
<p><b>Só negrito</b> e <i>só itálico</i>.</p>

Exemplo 12: Mark, small, sub e sup

Destaca texto e escreve fórmulas químicas e expoentes.

<p>Destaque: <mark>palavra-chave</mark></p>
<p>Letra miúda: <small>termos se aplicam</small></p>
<p>H<sub>2</sub>O e E = mc<sup>2</sup></p>

Exemplo 13: Código e texto pré-formatado

code mostra código na linha; pre preserva espaços e quebras de linha.

<p>Use a função <code>print()</code>.</p>
<pre>
  linha 1
    linha 2 com recuo
</pre>

Exemplo 14: Abreviação e tempo

abbr explica uma sigla; time indica uma data que pode ser lida por máquinas.

<p><abbr title="HyperText Markup Language">HTML</abbr> é fácil de aprender.</p>
<p>Encontre-nos às <time datetime="2026-11-01T18:00">18h do dia 1 de novembro</time>.</p>

Exemplo 15: Citação em bloco e referência

blockquote cita um trecho longo; cite indica a fonte.

<blockquote cite="https://example.com/livro">
  A simplicidade é a sofisticação máxima.
</blockquote>
<p>Fonte: <cite>Leonardo da Vinci</cite></p>

Exemplo 16: Linha horizontal

hr marca a mudança de assunto.

<p>O capítulo um termina aqui.</p>
<hr>
<p>O capítulo dois começa.</p>

Exemplo 17: Contêineres span e div

div e span agrupam conteúdo para que o CSS possa estilizá-lo.

<div class="cartao">
  <p>Preço: <span class="preco">250 THB</span></p>
</div>

Exemplo 18: Caracteres especiais

Escreva < > & e símbolos usando referências de caractere.

<p>Menor que: &lt; Maior que: &gt; E comercial: &amp;</p>
<p>Direitos autorais &copy; 2026 &nbsp; Baht tailandês &#3647;</p>

Exemplo 19: Entrada do teclado

kbd mostra ao leitor uma tecla pressionada.

<p>Pressione <kbd>Ctrl</kbd> + <kbd>S</kbd> para salvar.</p>

Exemplo 20: Citação na linha e definição

q adiciona aspas; dfn marca o termo que está sendo definido.

<p>Ela disse <q>olá</q> e saiu.</p>
<p><dfn>Latência</dfn> é o atraso antes de uma resposta.</p>

Tópico 3: Formulários

Formulários coletam dados do leitor. Cada campo precisa de um rótulo, do tipo adequado e, se necessário, de regras que verifiquem o valor antes do envio.

Rótulos e tipos de campo

Associe cada rótulo ao seu campo usando for e um id iguais. O atributo type escolhe o teclado e o seletor corretos: email, number, date, color ou range. Clicar no rótulo então coloca o foco no campo, o que ajuda todo mundo.

Opções: radio, checkbox, select

Os botões de rádio usam o mesmo name, para que só um possa ser escolhido. Caixas de seleção permitem várias opções. select com option cria uma lista suspensa, e selected define o valor inicial. datalist oferece sugestões enquanto o leitor digita.

Validação e envio

required impede o envio com o campo vazio, e pattern verifica o formato com uma expressão regular. Campos hidden carregam um valor que o leitor não vê. Valide sempre também no servidor, porque a verificação do navegador pode ser contornada.

Exemplo 21: Formulário simples

form com rótulo, campo e botão de envio.

<form action="/cadastro" method="post">
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome">
  <button type="submit">Cadastrar</button>
</form>

Exemplo 22: Tipos de campo

O atributo type gera campos de e-mail, número, data, cor e controle deslizante.

<input type="email" placeholder="[email protected]">
<input type="password">
<input type="number" min="1" max="10" step="1">
<input type="date">
<input type="color" value="#3366ff">
<input type="range" min="0" max="100">

Exemplo 23: Campo obrigatório e padrão

required bloqueia campo vazio; pattern verifica o formato.

<form>
  <input type="text" required placeholder="Nome de usuário">
  <input type="text" pattern="[A-Za-z]{3,}" title="Pelo menos 3 letras">
  <button>Enviar</button>
</form>

Exemplo 24: Botões de rádio e caixas de seleção

Rádio: escolha uma. Caixa de seleção: escolha quantas quiser.

<fieldset>
  <legend>Escolha um plano</legend>
  <input type="radio" id="gratis" name="plano" value="gratis" checked>
  <label for="gratis">Grátis</label>
  <input type="radio" id="pro" name="plano" value="pro">
  <label for="pro">Pro</label>
</fieldset>
<input type="checkbox" id="novidades" checked>
<label for="novidades">Quero receber novidades</label>

Exemplo 25: Lista suspensa

select com itens option; selected define o valor inicial.

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="th" selected>Tailândia</option>
  <option value="jp">Japão</option>
  <option value="us">Estados Unidos</option>
</select>

Exemplo 26: Área de texto

Caixa de texto com várias linhas, com rows e placeholder.

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" rows="4" cols="40" placeholder="Escreva aqui..."></textarea>

Exemplo 27: Sugestões com datalist

Campo que oferece sugestões enquanto você digita.

<input list="frutas" name="fruta">
<datalist id="frutas">
  <option value="Maçã">
  <option value="Banana">
</datalist>

Exemplo 28: Botões

Tipos de botão: button, reset e submit.

<button type="button">Clique aqui</button>
<button type="reset">Limpar formulário</button>
<input type="submit" value="Enviar">

Exemplo 29: Campo oculto e autocomplete

O valor oculto é enviado junto com o formulário; autocomplete ajuda o navegador a preencher.

<form>
  <input type="hidden" name="origem" value="pagina-inicial">
  <input type="text" name="cidade" autocomplete="address-level2">
</form>

Exemplo 30: Envio de arquivo

input type file com accept para limitar os tipos de arquivo.

<label for="foto">Envie uma foto</label>
<input type="file" id="foto" accept="image/png, image/jpeg">

Tópico 4: Tabelas

Tabelas mostram dados em linhas e colunas. Use-as para dados reais, e não para layout da página.

Linhas, células e cabeçalhos

tr é uma linha, td é uma célula comum, e th é uma célula de cabeçalho. thead, tbody e tfoot agrupam as linhas para que o cabeçalho possa ser repetido ou estilizado. Coloque o cabeçalho no início de cada linha, e garanta que cada linha tenha o mesmo número de células.

Células mescladas

colspan faz a célula ocupar várias colunas, e rowspan faz a célula ocupar várias linhas. Mesclar células é poderoso, mas dificulta a vida dos leitores de tela, então use apenas quando os dados exigirem.

Legenda e escopo

caption dá um título à tabela. scope no th indica se um cabeçalho descreve a linha ou a coluna, para que o leitor de tela possa ler cada valor junto com seu título.

Exemplo 31: Tabela básica

table, tr, th e td formam uma grade de dados.

<table>
  <tr><th>Nome</th><th>Nota</th></tr>
  <tr><td>Ana</td><td>91</td></tr>
  <tr><td>Bruno</td><td>78</td></tr>
</table>

Exemplo 32: Cabeçalho, corpo e rodapé da tabela

thead, tbody e tfoot agrupam as linhas com mais clareza.

<table>
  <thead><tr><th>Item</th><th>Qtd</th></tr></thead>
  <tbody>
    <tr><td>Caneta</td><td>3</td></tr>
  </tbody>
  <tfoot><tr><td>Total</td><td>3</td></tr></tfoot>
</table>

Exemplo 33: colspan e rowspan

Uma célula pode se estender por várias colunas ou linhas.

<table>
  <tr><th colspan="2">Vendas mensais</th></tr>
  <tr><td rowspan="2">Leste</td><td>120</td></tr>
  <tr><td>95</td></tr>
</table>

Exemplo 34: Legenda e escopo

caption dá título à tabela; scope indica se o cabeçalho é de linha ou de coluna.

<table>
  <caption>Resultados da turma</caption>
  <tr><th scope="col">Aluno</th><th scope="col">Conceito</th></tr>
  <tr><th scope="row">Mali</th><td>A</td></tr>
</table>

Tópico 5: Estrutura da página com elementos semânticos

Elementos semânticos nomeiam as partes da página: header, nav, main, article, aside e footer. Eles ajudam mecanismos de busca e tecnologias assistivas a encontrar o caminho.

Header, nav e footer

header contém o título e o logotipo do site. nav envolve o menu principal. footer contém direitos autorais e dados de contato. Uma página pode ter um header e um footer para o site inteiro, e mais headers dentro dos artigos.

Main, section e article

main contém o conteúdo principal, apenas uma vez por página. section agrupa conteúdo relacionado sob um título. article é uma parte que pode existir sozinha, como um post de blog ou uma notícia.

Aside, figure e details

aside contém conteúdo complementar relacionado. figure com figcaption agrupa uma imagem e sua legenda. details e summary criam uma caixa que pode ser aberta e fechada sem JavaScript.

Exemplo 35: Header e footer

header contém a área de título; footer contém a nota final.

<header>
  <h1>Meu blog</h1>
</header>
<footer>
  <p>&copy; 2026 Meu blog</p>
</footer>

Exemplo 36: Menu de navegação

nav envolve os links principais do site.

<nav>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/sobre">Sobre</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>

Exemplo 37: Main e section

main é o conteúdo principal; section agrupa conteúdo relacionado.

<main>
  <section>
    <h2>Recursos</h2>
    <p>Rápido, simples e gratuito.</p>
  </section>
</main>

Exemplo 38: Article e aside

article pode existir sozinho; aside é conteúdo complementar relacionado.

<article>
  <h2>Por que aprender HTML?</h2>
  <p>É a base de toda página web.</p>
</article>
<aside>
  <p>Relacionado: noções básicas de CSS</p>
</aside>

Exemplo 39: Figure e legenda

figure agrupa a imagem com seu figcaption.

<figure>
  <img src="ponte.jpg" alt="Uma ponte de aço ao pôr do sol">
  <figcaption>Ponte sobre o rio, 2026</figcaption>
</figure>

Exemplo 40: Details e summary

Caixa que pode ser recolhida por padrão, sem JavaScript.

<details>
  <summary>Ver horário de funcionamento</summary>
  <p>Segunda a sexta, das 8h às 18h.</p>
</details>

Tópico 6: Mídia: imagens, áudio, vídeo e incorporações

Elementos de mídia trazem imagens, sons e vídeos para a página. Cada um exige cuidado com velocidade, acessibilidade e suporte dos navegadores.

Imagens e imagens responsivas

img sempre precisa do texto alt. Informe width e height para que a página não se mova durante o carregamento. picture com elementos source escolhe arquivos diferentes para cada largura de tela, economizando dados no celular.

Áudio e vídeo

audio e video mostram seus próprios controles com o atributo controls. Forneça mais de um formato de origem, caso algum navegador não suporte um deles. poster mostra uma imagem antes de o vídeo começar. Não reproduza som automaticamente sem a escolha do leitor.

Incorporações e imagens vetoriais

iframe incorpora outra página, e deve ter um title para leitores de tela. svg desenha formas vetoriais que continuam nítidas em qualquer tamanho. canvas é uma área de bitmap onde o JavaScript desenha, adequada para jogos e gráficos.

Exemplo 41: Áudio

audio reproduz som com controles e uma fonte de reserva.

<audio controls preload="metadata">
  <source src="musica.mp3" type="audio/mpeg">
  <source src="musica.ogg" type="audio/ogg">
  Seu navegador não suporta áudio.
</audio>

Exemplo 42: Vídeo

video reproduz um clipe; poster mostra uma imagem antes de começar.

<video controls width="640" poster="miniatura.jpg">
  <source src="clipe.mp4" type="video/mp4">
  Seu navegador não suporta vídeo.
</video>

Exemplo 43: Imagem responsiva

picture escolhe o tamanho da imagem de acordo com a largura da tela.

<picture>
  <source media="(min-width: 800px)" srcset="destaque-grande.jpg">
  <img src="destaque-pequeno.jpg" alt="Lago entre montanhas">
</picture>

Exemplo 44: Página incorporada

iframe incorpora outra página web; title ajuda leitores de tela.

<iframe src="https://example.com" width="600" height="400" title="Site de exemplo" loading="lazy"></iframe>

Exemplo 45: SVG inline

svg desenha uma forma vetorial diretamente na página.

<svg width="120" height="120" viewBox="0 0 120 120" role="img" aria-label="Círculo vermelho">
  <circle cx="60" cy="60" r="50" fill="red"/>
</svg>

Exemplo 46: Desenhando em um canvas

canvas é uma área de desenho controlada pelo JavaScript.

<canvas id="quadro" width="300" height="150">Seu navegador não mostra o canvas.</canvas>
<script>
  const ctx = document.getElementById("quadro").getContext("2d");
  ctx.fillStyle = "teal";
  ctx.fillRect(10, 10, 80, 40);
</script>

Exemplo 47: Link de mapa

Link que abre um mapa em uma nova aba ou aplicativo.

<p><a href="https://maps.example.com/?q=Bangkok">Abrir mapa de Bangkok</a></p>

Exemplo 48: Progresso e medidor

progress mostra uma tarefa; meter mostra um valor em uma escala.

<label for="envio">Enviando</label>
<progress id="envio" value="70" max="100">70%</progress>
<meter min="0" max="100" value="62">62 de 100</meter>

Tópico 7: Adicionando CSS e seletores

O CSS é escrito como regras: o seletor escolhe os elementos, e as declarações definem as propriedades. O CSS pode ficar inline, dentro de um elemento style ou em um arquivo separado.

Onde o CSS fica

O atributo style vale para um único elemento. Um elemento style no head vale para a página inteira. Um arquivo .css separado, ligado com link, é o mais adequado para sites reais, porque um único arquivo estiliza todas as páginas.

Seletores básicos

p seleciona todos os parágrafos. .aviso seleciona elementos com essa classe. #cabecalho seleciona um único elemento com esse id. Use classes para estilos e ids para partes únicas. Evite estilizar só pelo nome da tag quando a página começar a crescer.

Combinadores, atributos e especificidade

O espaço seleciona descendentes, e > seleciona apenas os filhos diretos. Colchetes selecionam atributos como input[type="email"]. Quando duas regras entram em conflito, o seletor mais específico vence. Evite !important, a não ser como último recurso.

Exemplo 49: Folha de estilo interna

Um elemento style no head estiliza a página inteira.

<style>
  p { color: navy; }
  h1 { font-family: Georgia, serif; }
</style>
<h1>Título estilizado</h1>
<p>Este parágrafo é azul-marinho.</p>

Exemplo 50: Atributo style inline

O atributo style estiliza um único elemento.

<p style="color: crimson; font-size: 20px;">Vermelho e grande.</p>

Exemplo 51: Seletor de elemento

p seleciona todos os parágrafos da página.

<style>
  p { line-height: 1.6; }
</style>
<p>Todo parágrafo da página recebe esta altura de linha.</p>

Exemplo 52: Seletor de classe

O ponto seleciona elementos pelo nome da classe.

<style>
  .aviso { color: darkorange; font-weight: bold; }
</style>
<p class="aviso">Verifique o que você digitou.</p>

Exemplo 53: Seletor de id

O sinal de cerquilha seleciona um único elemento pelo id exclusivo.

<style>
  #cabecalho { background: #222; color: white; padding: 12px; }
</style>
<div id="cabecalho">Título do site</div>

Exemplo 54: Seletor de descendente e de filho

O espaço seleciona qualquer descendente; > seleciona apenas o filho direto.

<style>
  nav a { color: teal; }      /* qualquer link dentro de nav */
  nav > ul { margin: 0; }     /* apenas o ul filho direto */
</style>

Exemplo 55: Seletor de atributo e pseudoclasse

Colchetes selecionam atributos; dois-pontos selecionam estados como hover.

<style>
  input[type="email"] { border: 1px solid #888; }
  a:hover { text-decoration: underline; }
  li:first-child { font-weight: bold; }
</style>

Exemplo 56: Pseudoelemento e conteúdo gerado

::before adiciona conteúdo; ::first-line estiliza a primeira linha.

<style>
  p::first-line { font-variant: small-caps; }
  .preco::before { content: "THB "; }
</style>
<p class="preco">250</p>

Exemplo 57: Especificidade e !important

O seletor mais específico vence; !important sobrepõe as regras comuns.

<style>
  p { color: gray; }
  .nota { color: green; }
  #principal p { color: blue; }
  p { color: red !important; }
</style>

Tópico 8: Modelo de caixa, tamanho e display

Cada elemento é uma caixa. O conteúdo fica dentro do padding, que fica dentro da borda, que fica dentro da margem. Entender isso torna os espaçamentos e tamanhos previsíveis.

Largura, altura e max-width

Porcentagens fazem a caixa acompanhar o elemento pai. max-width limita o tamanho em telas largas. Se você define apenas a width de uma caixa que tem padding, ela ficará maior do que o esperado, a não ser que box-sizing esteja definido como border-box.

Padding, margem e borda

O padding é o espaço dentro da borda e recebe a cor de fundo. A margem é o espaço fora da borda e nunca tem fundo. A forma abreviada padding: 16px 24px define topo e base, depois esquerda e direita. As margens de blocos vizinhos podem se sobrepor.

Display e overflow

block ocupa uma linha inteira, inline fica dentro de uma linha de texto, e inline-block tem tamanho mas permanece na linha. none remove o elemento da página. overflow: auto adiciona barras de rolagem quando o conteúdo é grande demais.

Exemplo 58: Largura, altura e max-width

O tamanho pode ser fixo, relativo ou limitado.

<style>
  .caixa { width: 60%; max-width: 480px; height: 120px; }
</style>
<div class="caixa">Caixa responsiva</div>

Exemplo 59: Padding e margem

Padding é o espaço dentro da borda; margem é o espaço fora dela.

<style>
  .cartao { padding: 16px 24px; margin: 20px auto; background: #f4f6fb; }
</style>

Exemplo 60: Borda e box-sizing

box-sizing: border-box mantém o padding dentro da largura definida.

<style>
  .cartao { border: 2px solid #3366ff; box-sizing: border-box; width: 300px; padding: 20px; }
</style>

Exemplo 61: Display: inline, block, inline-block e none

display define como o elemento se posiciona no fluxo da página.

<style>
  .a { display: inline; }
  .b { display: inline-block; width: 80px; }
  .c { display: block; }
  .d { display: none; }
</style>

Exemplo 62: Overflow e rolagem

overflow define o que acontece quando o conteúdo é grande demais.

<style>
  .rolagem { height: 100px; overflow: auto; border: 1px solid #ccc; }
</style>
<div class="rolagem">Texto longo que precisa de uma barra de rolagem...</div>

Tópico 9: Propriedades de cor e texto

As propriedades de cor e texto determinam o quão fácil de ler e atraente é a página. Isso inclui formatos de cor, fontes, espaçamentos, alinhamento e decoração.

Formatos de cor

color define a cor do texto. Use nomes para casos simples, hex como #1e90ff, rgb ou hsl para mais controle, e rgba para adicionar transparência. Confira o contraste para o texto ser legível; a WCAG recomenda pelo menos 4,5 para 1 em texto comum.

Família, tamanho e peso da fonte

font-family lista fontes em ordem de preferência, terminando com uma família genérica como sans-serif. Unidades rem seguem o tamanho de fonte raiz, respeitando a configuração do leitor. font-weight 700 significa negrito.

Alinhamento, espaçamento e decoração

text-align centraliza ou alinha o texto. line-height 1.6 dá um espaçamento confortável para leitura. letter-spacing e word-spacing ajustam o espaço entre letras e palavras. text-decoration desenha linhas, text-transform altera maiúsculas e minúsculas, e text-shadow adiciona brilho. text-overflow: ellipsis corta textos longos com reticências.

Exemplo 63: Formatos de cor

Cores podem ser nomes, hex, rgb, hsl ou rgba com transparência.

<style>
  p.a { color: red; }
  p.b { color: #1e90ff; }
  p.c { color: rgb(255 140 0); }
  p.d { color: hsl(120 60% 40%); }
  p.e { color: rgba(0, 0, 0, 0.5); }
</style>

Exemplo 64: Família e tamanho da fonte

font-family lista fontes por preferência; rem segue o tamanho da raiz.

<style>
  body { font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; }
  h1 { font-size: 2.5rem; }
</style>

Exemplo 65: Peso e estilo da fonte

font-weight define a espessura; font-style define o itálico.

<style>
  .forte { font-weight: 700; }
  .inclinado { font-style: italic; }
</style>

Exemplo 66: Alinhamento do texto e altura de linha

text-align define o alinhamento; line-height define o espaço entre as linhas.

<style>
  .centro { text-align: center; line-height: 1.8; }
  .justificado { text-align: justify; }
</style>

Exemplo 67: Espaçamento entre letras e palavras

Espaçamento e maiúsculas mudam a aparência do texto.

<style>
  .titulo { letter-spacing: 0.15em; word-spacing: 0.3em; text-transform: uppercase; }
</style>

Exemplo 68: Decoração e sombra do texto

Linhas sublinhadas, cores e brilho no texto.

<style>
  .link { text-decoration: underline dotted red; }
  .brilho { text-shadow: 0 0 8px #ff8c00; }
</style>

Exemplo 69: Reticências no texto

Texto longo é cortado com reticências quando não cabe.

<style>
  .uma-linha {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }
</style>
<p class="uma-linha">Esta frase é longa demais para caber na caixa.</p>

Tópico 10: Fundos, bordas e efeitos visuais

Fundos podem ser cores, imagens ou gradientes. Bordas, cantos arredondados e sombras dão profundidade e forma às caixas.

Propriedades de fundo

background-color preenche com uma cor, background-image adiciona uma imagem, e background-size: cover preenche a caixa. background-position e background-repeat posicionam e repetem a imagem. Gradientes são imagens criadas a partir da mistura de cores.

Cantos e sombras

border-radius arredonda os cantos; o valor 50% transforma um quadrado em círculo. box-shadow adiciona uma sombra com deslocamento, desfoque e cor, e continua leve mesmo com desfoque grande.

Contorno e foco

outline é desenhado do lado de fora da borda e não altera o layout. Os navegadores o usam para mostrar o foco do teclado. Não remova o estilo de foco sem oferecer outra indicação de foco clara.

Exemplo 70: Cor e imagem de fundo

Cor, imagem, tamanho, posição e repetição do fundo.

<style>
  .destaque {
    background-color: #1b1f2a;
    background-image: url("padrao.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>

Exemplo 71: Gradientes

linear-gradient e radial-gradient desenham a mistura de cores.

<style>
  .por-do-sol { background: linear-gradient(to right, #ff7e5f, #feb47b); height: 80px; }
  .brilho { background: radial-gradient(circle, #fff, #36c); height: 80px; }
</style>

Exemplo 72: Raio da borda e sombra da caixa

Cantos arredondados e uma sombra suave embaixo da caixa.

<style>
  .botao {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    padding: 10px 18px;
  }
</style>

Exemplo 73: Contorno e borda tracejada

outline mostra o foco; os estilos de borda incluem o tracejado.

<style>
  input:focus { outline: 3px solid #3366ff; outline-offset: 2px; }
  .tracejado { border: 2px dashed #888; }
</style>

Tópico 11: Posicionamento e empilhamento

A propriedade position tira um elemento do fluxo normal. Combinada com z-index, ela controla qual elemento fica por cima.

Relative e absolute

relative mantém o elemento no lugar, mas permite deslocá-lo com top, left e outras propriedades. absolute o retira do fluxo e o posiciona em relação ao ancestral posicionado mais próximo. Defina position: relative no pai para ancorar os filhos.

Fixed e sticky

fixed permanece no mesmo lugar da tela ao rolar a página, adequado para menus e banners de cookies. sticky rola normalmente até atingir a borda e então fica preso ali.

Camadas com z-index

z-index controla a ordem de empilhamento de elementos posicionados. Números maiores ficam por cima de números menores no mesmo contexto de empilhamento. Um erro comum é aumentar o z-index para 9999 quando o problema real está no contexto de empilhamento do pai.

Exemplo 74: Posição relative e absolute

relative mantém o espaço; absolute é posicionado em relação a um pai posicionado.

<style>
  .pai { position: relative; height: 150px; }
  .selo { position: absolute; top: 8px; right: 8px; }
</style>
<div class="pai"><span class="selo">Novo</span></div>

Exemplo 75: Posição fixed e sticky

fixed fica na tela; sticky gruda ao rolar.

<style>
  .barra-topo { position: sticky; top: 0; background: white; }
  .canto { position: fixed; bottom: 16px; right: 16px; }
</style>

Exemplo 76: Camadas com z-index

z-index define qual elemento é desenhado por cima.

<style>
  .atras { position: absolute; z-index: 1; }
  .frente { position: absolute; z-index: 2; }
</style>

Tópico 12: Layout com flexbox e grid

Flexbox organiza itens em uma linha, e grid os organiza em linhas e colunas. Os dois substituem os métodos antigos baseados em float e tabelas.

Fundamentos do flexbox

display: flex transforma os filhos em itens flex em uma única linha. justify-content os alinha ao longo do eixo principal, e align-items os alinha no eixo transversal. gap define o espaço entre os itens sem usar margens.

Tamanho e quebra no flex

flex: 1 dá a cada item uma parte igual do espaço livre. flex-basis é o tamanho inicial. flex-wrap: wrap move os itens para uma nova linha quando não há espaço, o que facilita criar listas de cartões responsivas.

Colunas e áreas do grid

grid-template-columns define as trilhas das colunas; 1fr significa uma parte do espaço livre. repeat(auto-fit, minmax(160px, 1fr)) cria colunas que se ajustam à largura. grid-template-areas dá nomes às áreas do layout da página.

Exemplo 77: Flexbox com space-between

O flexbox posiciona os itens em uma linha ou coluna, aqui com espaço entre eles.

<style>
  .barra { display: flex; justify-content: space-between; align-items: center; }
</style>
<div class="barra"><span>Logotipo</span><nav>Menu</nav></div>

Exemplo 78: Flex grow, shrink e basis

flex define como os itens dividem o espaço livre.

<style>
  .linha { display: flex; gap: 12px; }
  .linha > div { flex: 1 1 0; }
  .linha > .largo { flex: 2 1 0; }
</style>

Exemplo 79: Quebra de linha no flex para cartões

flex-wrap move os cartões para a linha seguinte quando não há espaço.

<style>
  .cartoes { display: flex; flex-wrap: wrap; gap: 16px; }
  .cartoes > div { flex: 0 1 220px; }
</style>

Exemplo 80: Flex em coluna e order

flex-direction muda o eixo; order muda a ordem dos itens.

<style>
  .pilha { display: flex; flex-direction: column; }
  .pilha > .ultimo { order: -1; }
</style>

Exemplo 81: Colunas do grid

grid-template-columns define a largura das colunas do grid.

<style>
  .grade { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
</style>
<div class="grade"><div>A</div><div>B</div><div>C</div></div>

Exemplo 82: Áreas do template de grid

Dê nomes às áreas do layout e posicione os itens pelo nome.

<style>
  .pagina {
    display: grid;
    grid-template-areas: "cabeca cabeca" "lateral principal" "rodape rodape";
    grid-template-columns: 200px 1fr;
  }
  .cabeca { grid-area: cabeca; }
  .lateral { grid-area: lateral; }
  .principal { grid-area: principal; }
  .rodape { grid-area: rodape; }
</style>

Exemplo 83: Grid responsivo com auto-fit

minmax e auto-fit criam colunas que se ajustam à largura.

<style>
  .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
</style>

Exemplo 84: Centralizando com place-items

place-items centraliza os itens dentro da célula do grid.

<style>
  .caixa { display: grid; place-items: center; height: 200px; }
</style>

Tópico 13: Design responsivo, movimento e efeitos

Uma página responsiva se adapta a qualquer tela. Movimento e efeitos deixam a interação mais clara, mas devem ser suaves e respeitar as preferências do leitor.

Media queries

@media (max-width: 600px) aplica regras apenas em telas estreitas. Projete primeiro para o celular e depois acrescente layouts mais largos com min-width. Use unidades relativas para que o texto cresça de acordo com a configuração do leitor.

Transições e transformações

transition anima mudanças como a cor ao passar o mouse, com duração em segundos. transform desloca, gira ou amplia um elemento sem alterar o layout ao redor.

Keyframes, filtros e recorte

@keyframes define as etapas de uma animação, e animation a executa; infinite a repete. Respeite o movimento reduzido com a media query prefers-reduced-motion. filter adiciona desfoque ou tons de cinza, e clip-path recorta o elemento em uma forma.

Exemplo 85: Media query

@media aplica regras somente quando a tela atende a uma condição.

<style>
  .menu { display: flex; }
  @media (max-width: 600px) {
    .menu { flex-direction: column; }
  }
</style>

Exemplo 86: Transição ao passar o mouse

transition anima a mudança de um estado para outro.

<style>
  .botao { background: #3366ff; transition: background-color 0.3s ease, transform 0.3s; }
  .botao:hover { background: #1f4fd8; transform: translateY(-2px); }
</style>

Exemplo 87: Transform

rotate, scale e translate deslocam ou alteram o elemento sem mudar o layout.

<style>
  .girar { transform: rotate(45deg); }
  .aumentar { transform: scale(1.2); }
  .mover { transform: translate(40px, 10px); }
</style>

Exemplo 88: Animação com keyframes

@keyframes define as etapas; animation as executa.

<style>
  @keyframes pulsar {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  .ponto { animation: pulsar 1.5s ease-in-out infinite; }
</style>

Exemplo 89: Opacidade e visibilidade

opacity controla a transparência; visibility oculta mas mantém o espaço.

<style>
  .apagado { opacity: 0.4; }
  .oculto-com-espaco { visibility: hidden; }
  .sumido { display: none; }
</style>

Exemplo 90: Efeito de filtro

filter altera as cores e o desfoque de um elemento.

<style>
  .foto { filter: grayscale(100%) blur(1px); }
  .claro { filter: brightness(1.2) contrast(1.1); }
</style>

Exemplo 91: Cursor e user-select

cursor muda o ponteiro do mouse; user-select impede a seleção de texto.

<style>
  .clicavel { cursor: pointer; }
  .sem-selecao { user-select: none; }
</style>

Exemplo 92: Clip path

clip-path recorta o elemento em uma forma.

<style>
  .triangulo { width: 120px; height: 120px; background: tomato; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
</style>

Tópico 14: CSS moderno, acessibilidade e interação

O CSS moderno inclui variáveis e novas unidades. Acessibilidade faz a página ser usada por todos, incluindo quem usa teclado ou leitor de tela. Pequenos scripts acrescentam interação.

Propriedades personalizadas e proporção

Uma variável declarada como --marca em :root é reutilizada com var(--marca), então uma única alteração atualiza o site inteiro. aspect-ratio mantém a caixa em uma proporção específica, e object-fit: cover a preenche com a imagem sem distorção.

Formulários e estados acessíveis

Rótulos, textos alt e papéis ARIA como role="alert" informam aos leitores de tela o significado de algo. Um link para pular ajuda quem usa teclado a passar por menus longos. tabindex pode adicionar foco, mas evite valores positivos. :invalid e :disabled estilizam estados sem depender apenas da cor.

Atributos de dados, scripts e diálogos

Atributos data-* guardam pequenos valores em um elemento, e o JavaScript os lê pelo dataset. addEventListener executa código ao clicar. O elemento dialog abre uma janela modal com showModal, e o navegador cuida do foco e da tecla Esc.

Exemplo 93: Propriedades personalizadas do CSS

Variáveis como --marca são reutilizadas em toda a folha de estilo.

<style>
  :root { --marca: #3366ff; --espaco: 16px; }
  .botao { background: var(--marca); padding: var(--espaco); }
</style>

Exemplo 94: Proporção e object-fit

aspect-ratio mantém a forma; object-fit encaixa a imagem dentro dela.

<style>
  .miniatura { width: 300px; aspect-ratio: 16 / 9; }
  .miniatura img { width: 100%; height: 100%; object-fit: cover; }
</style>

Exemplo 95: Listas e contadores

list-style define marcadores e números; ::before adiciona ícones.

<style>
  ol.passos { list-style-type: decimal; padding-left: 2em; }
  ul.marcado { list-style: none; }
  ul.marcado li::before { content: "✔ "; }
</style>

Exemplo 96: Estados de formulário

:invalid e :disabled mudam a aparência dos campos.

<style>
  input:invalid { border-color: red; }
  input:disabled { background: #eee; cursor: not-allowed; }
</style>
<input required><input disabled>

Exemplo 97: Acessibilidade: alt, rótulo e ARIA

Rótulos, textos alt e papéis ARIA ajudam leitores de tela.

<img src="logo.png" alt="Logotipo da empresa">
<button aria-label="Fechar diálogo">&times;</button>
<div role="alert">Seu arquivo foi salvo.</div>

Exemplo 98: Ordem de tabulação e link para pular

O link para pular leva o foco ao conteúdo; tabindex define a ordem do foco.

<a href="#conteudo" class="pular">Pular para o conteúdo</a>
<div tabindex="0">Painel focável</div>
<main id="conteudo">Conteúdo principal</main>

Exemplo 99: Atributos de dados e um pequeno script

data-* guarda valores; o JavaScript os lê e atualiza.

<button id="curtir" data-count="3">Curtir</button>
<script>
  const btn = document.getElementById("curtir");
  btn.addEventListener("click", () => {
    const n = Number(btn.dataset.count) + 1;
    btn.dataset.count = n;
    btn.textContent = "Curtido (" + n + ")";
  });
</script>

Exemplo 100: Elemento dialog

dialog cria uma janela pop-up com formulário modal.

<dialog id="confirmar">
  <p>Excluir este arquivo?</p>
  <form method="dialog">
    <button value="cancel">Cancelar</button>
    <button value="ok">Excluir</button>
  </form>
</dialog>
<button onclick="document.getElementById('confirmar').showModal()">Abrir</button>

Projeto de prática: página de perfil pessoal

Crie uma página que use as ideias de cada seção. Escreva primeiro do zero, depois compare com os exemplos.

1. Crie index.html com doctype, atributo lang, charset, meta viewport e title.

2. Adicione um header com seu nome, um nav com três links, uma seção main com título e parágrafos, e um footer.

3. Adicione um formulário com campos de nome, e-mail (type email, required) e mensagem (textarea), todos com rótulo, e um botão de envio.

4. Crie um elemento style que defina a pilha de fontes, um fundo com gradiente, um contêiner com max-width e padding, e um cartão com border-radius e box-shadow.

5. Transforme os links em itens flex com gap, e adicione uma media query que os empilhe em telas com menos de 600px.

6. Adicione um botão com transição ao passar o mouse, e um dialog que confirme que a mensagem foi enviada.

Próximos passos

Em seguida, aprenda JavaScript para que a página reaja ao leitor, depois um framework CSS ou um pré-processador se quiser estilizar mais rápido, e por fim ferramentas que verificam sua página quanto a acessibilidade e velocidade. Cada exemplo deste artigo é um trecho simples, então teste cada um nas ferramentas de desenvolvedor do navegador.

Resumo

O HTML constrói a estrutura da página com elementos semânticos, texto, listas, links, formulários, tabelas e mídia. O CSS dá estilo com seletores e o modelo de caixa, propriedades de cor e texto, fundos e bordas, posicionamento, flexbox, grid, regras responsivas, transições e animações. Acessibilidade e rótulos claros mantêm a página utilizável por todos. A melhor forma de lembrar esses 100 exemplos é criar uma página, mudar uma propriedade de cada vez e ver o resultado.