Introdução ao CSS
CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de documentos HTML. Ela controla o layout, cores, fontes e outros aspectos visuais das páginas web.
Como surgiu o CSS
O cenário da web nos anos 90
No começo da World Wide Web (criada por Tim Berners-Lee em 1989), o HTML era a única linguagem usada para estruturar páginas.
Ele permitia criar textos, títulos, links e listas, mas não havia controle visual padronizado.
Exemplo: se você queria um título maior, dependia do navegador interpretar o <h1> do jeito que ele achava melhor. Se queria mudar cor ou espaçamento, era praticamente impossível, já que cada navegador mostrava de um jeito.
Isso era um grande problema para designers e desenvolvedores, porque não havia consistência visual na web.
A proposta de Håkon Wium Lie
Foi nesse contexto que, em 1994, o engenheiro norueguês Håkon Wium Lie, que trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear) — o mesmo lugar onde nasceu a web — apresentou uma proposta chamada Cascading Style Sheets (CSS).
- Nome completo: Håkon Wium Lie
- Cargo na época: Pesquisador de tecnologia no CERN
- Motivação: Criar uma forma de separar o conteúdo (HTML) da apresentação visual (CSS).
O termo "cascading" (em cascata) foi escolhido porque o CSS permite combinar múltiplas regras, onde a mais específica ou mais próxima do elemento tem prioridade.
A entrada de Bert Bos
No ano seguinte (1995), Bert Bos, pesquisador holandês que também estudava estilos para documentos digitais, juntou-se ao projeto. Ele trouxe ideias importantes, como:
- Definição clara de hierarquia de estilos.
- Planejamento de um sistema que pudesse ser padronizado por todos os navegadores.
- Juntos, Håkon Wium Lie e Bert Bos começaram a formalizar o que se tornaria a primeira versão do CSS.
A padronização pelo W3C
Em 1996, o W3C (World Wide Web Consortium), organização fundada por Tim Berners-Lee para padronizar tecnologias da web, oficializou a primeira versão: CSS1.
- CSS1 (1996): focado em cores, fontes, espaçamentos e alinhamentos.
- CSS2 (1998): trouxe suporte a posicionamento absoluto/relativo, z-index, media types (tela, impressão etc.).
- CSS3 (2000 em diante): passou a ser dividido em módulos independentes (cores, seletores, animações, grid, flexbox). Isso acelerou a evolução da linguagem.
- CSS4: tecnicamente não existe como versão única. Hoje, o CSS evolui em módulos atualizados pelo W3C continuamente.
🏢 Empresas envolvidas
Além do CERN e do W3C, os navegadores da época tiveram um papel fundamental, porque eram eles que precisavam adotar o CSS:
Netscape Navigator → inicialmente resistente ao CSS (apostava em uma linguagem própria chamada JavaScript Style Sheets – JSSS).
Internet Explorer (Microsoft) → adotou CSS rapidamente e ajudou a popularizar.
Opera → Håkon Wium Lie, criador do CSS, mais tarde se tornou CTO da Opera Software e continuou defendendo a padronização do CSS.
O apoio das empresas de navegadores foi decisivo para que o CSS se tornasse padrão mundial.
Impacto do CSS
- A criação do CSS mudou a forma de construir sites porque:
- Separou conteúdo (HTML) e estilo (CSS).
- Permitiu que sites tivessem identidade visual consistente.
- Abriu caminho para layouts responsivos, animações, design moderno.
- Deu aos designers e desenvolvedores muito mais criatividade na web.
Hoje, o CSS é indispensável em qualquer projeto web, e sua evolução continua com CSS Variables, Grid, Flexbox, Subgrid, Container Queries e muito mais.
📌 Linha do tempo resumida (para fixar):
1994
→ Håkon Wium Lie (CERN) propõe o CSS.
1995
→ Bert Bos entra no projeto.
1996
→ W3C lança CSS1.
1998
Surge o CSS2 (posicionamento e media types).
2000+
→ CSS3 modularizado (animações, flexbox, grid, seletores avançados).
Hoje
→ CSS evolui em módulos pelo W3C, com suporte moderno nos navegadores.
Sintaxe Básica
<!-- HTML sem CSS - Limitações visuais -->
<html>
<head>
<title>Página dos anos 90</title>
</head>
<body>
### Seletores CSS
Seletores determinam quais elementos HTML serão estilizados:
- `.classe` seleciona todos os elementos com determinada classe
- `#id` seleciona o elemento com determinado id
- `elemento` seleciona todas as tags do tipo
- `elemento elemento` seleciona descendentes
- `elemento:hover` aplica estilo ao passar o mouse
Exemplo:
```css
.destaque {
<h1>Título</h1>
<p>Texto simples sem formatação avançada</p>
#titulo {
<font color="red" size="4">Texto com formatação inline</font>
</body>
</html>
Por que usar CSS?
- Separação de conteúdo e apresentação: Mantém o HTML semântico
### Box Model
Todo elemento é uma "caixa" composta por:
- `margin`: espaço externo
- `border`: borda
- `padding`: espaço interno
- `content`: conteúdo
Exemplo visual:
```css
.caixa {
- Reutilização: Um arquivo CSS pode estilizar múltiplas páginas
- Manutenibilidade: Facilita atualizações e correções
- Performance: Reduz a repetição de código
Sintaxe Básica
Unidades de Medida
px: pixelsem/rem: relativo ao tamanho da fonte%: porcentagemvw/vh: largura/altura da viewport
Responsividade e Media Queries
Permite adaptar o layout para diferentes tamanhos de tela:
@media (max-width: 600px) {
```css:style.css
seletor {
propriedade: valor;
propriedade: valor;
Boas Práticas
- Prefira CSS externo
- Use nomes de classes descritivos
- Evite !important
- Organize o código por seções
Animação Simples
.botao {
}
Exemplo prático:
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
### Links Úteis
- [MDN CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- [CSS Tricks](https://css-tricks.com/)
- [Can I use](https://caniuse.com/)
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
Formas de Aplicar CSS
- CSS Inline
<p style="color: red; font-size: 16px;">Texto com estilo inline</p>
- CSS Interno
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
- CSS Externo (Recomendado)
<head>
<link rel="stylesheet" href="styles.css">
</head>