O que é CSS e como ele chega ao HTML · CSS do zero

Do HTML ao CSS

O HTML diz o que cada coisa é. O CSS diz como cada coisa aparece.

<h1>Marina Sales</h1>

h1 {
  color: #6ee7a5;
  font-size: 64px;
}

Nenhuma linha do HTML mudou. Esta é a ideia inteira do CSS, e é o que faz um portfólio poder trocar de cara em um sábado sem que uma palavra do texto seja reescrita.

O portfólio que este curso veste

Toda aula daqui para a frente veste um pedaço do mesmo site: um portfólio de seis páginas, seu, publicado num endereço que você manda para alguém.

Página	O que ela mostra	Veste nas aulas
`index.html`	Abertura, o que você faz, projetos, contato	3, 5, 7, 8
`sobre.html`	Sua história e suas ferramentas	4, 5
`portfolio.html`	A grade de projetos	8, 10
`stack.html`	A tabela de ferramentas por nível	2, 4
`carreira.html`	A trajetória, em ordem	4, 8
`contato.html`	Canais diretos e o formulário	5, 10

No fim, ele tem fundo escuro, um realce verde, cartões de borda fina, uma grade de projetos que se acomoda sozinha, tema claro para quem lê no sol e movimento contido - tudo escrito à mão, sem framework, em umas trezentas linhas de CSS.

Se você não fez o curso de HTML

Este curso é independente: dá para fazer só ele. Mas ele precisa de uma estrutura para vestir, e a do curso irmão é a que os exemplos usam.

O caminho mais curto é fazer o HTML do zero antes: as doze aulas de lá constroem exatamente as seis páginas que estas quatorze estilizam. Se você já sabe HTML, escreva as seis páginas com o que os exemplos daqui mostram: um <header> com <nav>, um <main>, seções com <h2>, cartões de projeto em <article>, uma tabela de stack, um formulário de contato e um <footer>.

A forma de uma regra

seletor {
  propriedade: valor;
}

seletor: quem vai ser afetado
propriedade: o que vai mudar
valor: para quanto

Cada par termina com ponto e vírgula. Esquecê-lo faz a regra seguinte ser ignorada junto.

p {
  color: #a1a9b8;
  line-height: 1.6;
  margin-bottom: 16px;
}

As três formas de aplicar, e a que se usa

1. Arquivo separado; a que você vai usar:

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

Um arquivo, ligado pelas seis páginas. Mudou a cor lá, mudou no site inteiro. E o navegador guarda o arquivo em cache: da segunda página em diante ele nem baixa de novo.

Num portfólio, isso é a diferença entre trocar o verde por azul em uma linha e trocá-lo em seis arquivos.

2. Dentro do <head>; para uma página só:

<head>
  <style>
    h1 {
      color: #6ee7a5;
    }
  </style>
</head>

3. Direto na tag; evite:

<h1 style="color: #6ee7a5">Marina Sales</h1>

O primeiro arquivo do portfólio

Crie a pasta estilos/ ao lado dos seis .html e, dentro dela, main.css:

meu-portfolio/
├── index.html
├── sobre.html
├── portfolio.html
├── stack.html
├── carreira.html
├── contato.html
├── estilos/
│   └── main.css
└── imagens/

E o conteúdo de main.css, por enquanto:

/* A base do documento */
body {
  font-family: system-ui, sans-serif;
  color: #fbfbfb;
  background-color: #0e1116;
  line-height: 1.6;
  margin: 0;
}

h1 {
  color: #6ee7a5;
}

a {
  color: #6ee7a5;
}

E no <head> de cada uma das seis páginas:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Marina Sales · desenvolvedora web</title>
  <link rel="stylesheet" href="estilos/main.css" />
</head>

Seis linhas iguais em seis arquivos. É a mesma repetição do menu, e a mesma resposta: com HTML e CSS puros não há como escrevê-la uma vez só.

Comentários

/* Isto é um comentário e o navegador ignora */

/* O verde é o único realce do site inteiro.
   Se um segundo realce aparecer, nenhum dos dois destaca nada. */
h1 {
  color: #6ee7a5;
}

Só existe a forma /* ... */. Não há comentário de linha como em outras linguagens.

No portfólio

O que fica pronto hoje:

a pasta estilos/ com o arquivo main.css;
a linha <link rel="stylesheet"> no <head> das seis páginas;
fundo escuro, texto claro e o primeiro realce verde.

Abra qualquer uma das seis. Ainda é feia: tudo colado na borda esquerda, o texto correndo de ponta a ponta, o menu empilhado. Está certo assim - fundo e cor são três linhas, e o resto do curso são as outras duzentas e noventa e sete.

Exercícios

Crie estilos/main.css e ligue-o às seis páginas do portfólio.
Escreva as três regras de base - body, h1 e a - e confirme que o fundo escureceu em todas as páginas.
Escreva uma propriedade inventada de propósito e confirme que nada quebra.
Esqueça um ponto e vírgula de propósito e veja qual regra deixa de funcionar.
Ponha um style direto num <h1> e tente sobrescrevê-lo pelo arquivo. Consegue?
Troque o valor de background-color por outro e recarregue as seis páginas. Quantos arquivos você precisou editar?

Referências

Primeiros passos com CSS - MDN - a sintaxe e as formas de aplicar
Como o CSS funciona - MDN - do arquivo à tela
CSS Tutorial - W3Schools - tutorial interativo com editor