Guia de HTML e CSS

<h1> a <h6>: títulos

Seis níveis de título, do mais importante (h1) ao menos importante (h6). Use só um h1 por página e não pule níveis só por causa do tamanho: o tamanho se ajusta no CSS.

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

<p>: parágrafo

Bloco de texto. O navegador coloca um espaço antes e depois de cada parágrafo.

<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

<strong>, <em>, <mark>, <small>

strong indica importância (negrito), em indica ênfase (itálico), mark destaca e small é para observações menores.

<p>Isto é <strong>importante</strong>, isto tem <em>ênfase</em>,
isto está <mark>destacado</mark> e <small>isto é nota</small>.</p>

<br> e <hr>: quebra de linha e divisória

Duas tags vazias (sem fechamento). br pula uma linha dentro do mesmo texto; hr desenha uma linha separando assuntos.

<p>Rua das Flores, 123<br>São Paulo - SP</p>
<hr>
<p>Outro assunto.</p>

<blockquote>: citação

Usado para citações longas, normalmente com recuo.

<blockquote>
    A simplicidade é o último grau de sofisticação.
</blockquote>

<code> e <pre>: código

code marca um trecho de código dentro do texto. pre mantém espaços e quebras de linha exatamente como foram digitados. Para mostrar < e > na tela, escrevemos < e >.

<p>Use a tag <code>&lt;p&gt;</code> para parágrafos.</p>

<span> e <div>: contêineres genéricos

Não têm significado próprio; servem para agrupar e estilizar. span é inline (fica dentro da linha), div é bloco (ocupa a linha inteira).

<p>Texto com uma <span class="azul">palavra azul</span>.</p>
<div class="caixa">Eu sou uma div.</div>

<a>: link (âncora)

