Deixando Bonito com CSS

HTML estrutura, CSS embeleza. Vamos transformar páginas sem graça em algo incrível!

O que é CSS?

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).

CSS define:

Cores
Fontes
Tamanhos
Espaçamentos
Layout
Animações

Como adicionar CSS?

Método 1: Tag style (no head)

html

<!DOCTYPE html><html><head>    <title>Minha Página</title>    <style>        h1 {            color: blue;        }    </style></head><body>    <h1>Título Azul!</h1></body></html>

Método 2: Arquivo externo (recomendado)

Crie um arquivo style.css:

css

h1 {    color: blue;}

Conecte no HTML:

html

<head>    <title>Minha Página</title>    <link rel="stylesheet" href="style.css"></head>

Sintaxe do CSS

css

seletor {    propriedade: valor;    propriedade: valor;}

Exemplo:

css

h1 {    color: blue;    font-size: 32px;}

Seletores básicos

Por tag

css

p {    color: gray;}

Afeta TODOS os <p>.

Por classe

css

.destaque {    background-color: yellow;}

No HTML:

html

<p class="destaque">Texto destacado!</p>

Por ID

css

#titulo-principal {    font-size: 48px;}

No HTML:

html

<h1 id="titulo-principal">Título</h1>

Cores

Por nome

css

color: red;color: blue;color: green;

Hexadecimal

css

color: #FF0000;  /* vermelho */color: #00FF00;  /* verde */color: #0000FF;  /* azul */color: #333333;  /* cinza escuro */

RGB

css

color: rgb(255, 0, 0);    /* vermelho */color: rgb(100, 100, 100); /* cinza */

Propriedades de texto

css

p {    color: #333;                /* cor do texto */    font-size: 18px;            /* tamanho */    font-family: Arial, sans-serif; /* fonte */    font-weight: bold;          /* negrito */    text-align: center;         /* alinhamento */    line-height: 1.5;           /* espaço entre linhas */}

Propriedades de fundo

css

body {    background-color: #f0f0f0;    background-image: url('imagem.jpg');    background-size: cover;}

Box Model (Modelo de Caixa)

Todo elemento é uma caixa com:

┌─────────────────────────────┐
│          margin             │
│  ┌─────────────────────┐   │
│  │      border         │   │
│  │  ┌──────────────┐  │   │
│  │  │   padding    │  │   │
│  │  │  ┌───────┐  │  │   │
│  │  │  │content│  │  │   │
│  │  │  └───────┘  │  │   │
│  │  └──────────────┘  │   │
│  └─────────────────────┘   │
└─────────────────────────────┘

css

.caixa {    width: 200px;           /* largura do conteúdo */    height: 100px;          /* altura do conteúdo */    padding: 20px;          /* espaço interno */    border: 2px solid black; /* borda */    margin: 10px;           /* espaço externo */}

Atalhos

css

/* Todos os lados iguais */margin: 20px; /* vertical | horizontal */margin: 20px 10px; /* top | right | bottom | left */margin: 10px 20px 10px 20px; /* Lados específicos */margin-top: 10px;margin-left: 20px;

Exemplo prático

HTML:

html

<!DOCTYPE html><html><head>    <title>Site Bonito</title>    <link rel="stylesheet" href="style.css"></head><body>    <header>        <h1>Meu Site</h1>        <nav>            <a href="#">Home</a>            <a href="#">Sobre</a>            <a href="#">Contato</a>        </nav>    </header>     <main>        <h2>Bem-vindo!</h2>        <p>Este é meu primeiro site estilizado.</p>        <button class="btn">Clique aqui</button>    </main></body></html>

CSS:

css

* {    margin: 0;    padding: 0;    box-sizing: border-box;} body {    font-family: Arial, sans-serif;    background-color: #f5f5f5;    color: #333;} header {    background-color: #2c3e50;    color: white;    padding: 20px;} header h1 {    margin-bottom: 10px;} nav a {    color: white;    text-decoration: none;    margin-right: 15px;} nav a:hover {    text-decoration: underline;} main {    max-width: 800px;    margin: 40px auto;    padding: 20px;    background: white;    border-radius: 8px;} .btn {    background-color: #3498db;    color: white;    border: none;    padding: 12px 24px;    font-size: 16px;    border-radius: 4px;    cursor: pointer;} .btn:hover {    background-color: #2980b9;}

Pseudo-classes

Estados especiais:

css

a:hover {    /* quando passa o mouse */    color: red;} a:active {    /* quando clica */    color: darkred;} input:focus {    /* quando está focado */    border-color: blue;}

Resumo

✅ CSS estiliza HTML
✅ Seletores: tag, .classe, #id
✅ Cores: nome, hex, rgb
✅ Box model: content, padding, border, margin
✅ Hover para interatividade

Na próxima aula, vamos começar com JavaScript e dar VIDA às páginas! 🚀