Skip to main content

CSS Fundamentos

O Que é CSS e Como Funciona​

CSS, que significa Cascading Style Sheets (Folhas de Estilo em Cascata), é a linguagem que controla a apresentação visual das páginas web. Enquanto HTML define a estrutura e o conteúdo, CSS define como esse conteúdo aparece - cores, fontes, espaçamentos, layouts, animações e muito mais.

Pense em HTML como a estrutura de uma casa (paredes, portas, janelas) e CSS como a decoração (cores, móveis, iluminação). Você pode ter uma casa funcional sem decoração, mas ela não será muito atraente. CSS é o que transforma páginas HTML básicas em experiências visuais agradáveis e profissionais.

Como CSS se Conecta com HTML​

Existem três formas principais de adicionar CSS ao HTML:

1. CSS Inline (dentro do elemento)​

<p style="color: blue; font-size: 18px;">Este parágrafo é azul e maior.</p>

Não é recomendado para a maioria dos casos.

2. CSS Interno (na tag <style> no head)​

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

Útil para estilos específicos de uma única página.

3. CSS Externo (arquivo separado) ⭐ Recomendado​

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

E no arquivo estilos.css:

p {
    color: blue;
    font-size: 18px;
}

Esta abordagem permite reutilizar os mesmos estilos em múltiplas páginas e facilita manutenção.

A Sintaxe Básica do CSS​

CSS funciona através de regras:

seletor {
    propriedade: valor;
    outra-propriedade: outro-valor;
}

Exemplo prático:

h1 {
    color: red;
    font-size: 32px;
    text-align: center;
}

Esta regra diz: "Todos os elementos <h1> devem ter texto vermelho, tamanho de fonte de 32 pixels, e estar centralizados."

Seletores: Escolhendo os Elementos Certos​

Seletor de Elemento​

p {
    color: blue;
}

Seleciona todos os parágrafos.

Seletor de Classe​

<p class="destaque">Este parágrafo tem destaque.</p>
.destaque {
    background-color: yellow;
    font-weight: bold;
}

Note o ponto (.) antes do nome da classe no CSS.

Seletor de ID​

<p id="introducao">Este é o parágrafo de introdução.</p>
#introducao {
    font-size: 20px;
    color: green;
}

Note o hash (#) antes do nome do ID no CSS.

Seletor Descendente​

article p {
    color: gray;
}

Seleciona apenas parágrafos que estão dentro de elementos <article>.

Seletor de Múltiplos Elementos​

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: navy;
}

Propriedades CSS Essenciais​

Cores​

/* Nome da cor */
color: red;

/* Hexadecimal (mais comum) */
color: #FF5733;
color: #333;

/* RGB */
color: rgb(255, 87, 51);

/* RGBA (com transparência) */
color: rgba(255, 87, 51, 0.5);

Tipografia​

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

Espaçamento​

div {
    margin: 20px;    /* Espaço externo */
    padding: 15px;   /* Espaço interno */
    
    /* Você pode especificar cada lado separadamente */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    
    /* Ou usar forma abreviada (top, right, bottom, left) */
    margin: 10px 20px 10px 20px;
    
    /* Ou (vertical horizontal) */
    margin: 10px 20px;
}

Bordas​

div {
    border: 2px solid black;
    border-radius: 10px;  /* Cantos arredondados */
    
    /* Ou especificar cada lado */
    border-top: 1px dashed red;
    border-right: 2px solid blue;
}

Background​

