Curso de CSS Básico

Bem-vindo ao Curso de CSS Básico!

Aqui vais aprender a transformar páginas HTML simples em sites bonitos e profissionais. O CSS é a ferramenta que dá vida, cor e estilo ao teu site. Vamos começar esta jornada juntos! 🎨

Módulo 1: Introdução ao CSS

O que é o CSS?

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É a linguagem que usamos para dar estilo visual às páginas HTML. Enquanto o HTML define a estrutura e o conteúdo, o CSS define as cores, fontes, espaçamentos e layout.

Imagina que o HTML é como construir uma casa (paredes, portas, janelas), e o CSS é como decorá-la (pintar paredes, escolher móveis, pendurar quadros).

Como conectar o CSS ao HTML?

Existem três formas principais de adicionar CSS ao teu site:

1. CSS Externo (Recomendado)

Crias um ficheiro separado chamado style.css e conectas no HTML:

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

Vantagem: Podes usar o mesmo CSS em várias páginas do site!

2. CSS Interno

Colocas o CSS dentro da tag <style> no <head>:

<head>
    <style>
        h1 {
            color: blue;
            font-size: 32px;
        }
    </style>
</head>

3. CSS Inline

Aplicas o estilo diretamente no elemento (menos recomendado):

<h1 style="color: blue; font-size: 32px;">Título</h1>

✏️ Exercício Prático:

Cria um ficheiro HTML e adiciona CSS interno para:

Mudar a cor do fundo da página para #f0f8ff
Mudar a cor de todos os parágrafos para verde
Aumentar o tamanho do título para 36px

<style>
    body {
        background-color: #f0f8ff;
    }
    
    p {
        color: green;
    }
    
    h1 {
        font-size: 36px;
    }
</style>

💪 Agora já sabes como conectar CSS ao HTML! Estás a dar os primeiros passos para criar sites incríveis.

Módulo 2: Trabalhando com Cores e Fontes

Formas de definir cores

No CSS, podes usar cores de várias formas diferentes:

1. Nomes de cores

Existem 140 nomes de cores em inglês que podes usar:

color: red;
background-color: lightblue;
border-color: navy;

2. Código Hexadecimal

Um código de 6 caracteres precedido por #:

color: #0077ff;        /* Azul */
background-color: #ff5733;  /* Laranja avermelhado */
color: #2ecc71;        /* Verde */

💡 Dica: Usa sites como coolors.co ou htmlcolorcodes.com para escolher cores e copiar o código hexadecimal!

3. RGB e RGBA

Define cores usando valores de Vermelho, Verde e Azul (0-255):

/* RGB */
color: rgb(0, 119, 255);

/* RGBA (com transparência) */
background-color: rgba(0, 119, 255, 0.5);  /* 50% transparente */

Mudança de Fontes

Podes mudar o tipo de letra usando a propriedade font-family:

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: 'Times New Roman', serif;
}

p {
    font-family: 'Courier New', monospace;
}

Google Fonts - Fontes Bonitas e Gratuitas!

Podes usar milhares de fontes gratuitas do Google. Visita fonts.google.com e escolhe uma fonte:

<!-- No <head> do HTML -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" 
      rel="stylesheet">

<!-- No CSS -->
body {
    font-family: 'Poppins', sans-serif;
}

Tamanho e Estilo do Texto

h1 {
    font-size: 36px;           /* Tamanho */
    font-weight: bold;         /* Negrito */
    text-transform: uppercase; /* MAIÚSCULAS */
    text-decoration: underline; /* Sublinhado */
    text-align: center;        /* Centralizado */
    letter-spacing: 2px;       /* Espaço entre letras */
}

✏️ Exercício Prático:

Cria uma página com um título e um parágrafo. Aplica o seguinte CSS:

