CodificaEstilo

Tudo sobre HTML e CSS em português de Portugal — tutoriais, dicas e novidades.

Explorar

Conceitos básicos de Flexbox

15 nov 2024 · MDN Web Docs

O Flexbox (CSS Flexible Box Layout) foi criado para distribuir espaço e alinhar elementos em containers, mesmo quando o tamanho dos itens é desconhecido ou dinâmico. Ele substitui “hacks” baseados em float e tabelas e hoje é suportado por todos os navegadores modernos.

Principais conceitos

Flex Container — o elemento pai com display:flex (ou inline-flex).
Main Axis — eixo principal onde os itens são distribuídos (row ou column).
Cross Axis — eixo perpendicular ao main axis.
Flex Items — filhos diretos do container que podem crescer, encolher ou ter largura fixa.

Sintaxe mínima

.container {
  display: flex;          /* ativa o modelo flex */
  flex-direction: row;    /* eixo principal horizontal (padrão) */
  gap: 1rem;              /* espaçamento entre itens */
}
.item {
  flex: 1 1 200px;        /* grow | shrink | basis */
}

Consulte a lista completa de propriedades (justify-content, align-items, flex-wrap, etc.) e exemplos interativos na MDN.

Ler artigo completo

HTML semântico: o que é e por que importa?

08 set 2023 · MDN Web Docs

Marcação semântica significa escolher elementos HTML que descrevem o propósito do conteúdo, não apenas seu visual. Cabeçalhos, rodapés, barras laterais e seções de navegação ficam mais acessíveis para leitores de ecrã e motores de busca.

Elementos essenciais

<header> — topo da página ou secção.
<nav> — grupo de links de navegação.
<main> — conteúdo principal, único por página.
<article> — bloco independente, como um post.
<section> — agrupamento temático de conteúdo.
<aside> — conteúdo complementar (sidebar).
<footer> — rodapé de página ou secção.

Trecho semântico simplificado

<article>
  <header>
    <h1>Título</h1>
    <p>Publicado em 22 mai 2025</p>
  </header>

  <p>Texto do artigo…</p>

  <footer>
    <address>Autor: Ana Pais</address>
  </footer>
</article>

Ler artigo completo

Introdução ao CSS Grid Layout

10 mai 2024 · MDN Web Docs

O CSS Grid é um sistema bidimensional que permite criar layouts em linhas e colunas, algo que Flexbox, unidimensional, não cobre tão bem. Definindo áreas, faixas e lacunas, é possível montar páginas complexas com poucas regras e sem dependência de floats ou frameworks.

Conceitos essenciais

Grid Container — elemento pai com display:grid.
Grid Items — filhos diretos que ocupam células.
Grid Lines — linhas horizontais e verticais que formam o padrão.
Tracks — faixas entre duas linhas adjacentes (colunas ou linhas).
Areas — regiões nomeadas compostas por várias células.

Sintaxe mínima

.wrapper {
  display: grid;                   /* ativa o Grid */
  grid-template-columns: 1fr 2fr;  /* duas colunas */
  gap: 1rem;                       /* distância entre células */
}
.header { grid-column: 1 / -1; }   /* ocupa toda a largura */

Veja mais exemplos, propriedades (grid-template-areas, auto-fit/auto-fill, alinhamento) e demonstrações interativas na MDN.

Ler artigo completo

Últimos artigos

Seleção de tutoriais recentes dos portais MDN Web Docs sobre HTML e CSS.

Semântica: o que é e por que importa

08 set 2023 · MDN Web Docs

Como as tags semânticas melhoram acessibilidade, SEO e manutenção do seu código.

Ler

Pseudo-classes modernas (:has, :is, :where)

02 fev 2025 · MDN Web Docs

Visão geral das novas pseudo-classes de CSS com exemplos práticos de uso.

Ler

Introdução ao CSS Grid Layout

10 mai 2024 · MDN Web Docs

Sistema bidimensional para criar layouts em linhas e colunas de forma simples.

Ler

Ver arquivo completo

Contacto

Ana Maria Gomes Caramelo Pais
Quinta Alvito, Monte Verde Shopping Lj. 53
Covilhã, Castelo Branco, Portugal
Tel: +351 275 325 988
Email: [email protected]