div {
    background-color: lightblue;
    background-image: url('imagem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

O Modelo de Caixa (Box Model)​

Um dos conceitos mais importantes do CSS é o Box Model. Todo elemento HTML é tratado como uma caixa retangular com quatro áreas:

  1. Conteúdo: O conteúdo real (texto, imagens, etc.)
  2. Padding: Espaço interno entre o conteúdo e a borda
  3. Border: A borda ao redor do padding
  4. Margin: Espaço externo entre a borda e outros elementos
┌─────────────────────────┐ ← Margin (externo)
│ ┌─────────────────────┐ │
│ │ ┌───────────────┐   │ │ ← Border
│ │ │               │   │ │
│ │ │   Conteúdo    │   │ │ ← Padding (interno)
│ │ │               │   │ │
│ │ └───────────────┘   │ │
│ └─────────────────────┘ │
└─────────────────────────┘

Você pode mudar isso com a propriedade box-sizing:

* {
    box-sizing: border-box; /* width inclui padding e border */
}

Muitos desenvolvedores usam box-sizing: border-box globalmente porque torna os cálculos de largura mais previsíveis.

Layout com Flexbox​

Flexbox é um sistema de layout moderno que torna muito mais fácil criar layouts flexíveis e responsivos.

.container {
    display: flex;
    justify-content: center;  /* Alinhamento horizontal */
    align-items: center;      /* Alinhamento vertical */
    gap: 20px;                /* Espaço entre itens */
}

Exemplo prático:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.item {
    padding: 20px;
    background-color: lightblue;
}

Flexbox é especialmente poderoso para:

  • Centralizar conteúdo (horizontal e verticalmente)
  • Criar layouts de navegação
  • Distribuir espaço igualmente entre elementos
  • Criar layouts responsivos

CSS Grid: Layouts em Duas Dimensões​

Enquanto Flexbox é excelente para layouts em uma dimensão (linha ou coluna), CSS Grid é perfeito para layouts em duas dimensões (linhas e colunas simultaneamente).

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 colunas de tamanho igual */
    grid-template-rows: auto;
    gap: 20px;
}

Exemplo de layout com Grid:

<div class="grid-container">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main Content</main>
    <footer>Footer</footer>
</div>
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    gap: 20px;
    height: 100vh;
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Responsividade e Design Mobile-First​

Com a maioria dos usuários acessando a web através de dispositivos móveis, criar sites responsivos é essencial.

A abordagem mobile-first significa projetar primeiro para telas pequenas e depois adicionar estilos para telas maiores:

/* Estilos base (mobile) */
.container {
    padding: 10px;
    font-size: 14px;
}

/* Tablets */
@media (min-width: 768px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        font-size: 18px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

Media queries permitem aplicar estilos diferentes baseados no tamanho da tela.

Animações e Transições​

CSS permite criar animações e transições suaves sem JavaScript:

Transições​

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: red;
}

Animações​

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.elemento {
    animation: pulse 2s infinite;
}

Variáveis CSS (Custom Properties)​

Variáveis CSS permitem reutilizar valores:

:root {
    --cor-primaria: #3498db;
    --cor-secundaria: #2ecc71;
    --espacamento: 20px;
}

.button {
    background-color: var(--cor-primaria);
    padding: var(--espacamento);
}

Isso facilita manutenção - mudar a cor primária em um lugar atualiza em todos os lugares.

Boas Práticas de CSS​

1. Evite Estilos Inline​

Prefira CSS externo ou interno ao invés de estilos inline.

2. Use Classes ao Invés de IDs para Estilização​

IDs devem ser usados para identificação única, não para estilização.

3. Seja Específico, Mas Não Demais​

Evite seletores muito específicos como .container .wrapper .content .text p.

4. Use Nomes de Classes Descritivos​

/* Bom */
.btn-primary
.card-header
.nav-item

/* Ruim */
.red-button
.div1
.stuff

5. Organize Seu CSS​

Use comentários para separar seções:

/* ===================================
   Header Styles
   =================================== */
header {
    /* estilos aqui */
}

Próximos Passos​

Agora você tem HTML para estrutura e CSS para apresentação. No próximo módulo, vamos aprender JavaScript - a linguagem que adiciona interatividade e comportamento dinâmico às suas páginas.

Antes de continuar, pratique criando layouts com CSS. Tente recriar layouts de sites que você gosta, experimente com Flexbox e Grid, e crie versões responsivas das suas páginas.

Referências​