O que é CSS e como funciona?
CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata. Ele é usado para deixar uma página HTML bonita, organizada e adaptada para diferentes tamanhos de tela.
Enquanto o HTML cria a estrutura da página, o CSS cuida da aparência.
HTML cria a estrutura
Por exemplo:
<h1>Meu site</h1>
<p>Bem-vindo ao meu site!</p>Esse código cria um título e um parágrafo, mas eles ainda terão uma aparência simples.
CSS muda a aparência
Podemos usar CSS para alterar a cor, tamanho, espaçamento e posição:
h1 {
color: blue;
font-size: 40px;
}
p {
color: gray;
font-size: 20px;
}Agora o título ficará azul e maior, enquanto o texto ficará cinza.
Como funciona o CSS?
O CSS normalmente segue esta estrutura:
seletor {
propriedade: valor;
}Por exemplo:
h1 {
color: red;
}Vamos entender cada parte:
h1→ seletor: indica qual elemento HTML será alterado.color→ propriedade: indica o que queremos modificar.red→ valor: indica como queremos modificar.{ }→ contém as regras do CSS.;→ indica o final de uma regra.
Como colocar CSS no HTML?
Existem três maneiras principais.
1. CSS dentro da tag HTML
<h1 style="color: red;">Meu título</h1>Funciona, mas não é a melhor opção para sites maiores.
2. CSS dentro do próprio HTML
Podemos usar a tag <style>:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Meu site</h1>
</body>
</html>3. CSS em um arquivo separado
Essa é uma das formas mais utilizadas.
Crie dois arquivos:
index.html
style.cssNo index.html:
<!DOCTYPE html>
<html>
<head>
<title>Meu site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Meu site</h1>
<p>Aprendendo CSS!</p>
</body>
</html>No style.css:
h1 {
color: blue;
font-size: 40px;
}
p {
color: gray;
font-size: 20px;
}O HTML encontra o arquivo style.css através desta linha:
<link rel="stylesheet" href="style.css">O que podemos mudar com CSS?
CSS permite controlar praticamente toda a aparência do site.
Cor
p {
color: green;
}Tamanho
p {
font-size: 20px;
}Fundo
body {
background-color: #f2f2f2;
}Espaçamento
div {
padding: 20px;
margin: 30px;
}Bordas
div {
border: 2px solid black;
}Cantos arredondados
div {
border-radius: 15px;
}Largura
div {
width: 500px;
}CSS também deixa o site responsivo
Um site responsivo se adapta a computador, tablet e celular.
Podemos usar uma media query:
@media (max-width: 600px) {
h1 {
font-size: 28px;
}
p {
font-size: 16px;
}
}Nesse exemplo, quando a tela tiver até 600 pixels de largura, o CSS modifica o tamanho dos textos.
HTML + CSS
Uma forma simples de entender:
HTML = estrutura 🏗️
CSS = aparência 🎨
JavaScript = comportamento ⚙️Por exemplo, em um site de eletrodomésticos:
<div class="produto">
<h2>Geladeira</h2>
<p>Geladeira Frost Free</p>
<button>Ver produto</button>
</div>O CSS pode transformar isso em um cartão bonito:
.produto {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.produto h2 {
color: #222;
}
.produto button {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}Assim, o HTML cria o produto e o CSS transforma o produto em um cartão visual.
O que estudar depois?
Depois de entender o básico, a ordem mais fácil para aprender CSS é:
- Seletores
- Cores
- Fontes
marginpaddingborderwidtheheightdisplay- Flexbox
- Grid
- Responsividade
- Media queries
- Animações
- CSS para SEO e acessibilidade
- Organização de um CSS completo