O atributo href diz para onde o link leva: outro site, outra página do projeto, um e-mail ou uma seção da mesma página (com #id). target="_blank" abre em nova aba.

<a href="https://developer.mozilla.org" target="_blank">Documentação MDN</a>
<a href="contato.html">Página de contato</a>
<a href="#estrutura">Voltar para Estrutura</a>

<img>: imagem

Tag vazia. src é o caminho da imagem e alt é o texto alternativo, lido por leitores de tela e mostrado se a imagem não carregar. Sempre preencha o alt.

<img src="img/foto.jpg" alt="Descrição da foto" width="300">

Resultado

<figure> e <figcaption>: imagem com legenda

Agrupa uma imagem (ou gráfico, código...) com sua legenda.

<figure>
    <img src="img/grafico.png" alt="Gráfico de vendas">
    <figcaption>Figura 1: vendas do ano.</figcaption>
</figure>

<ul>, <ol> e <li>

ul é lista sem ordem (marcadores), ol é lista numerada. Cada item fica em um li. Menus de navegação costumam ser feitos com ul.

<ul>
    <li>Arroz</li>
    <li>Feijão</li>
</ul>

<ol>
    <li>Abrir o editor</li>
    <li>Criar o arquivo</li>
</ol>

<table>, <tr>, <th>, <td>

Para dados em linhas e colunas (não use tabela para montar layout). tr é uma linha, th é célula de cabeçalho e td é célula comum. thead e tbody separam cabeçalho e corpo.

<table>
    <thead>
        <tr><th>Tag</th><th>Função</th></tr>
    </thead>
    <tbody>
        <tr><td>p</td><td>Parágrafo</td></tr>
        <tr><td>a</td><td>Link</td></tr>
    </tbody>
</table>

<form>, <label>, <input>, <textarea>, <select>, <button>

form agrupa os campos. label é o rótulo: o for dele deve ser igual ao id do campo (clicar no rótulo foca o campo). input muda conforme o type: text, email, password, number, date, checkbox, radio... textarea é texto longo, select é lista de opções e button é o botão.

<form>
    <label for="nome">Nome</label>
    <input type="text" id="nome" placeholder="Seu nome" required>

    <label for="email">E-mail</label>
    <input type="email" id="email">

    <label for="curso">Curso</label>
    <select id="curso">
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>

    <label for="msg">Mensagem</label>
    <textarea id="msg" rows="3"></textarea>

    <label><input type="checkbox"> Aceito os termos</label>

    <button type="submit">Enviar</button>
</form>

Anatomia de uma regra

Uma regra tem um seletor (quem vai receber o estilo) e um bloco entre chaves com pares propriedade: valor;.

p {
    color: navy;          /* cor do texto */
    font-size: 18px;     /* tamanho da fonte */
}

■ seletor   ■ propriedade   ■ valor   ■ comentário

Três formas de aplicar CSS

<!-- 1. Externo (recomendado): arquivo separado, ligado no <head> -->
<link rel="stylesheet" href="css/style.css">

<!-- 2. Interno: dentro de <style> no <head> -->
<style>
    p { color: navy; }
</style>

<!-- 3. Inline: direto no atributo style (evite) -->
<p style="color: navy;">Texto</p>

Prefira o externo: um único arquivo estiliza todas as páginas do site e mantém o HTML limpo.

Exemplo: classe + :hover

.botao {
    background-color: #3451b2;
    color: white;
}
.botao:hover {
    background-color: #263c86;   /* escurece ao passar o mouse */
}

Formas de escrever cores

Aqui usamos style="" inline só para mostrar cada cor; no dia a dia, prefira classes.

Unidades de medida

px

Pixels: tamanho fixo.

%

Porcentagem do elemento pai.

rem

Relativo ao tamanho da fonte da raiz (normalmente 16px). 2rem = 32px. Ótimo para fontes e espaçamentos.

em

Relativo ao tamanho da fonte do próprio elemento.

vw / vh

1% da largura / altura da janela.

Propriedades de texto

.texto {
    font-family: Arial, sans-serif;  /* fonte (com alternativas) */
    font-size: 1.25rem;              /* tamanho */
    font-weight: bold;               /* espessura: normal, bold, 100 a 900 */
    color: #3451b2;                  /* cor */
    text-align: center;              /* left, center, right, justify */
    line-height: 1.6;                /* altura da linha */
    text-transform: uppercase;       /* MAIÚSCULAS */
    text-decoration: underline;      /* sublinhado (none remove) */
}

display

Define como o elemento se comporta no fluxo da página.

block

Ocupa a linha inteira (ex.: div, p, h1).

inline

Fica na mesma linha do texto; não aceita largura/altura (ex.: span, a).

inline-block

Fica na linha, mas aceita largura, altura e padding.

none

Esconde o elemento.

flex / grid

Transformam o elemento em um contêiner de layout (abaixo).

Flexbox: alinhando em uma direção

Organiza os filhos em linha ou coluna. É a ferramenta mais usada para alinhar menus, cards e botões.

.flex {
    display: flex;
    flex-direction: row;             /* row (linha) ou column (coluna) */
    justify-content: space-between;  /* alinhamento no eixo principal */
    align-items: center;             /* alinhamento no eixo cruzado */
    gap: 12px;                       /* espaço entre os itens */
}

Grid: linhas e colunas ao mesmo tempo

Cria uma grade. fr é uma fração do espaço livre: 1fr 1fr 1fr = três colunas iguais.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;   /* 3 colunas iguais */
    gap: 12px;
}
.grid .largo {
    grid-column: span 2;                  /* ocupa 2 colunas */
}

Media queries

Aplicam estilos só quando a tela atende a uma condição. Assim o mesmo site se adapta a celular, tablet e computador. Diminua a janela e veja o menu e as grades desta página se reorganizarem.

/* Celular primeiro: estilo padrão para telas pequenas */
.cards { display: grid; grid-template-columns: 1fr; }

/* A partir de 768px de largura: 3 colunas */
@media (min-width: 768px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
}

Variáveis CSS (custom properties)

Guardam valores para reaproveitar. Mudando em um lugar, muda no site inteiro. O style.css desta página usa variáveis para as cores.

:root {
    --cor-primaria: #3451b2;
}
.botao {
    background-color: var(--cor-primaria);
}