<style>
    body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
    }
    
    h1 {
        color: #0077ff;
        font-size: 42px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    
    p {
        color: #333;
        font-size: 18px;
        line-height: 1.6;
        text-align: justify;
    }
</style>

Resultado esperado: Um título azul grande em maiúsculas centralizado, e um parágrafo cinza justificado.

🎨 Fantástico! Agora já sabes trabalhar com cores e fontes. O teu site está a ficar cada vez mais bonito!

Módulo 3: Espaçamento e Organização

O Box Model - A Base do Layout

Todo o elemento HTML é como uma caixa. Esta caixa tem 4 partes importantes:

Content - O conteúdo (texto, imagem, etc.)
Padding - Espaço interno (entre o conteúdo e a borda)
Border - A borda da caixa
Margin - Espaço externo (entre esta caixa e outras)

Esta caixa tem padding, margin e border!

Padding (Espaço Interno)

Cria espaço entre o conteúdo e a borda:

.caixa {
    padding: 20px;              /* Todos os lados */
    padding: 10px 20px;         /* Vertical | Horizontal */
    padding: 10px 15px 20px 25px; /* Cima | Direita | Baixo | Esquerda */
    
    /* Ou específico */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

Margin (Espaço Externo)

Cria espaço fora do elemento:

.caixa {
    margin: 20px;              /* Todos os lados */
    margin: 0 auto;            /* Centraliza horizontalmente */
    margin-top: 30px;
    margin-bottom: 30px;
}

Border (Bordas)

Adiciona bordas aos elementos:

.caixa {
    border: 2px solid black;       /* Espessura | Estilo | Cor */
    border: 3px dashed #0077ff;
    border-radius: 10px;           /* Cantos arredondados */
    border-radius: 50%;            /* Círculo perfeito */
}

Box Shadow (Sombras)

Adiciona profundidade com sombras:

.caixa {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* Sombra leve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra média */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra forte */
}

Como Centralizar Elementos

/* Centralizar texto */
.texto {
    text-align: center;
}

/* Centralizar bloco (div, section, etc) */
.bloco {
    max-width: 800px;
    margin: 0 auto;  /* 0 em cima/baixo, auto dos lados */
}

✏️ Exercício Prático: Cartão de Perfil

Cria um cartão de perfil simples com este código:

<!-- HTML -->
<div class="cartao">
    <h2>João Silva</h2>
    <p>Desenvolvedor Web</p>
    <p>Lisboa, Portugal</p>
</div>

<!-- CSS -->
<style>
    .cartao {
        max-width: 300px;
        margin: 50px auto;
        padding: 30px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        text-align: center;
        border: 2px solid #0077ff;
    }
    
    .cartao h2 {
        color: #0077ff;
        margin-bottom: 10px;
    }
    
    .cartao p {
        color: #666;
        margin: 5px 0;
    }
</style>

João Silva

Desenvolvedor Web

Lisboa, Portugal

📦 Excelente trabalho! Já dominas o espaçamento e organização. O teu layout está cada vez mais profissional!

Módulo 4: Layouts Modernos com Flexbox

O que é Flexbox?

Flexbox é uma forma moderna e poderosa de organizar elementos numa página. Torna fácil alinhar itens lado a lado, centralizá-los e criar layouts responsivos.

Como usar Flexbox

Primeiro, define o elemento pai como flex:

.container {
    display: flex;
}

Agora todos os filhos diretos ficam lado a lado automaticamente!

Propriedades importantes do Flexbox

.container {
    display: flex;
    
    /* Direção */
    flex-direction: row;         /* Horizontal (padrão) */
    flex-direction: column;      /* Vertical */
    
    /* Alinhamento horizontal */
    justify-content: center;     /* Centro */
    justify-content: space-between; /* Espaço entre */
    justify-content: space-around;  /* Espaço em volta */
    
    /* Alinhamento vertical */
    align-items: center;         /* Centro */
    align-items: flex-start;     /* Topo */
    align-items: flex-end;       /* Baixo */
    
    /* Quebra de linha */
    flex-wrap: wrap;             /* Quebra quando necessário */
    
    /* Espaço entre itens */
    gap: 20px;                   /* Espaço entre elementos */
}

Exemplo: Galeria de Cards

<!-- HTML -->
<div class="galeria">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

<!-- CSS -->
<style>
    .galeria {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        padding: 20px;
    }
    
    .card {
        width: 200px;
        padding: 30px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        text-align: center;
        border: 2px solid #0077ff;
    }
</style>

Card 1

Card 2

Card 3

Centralizando perfeitamente qualquer coisa

Este é o truque mais usado para centralizar vertical e horizontalmente:

.centro-perfeito {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Altura total da janela */
}

Design Responsivo

Para o site funcionar bem em telemóveis, usa media queries:

/* Desktop */
.galeria {
    display: flex;
    gap: 20px;
}

.card {
    width: 300px;
}

/* Tablet e menor */
@media (max-width: 768px) {
    .card {
        width: 200px;
    }
}

/* Telemóvel */
@media (max-width: 480px) {
    .galeria {
        flex-direction: column;
    }
    
    .card {
        width: 100%;
    }
}

💡 Dica: Usa sempre flex-wrap: wrap na galeria para que os cards quebrem linha automaticamente em ecrãs pequenos!

✏️ Exercício Prático: Secção de Serviços

Cria uma secção com 3 cards lado a lado que mostrem serviços:

Cada card deve ter um ícone (emoji), título e descrição
Use flexbox para alinhá-los
Adicione sombra e hover effect
Torne responsivo para telemóvel

🚀 Incrível! Já dominas o Flexbox. Agora podes criar layouts modernos e responsivos com facilidade!

Módulo 5: Animações e Transições

Transições - Mudanças Suaves

As transições tornam as mudanças de estilo mais suaves e agradáveis:

.botao {
    background: #0077ff;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;  /* Anima todas as propriedades em 0.3s */
}

.botao:hover {
    background: #005fcc;
    transform: translateY(-3px);  /* Move 3px para cima */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Projeto 1

Ver detalhes

Projeto 2

Ver detalhes

✏️ Desafio Final do Módulo:

Cria um botão que:

Tem um gradiente de fundo
Quando passas o rato, muda de cor
Levanta ligeiramente (translateY)
Aumenta um pouco o tamanho (scale)
A sombra fica mais forte
Quando clicas, faz um pequeno "bounce" (scale menor)
Todas as transições são suaves (0.3s)

✨ Parabéns! Agora já sabes criar animações e transições profissionais. O teu site está no próximo nível!

🎓 Parabéns! Concluíste o Curso de CSS Básico

Fizeste uma jornada incrível! Agora já sabes:

✅ Conectar CSS ao HTML de várias formas
✅ Trabalhar com cores, fontes e tipografia
✅ Controlar espaçamentos com padding, margin e border
✅ Criar layouts modernos com Flexbox
✅ Adicionar animações e transições profissionais

💪 Próximos Passos:

Pratica muito! Cria projetos pessoais como:

Um site de portfólio para ti
Uma landing page de um produto fictício
Um blog pessoal
Uma galeria de fotos

A melhor forma de aprender é fazendo! 🚀

Recursos úteis para continuar a aprender:

MDN Web Docs - Documentação completa de CSS
CSS-Tricks - Truques e tutoriais avançados
CodePen - Vê e experimenta código de outros programadores
Google Fonts - Fontes gratuitas para os teus projetos
Coolors.co - Gerador de paletas de cores

🌟 Quer Aprender Ainda Mais?

O curso básico terminou, mas a tua jornada pode continuar!

Na Área Premium vais aprender:

🎨 CSS Grid - Layouts complexos e profissionais
🎬 Animações Avançadas - Keyframes, SVG e muito mais
📱 Design Responsivo Avançado - Mobile-first design
⚡ Sass/SCSS - CSS com superpoderes
🎯 Projetos Reais - Portfolio, e-commerce, dashboards
🖼️ Frameworks - Bootstrap, Tailwind CSS
✨ Melhores Práticas - Código limpo e organizado
📜 Certificado - Reconhecimento oficial

🚀 Ir para Área Premium

Torna-te num especialista em CSS e cria sites extraordinários!