CSS 1: Introdução#
Eu sei que a última entrega foi um pouco angustiante: vocês escreveram um monte de código HTML para, no final, entregar telas que não são muito agradáveis visualmente. Não deu muito orgulho, né? Porém, isso era necessário para fixar a mentalidade de que você não deve escrever HTML pensando em visual.
Mas agora vamos finalmente falar de visual! Para isso, precisamos introduzir uma nova linguagem. Mais especificamente, vamos introduzir o segundo membro da Santíssima Trindade do desenvolvimento front-end, a linguagem CSS.
Vamos partir do exemplo anterior, que você pode clicar aqui para acessar. Crie na raiz desse exemplo uma nova pasta chamada css. Dentro dessa nova pasta, crie um arquivo chamado style.css. Abra esse arquivo no VS Code e abra o arquivo exemplo.html tanto no VS Code quanto no Chrome.
Não é necessário abrir o novo arquivo style.css no Chrome, pois ele será carregado a partir do arquivo existente exemplo.html. Para que isso aconteça, vamos adicionar um elemento link dentro do elemento head.
<head>
<title>Exemplo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
Como o próprio nome diz, esse elemento cria uma ligação entre o arquivo HTML e outro arquivo. O atributo rel especifica o tipo da ligação e o atributo href especifica o caminho do outro arquivo.
Nesse caso, o tipo é stylesheet para indicar que o outro arquivo é uma folha de estilo, ou seja, um código que muda as regras de formatação do navegador, e o caminho começa com css/ porque criamos o outro arquivo dentro da pasta css.
Se você atualizar o navegador depois de salvar o arquivo exemplo.html, nada vai mudar. E nem deveria, pois o arquivo style.css ainda está vazio! Vamos então escrever um pouco de código CSS nele.
Salve style.css no editor e atualize exemplo.html no navegador.
Exercise 1
Answer
Veremos abaixo mais detalhes sobre a sintaxe do CSS. A propriedade text-decoration adiciona uma linha abaixo (underline), no meio (line-through) ou acima (overline) do texto decorado.
Se tudo deu certo no passo anterior, o título primário deve estar sublinhado.
Vamos agora adicionar mais uma linha a esse código CSS.
Novamente, salve style.css no editor e atualize exemplo.html no navegador.
Exercise 2
Answer
Não se preocupe em decorar todas as opções, você vai acabar decorando as propriedades principais conforme tiver mais prática.
Se tudo deu certo, o título primário deve estar em itálico e sublinhado.
Mais algumas linhas!
Salve e atualize.
Exercise 3
Answer
Continue lendo o handout, já vamos discutir o que aconteceu aqui.
Os títulos secundários devem estar vermelhos.
Já está claro, espero, que estamos de fato mudando as regras de formatação do navegador. Vamos agora investigar como exatamente o código CSS está nos permitindo fazer isso.
Entendendo a sintaxe#
Um código CSS é formado por vários blocos. Cada bloco começa com alguma expressão seguida por um abre-chaves ({) e termina com um fecha-chaves (}). Chamamos essa expressão de seletor.
Dentro de cada bloco, temos um ou mais pares de chave e valor, como em um dicionário do Python. Chamamos esses pares de propriedades. Cada propriedade usa dois pontos para separar a chave do valor (como Python) e termina com um ponto e vírgula.
Atenção
Cuidado para não esquecer um ponto e vírgula. Esquecer apenas um pode fazer a página inteira explodir.
Como você já deve ter percebido, cada propriedade estabelece uma regra de formatação. Cada bloco aplica as propriedades sobre os elementos indicados pelo seletor.
Por exemplo, o bloco
aplica sobre todos os elementos de nome h1 as propriedades font-style: italic e text-decoration: underline. A primeira estabelece que o texto deve ser em itálico e a segunda estabelece que o texto deve ser sublinhado.
Outro exemplo: o bloco
aplica sobre todos os elementos de nome h2 a propriedade color: red, que estabelece que o texto deve ter cor vermelha.
Cabe observar que, no primeiro exemplo, existe apenas um h1 no código HTML, mas, se existissem vários, as propriedades seriam aplicadas sobre todos. É o que acontece no segundo exemplo.
Exercise 4
Answer
A sintaxe é parecida com um dicionário Python, mas não é exatamente a mesma. É normal se confundir no começo, mas com um pouco de prática se torna mais fácil alternar entre linguagens.
Como HTML, a linguagem CSS é muito simples. Vocês acabaram de ver quase tudo que é necessário saber em relação a sintaxe. A curva de aprendizado está em conhecer os seletores e propriedades que existem e como eles funcionam. É isso que vamos começar a ver nas próximas partes deste material. Mas antes...
Separando conteúdo e apresentação#
É possível escrever código CSS diretamente no arquivo HTML, mas não é recomendado. Como enfatizamos na introdução a HTML, o propósito de HTML é dar significado, não visual. Se você escreve código CSS em um arquivo HTML, está violando esse princípio de separação entre conteúdo e apresentação.
De fato, como não queremos que vocês façam isso, não vamos ensinar essa parte. Claro que não é difícil aprender sozinho, mas não vale a pena: vamos explicitamente pedir para vocês não incluírem código CSS nos arquivos HTML que entregarem. Apenas links.
Exercise 5
Answer
"Mas eu nunca vou poder quebrar essa regra?" Vai, mas existe uma hora certa para todas as coisas. Você precisa primeiro dominar a regra para poder quebrá-la quando fizer sentido.
Ok, agora sim estamos prontos para começar a próxima parte.