// aula 03 · CSS · História

A História do CSS —
A beleza que chegou depois


O problema que o CSS veio resolver

😱 A web era feia — e difícil de manter

Nos primeiros anos da web, toda a aparência visual estava misturada dentro do HTML. Quem queria mudar a cor de um título precisava adicionar a tag <font color="red"> em volta de cada título, em cada página. Mudar o visual de um site inteiro significava editar centenas de arquivos.

A web crescia rápido, os sites ficavam maiores, e essa abordagem virava um pesadelo de manutenção. Era urgente separar o conteúdo (HTML) da apresentação (como ele ficaria visualmente).

❌ Antes do CSS

  • Estilo misturado direto no HTML
  • Tags como <font>, <center>, <blink>
  • Mudar cor = editar todas as páginas
  • Código ilegível e impossível de manter
  • Browsers renderizavam de formas completamente diferentes

✅ Com o CSS

  • Estilo separado do conteúdo
  • Um arquivo CSS controla o visual de todo o site
  • Mudar cor = editar um único lugar
  • HTML mais limpo, semântico e acessível
  • Mesmo estilo funciona em múltiplas páginas

A linha do tempo do CSS

Outubro 1994 — CERN

💡 A proposta de Håkon Wium Lie

Em outubro de 1994, um norueguês chamado Håkon Wium Lie estava trabalhando com Tim Berners-Lee no CERN. Ele publicou a primeira proposta de um documento chamado "Cascading HTML Style Sheets" — o embrião do CSS.

A ideia central era simples mas revolucionária: separar o conteúdo (HTML) da apresentação (CSS), e permitir que tanto o desenvolvedor quanto o usuário tivessem controle sobre como o conteúdo seria exibido — com uma "cascata" de regras determinando qual estilo prevalece.

👤 Håkon Wium Lie — norueguês, criador do CSS

1994 — W3C

🤝 Bert Bos entra na jogada

O programador holandês Bert Bos estava desenvolvendo uma proposta similar de stylesheet para o browser Argo. Ele se uniu a Håkon e juntos refinaram o conceito, tornando-se os co-autores do CSS1. A colaboração foi fundamental para que o CSS se tornasse um padrão aberto e não uma solução proprietária.

👤 Bert Bos — holandês, co-autor do CSS

Dezembro 1996 — W3C

📋 CSS1 — O primeiro padrão oficial

O W3C publicou o CSS Level 1 em dezembro de 1996. Era relativamente simples: permitia controlar fontes, cores, espaçamentos, margens, bordas e backgrounds. Não havia layout complexo — era focado em tipografia e aparência básica.

O problema: levou anos para os browsers implementarem corretamente. A Microsoft foi a primeira com o Internet Explorer 3 em 1996, mas a implementação era bugada. Os desenvolvedores ficaram frustrados por anos com comportamentos inconsistentes.

CSS1Dez 1996

Maio 1998 — W3C

📐 CSS2 — Posicionamento e layout

O CSS2 expandiu enormemente as capacidades. Trouxe posicionamento (absolute, relative, fixed), z-index, media types (estilos diferentes para impressão, tela, etc.), pseudo-classes (:hover, :focus) e pseudo-elementos (::before, ::after). Pela primeira vez era possível fazer layouts mais complexos sem tabelas.

CSS2Mai 1998

2004–2011 — W3C

🔧 CSS 2.1 — Limpando a bagunça

O CSS 2.1 não trouxe features novas — sua função foi corrigir erros e inconsistências do CSS2, removendo funcionalidades mal suportadas e documentando com precisão o que os browsers realmente faziam. Ficou em draft por anos por causa da complexidade política entre W3C e os fabricantes de browsers.

CSS 2.1Finalizado 2011

1999 → hoje — W3C

🎨 CSS3 — A era moderna

O CSS3 não é uma versão única — é um conjunto de módulos independentes, cada um com seu próprio ciclo de desenvolvimento. Isso permitiu que features prontas fossem implementadas sem esperar as demais. Os módulos trouxeram: border-radius, box-shadow, gradients, transitions, animations, flexbox, grid, custom properties (variáveis CSS) e muito mais.

O Flexbox (2012) e o CSS Grid (2017) foram as maiores revoluções — finalmente era possível criar layouts complexos de forma limpa, sem gambiarras com floats e tabelas.

CSS3Flexbox 2012Grid 2017

Hoje — Módulos contínuos

🚀 CSS moderno

O CSS continua evoluindo com features poderosas: container queries (estilos baseados no tamanho do componente, não da tela), cascade layers, :has() (o seletor pai), color-mix(), subgrid e muito mais. Não haverá "CSS4" como versão — o modelo de módulos continua sendo o caminho.


Curiosidades

🌊 O que significa "Cascading"?

O "C" de CSS significa Cascata. Quando múltiplas regras se aplicam ao mesmo elemento, uma hierarquia (a cascata) determina qual prevalece — levando em conta especificidade, ordem de declaração e herança. Essa é uma das partes mais importantes e mais temidas do CSS.

🕹️ O criador virou CEO

Håkon Wium Lie se tornou CTO da Opera Software — um dos browsers que mais defendeu os padrões web abertos nos anos 2000. Ele também é conhecido por campanhas públicas contra browsers que não seguiam os padrões W3C.

😤 A era dos hacks

Nos anos 2000, desenvolvedores tinham que usar CSS hacks para lidar com bugs do Internet Explorer — truques sujos como * html e comentários condicionais para fazer o mesmo CSS funcionar em diferentes browsers. Deu origem ao bordão: "It works in Firefox!"

📐 Flexbox levou 6 anos

A primeira proposta do Flexbox foi em 2009. Sua sintaxe mudou três vezes antes de ser finalizada. O suporte consistente nos browsers só veio por volta de 2015 — seis anos depois. Hoje é a ferramenta de layout mais usada na web.

📌 Resumo da aula