HTML moderno: estrutura, semântica e acessibilidade
HTML estrutura o conteúdo; CSS controla cores, tipografia, espaçamento e layout. Separar essas responsabilidades torna o projeto mais fácil de manter, reutilizar e testar. Para a maior parte dos sites, uma folha externa é a escolha principal.
Folha externa
Use <link> no head. O navegador pode armazenar o arquivo em cache e diversas páginas compartilham as mesmas regras.
<link rel="stylesheet" href="/assets/css/site.css">CSS interno e inline
Um bloco <style> pode ser útil em protótipos, documentos isolados ou CSS crítico bem controlado. O atributo style tem alta prioridade e dificulta reutilização; reserve-o para valores realmente dinâmicos quando uma classe ou propriedade personalizada não resolver melhor.
<style>n .card { padding: 1rem; border-radius: .75rem; }n</style>n<article class="card">...</article>Cascata e manutenção
A cascata considera origem, camada, importância, especificidade e ordem. Prefira seletores simples baseados em classes, organize tokens com propriedades personalizadas e evite aumentar especificidade como resposta automática. O HTML deve continuar semântico mesmo quando os estilos falham.
Checklist de qualidade
- O CSS reutilizável está em arquivo externo?
- As classes descrevem componentes ou estados sem depender da tag?
- A página continua organizada sem a folha de estilo?
Pratique agora
Crie um arquivo styles.css, conecte-o ao documento e estilize uma classe de cartão. Compare com a mesma regra escrita inline.
