📘 Aula 26: Aplicando CSS Interno/Local 📘

O que é CSS Interno/Local?

CSS interno ou local é quando os estilos são aplicados diretamente dentro de uma página HTML, usando a tag <style> no <head>. Isso permite que cada página tenha um estilo específico e independente de outros arquivos, tornando a alteração mais rápida e prática em projetos pequenos ou testes.

Exemplo Prático:

<head>
  <style>
    body {
      background-color: antiquewhite;
      font-family: Arial, sans-serif;
      text-align: justify;
      color: #333;
    }
    h1 { color: blue; text-align: center; }
    h2 { color: green; }
    p { margin-bottom: 16px; }
  </style>
</head>

Esse exemplo mostra como aplicar diferentes estilos para body, títulos e parágrafos diretamente no documento HTML, sem depender de CSS externo.

Dicas Profissionais:

Estrutura e Visualização de Estrutura

É possível definir estilos individuais para cada tipo de título (<h1>, <h2>, <h3>) e parágrafo (<p>). Além de cores, é possível controlar alinhamento, margens, padding e espessura de borda para cada elemento.

Exemplo Visual:

Este parágrafo está estilizado com CSS interno! (verde) 
div { background-color:#4cffb3; color:#000; text-align:center; padding:12px; border-radius:6px; }

Aplicando Cores e Destaques

As cores ajudam a organizar visualmente a página. Utilize verde para destacar conceitos importantes e amarelo para observações, tornando o conteúdo mais didático e fácil de memorizar.

Exemplo Prático:

CSS interno é rápido para pequenas páginas.
Use marcação para destacar informações importantes. 
<p>CSS <mark class="verde">interno</mark> é rápido para pequenas páginas.</p>

<p>Use <mark class="amarelo">marcação</mark> para destacar informações importantes.</p>

Comparando CSS: Interno x Externo x Inline

Tipo Vantagens Desvantagens
Interno/Local Rápido para páginas únicas, fácil de testar Dificulta manutenção em projetos grandes, não reutilizável
Externo Reutilizável em várias páginas, fácil de manter Depende de arquivo separado, alterações rápidas exigem recarregar o CSS
Inline Alteração imediata no elemento, útil para testes rápidos Dificulta manutenção, repete código e polui o HTML

Boas Práticas:

Prós e Contras do CSS Interno/Local

Prós:

Contras:

Créditos e Referências

Gustavo Guanabara

Curso recomendado: CURSO EM VÍDEO com Gustavo Guanabara

Aula referente ao conteúdo acima → Aula no Curso em vídeo