1. A Mágica do CSS: A Roupa e o Uniforme do seu Site

Até agora, você aprendeu a colocar informações no navegador usando o HTML: títulos <h1>, parágrafos <p>, fotos <img> e caixas organizadoras <div>. Mas repare: todas as páginas vinham com fundo branco padrão, letras pretas e fonte sem graça!

É aqui que entra o grande parceiro do HTML: o CSS (sigla em inglês para Cascading Style Sheets, ou Folhas de Estilo em Cascata).

Laboratório Interativo: Veja a Mesma Página Com e Sem CSS!

Clique nos botões abaixo para ver instantaneamente a mágica de vestir o site:

1. Sem CSS (HTML Cru no Navegador) 2. Com CSS LiraCode (Uniforme Completo!)

PROJETO LIRACODE

Aprender tecnologia com sabedoria, cibersegurança e pensamento de criador.

Estudante do Futuro

2. As Primeiras Propriedades Mágicas do CSS

No CSS, conversamos com o navegador através de uma fórmula muito simples e lógica:

seletor {
  propriedade: valor;
}

1. Seletor: Quem você quer enfeitar? Exemplo: body, h1, p ou img.
2. Chaves { }: A mala de roupas onde você guarda as instruções de estilo.
3. Propriedade: O que você quer mudar? (A cor? O alinhamento? A borda?).
4. Ponto e Vírgula (;): O cadeado obrigatório que avisa ao navegador que aquela linha terminou!

A) `background-color`: A Cor de Fundo da Tela

Muda a cor de trás de qualquer elemento. Quando aplicada ao body, muda o fundo do site inteiro! Você pode usar nomes em inglês ou os códigos hexadecimais (com #):

body {
  background-color: #0a0f1d;
}

B) `color`: A Cor das Letras do Texto

Cuidado com a pegadinha: no CSS, a palavra color muda a cor das letras (títulos, frases e parágrafos), e NÃO a cor de fundo!

h1 {
  color: #eab308; /* Título em Dourado */
}

p {
  color: #f8fafc; /* Texto das frases em Branco Nobre */
}

C) `text-align: center;`: Centralizando no Meio da Tela

Por padrão, o navegador joga tudo colado no canto esquerdo. Para deixar seu site com cara de revista ou portal oficial, usamos a centralização:

D) `border-radius`: Cantos Arredondados e Moedas de Avatar!

Por padrão, toda foto na web é quadrada com pontas duras de 90 graus. O border-radius é o truque de mágica que amacia as pontas ou transforma sua foto em um círculo perfeito!

border-radius: 0px;

Quadrada padrão com cantos vivos.

border-radius: 16px;

Cantos suaves e modernos.

border-radius: 50%;

Moeda perfeita de avatar!

3. Jeito 1: CSS Interno (A Tag <style> na <head>)

O jeito mais rápido de começar no Bloco de Notas sem precisar criar outro arquivo é o CSS Interno. Nós abrimos a tag especial <style> bem no topo do nosso HTML, dentro da tag <head>.

Veja a anatomia completa de um arquivo HTML puro com estilo interno:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Primeira Página com Estilo | LiraCode</title>

  <!-- O CSS INTERNO FICA AQUI DENTRO DO HEAD -->
  <style>
    body {
      background-color: #0a0f1d;
      color: #f8fafc;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #eab308;
      text-align: center;
    }

    p {
      text-align: center;
      color: #cbd5e1;
      font-size: 18px;
    }

    img {
      width: 150px;
      border-radius: 50%;
      border: 3px solid #eab308;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>

  <h1>Bem-vindo ao Meu Site!</h1>
  <p>Esta página foi estilizada com código CSS feito no Bloco de Notas.</p>
  <img src="avatar.png" alt="Meu Avatar">

</body>
</html>

O CSS interno é excelente para testar pequenas ideias, mas tem uma limitação: se você tiver 10 páginas HTML, teria que copiar e colar o mesmo código nas 10! Por isso, os profissionais usam o Jeito 2.

4. Jeito 2: CSS Externo (O Padrão Profissional com `style.css`)

Em empresas de tecnologia, sites de jogos e em projetos de cibersegurança, os programadores separam as coisas em dois arquivos diferentes dentro da mesma pasta:

A Tag Mágica de Conexão: `<link>`

Para conectar o seu HTML ao seu arquivo CSS, basta colar esta linha mágica dentro da tag <head>:

<link rel="stylesheet" href="style.css">

• rel="stylesheet": Avisa ao navegador: "Ei, estou conectando uma Folha de Estilo!"
• href="style.css": Diz o nome do arquivo que mora na mesma pasta.

5. Mini-Laboratório: Desafio de Sábado!

Chegou a hora de colocar a mão na massa! O desafio de hoje para Enzo, Paulo Henrique, Jennifer, Ana Luiza, Isabely e Elaine é abrir a pasta do seu projeto e vestir a sua ficha pessoal com uniforme completo.

Modelo Pronto para o seu Arquivo `style.css`:

/* ESTILO NOBRE LIRACODE - AULA 06 */

body {
  background-color: #0a0f1d; /* Azul noite profundo */
  color: #f8fafc;           /* Letras brancas com alto contraste */
  font-family: Arial, sans-serif;
  padding: 30px;
}

h1 {
  color: #eab308;           /* Dourado Imperial */
  text-align: center;
  font-size: 32px;
}

h2 {
  color: #fde047;           /* Dourado Claro */
  text-align: center;
}

p {
  color: #cbd5e1;           /* Cinza claro para leitura agradável */
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}

img {
  width: 140px;
  height: 140px;
  border-radius: 50%;       /* Transforma em moeda de avatar! */
  border: 3px solid #eab308;/* Borda dourada de brasão */
  display: block;
  margin: 20px auto;        /* Centraliza a imagem no meio */
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.4);
}