HTML5 Para Crianças - Introdução ao CSS

O que é o CSS?

CSS significa Cascading Style Sheets ou, em Português, "folhas de estilo em cascata". É uma linguagem usada para descrever a aparência e formatação dos elementos de um documento ou página. É usada, juntamente com o HTML, para o desenvolvimento de páginas web. Através do CSS podes dar uma aspecto completamente diferente ao teu site, sem tocares numa linha de HTML.

As grandes vantagens de usarmos CSS com HTML em vez de usarmos apenas HTML são:

• Não precisamos de repetir os mesmos estilos em todas as páginas porque podemos usar apenas uma folha de estilos para todas as páginas do site;
• Poupamos muito tempo porque, caso precisemos de alterar um estilo, podemos fazê-lo apenas uma vez para um site inteiro;
• Temos muito mais variedade de opções porque os atributos que há em CSS são muito mais do que os que havia nas versões anteriores do HTML.

Elá! Isto promete!

Sintaxe do CSS

Uma regra em CSS é composta por um selector, uma ou mais propriedades e um ou mais valores. As regras são escritas desta forma:

Tal como em HTML, os espaços e mudanças de linha são ignorados, por isso, posso escrever a mesma instrucção ou regra desta forma:

selector {
  propriedade: valor;
}

Confuso? Até podes estar, mas com este exemplo que vou dar agora vais ver como é simples. Na minha opinião, o CSS até é mais fácil do que o HTML.

Suponhamos que eu quero escrever o título principal do meu site com a cor das letras a branco e o fundo a preto. Vamos ver quais são as variáveis que eu vou usar:

• O selector é o meu título, ou seja, o <h1>;
• As propriedades são color para definir a cor do texto e background-color para definir a cor do fundo;
• Os valores são white para a cor do texto e black para a cor do fundo;

Então, a nossa regra, que tem 1 elemento e 2 propriedades, é escrita assim:

Código HTML

<h1>Título do Meu Site</h1>

Código CSS

h1 {
  color:white;
  background-color:black
}

Como deves ter reparado, as propriedades são separadas por um ;. Só assim é que o CSS sabe que acabaste de declarar uma propriedade e vais começar a declarar outra. Na última não é obrigatório porque não declaraste mais nenhuma propriedade a seguir. No entanto, eu, por norma, coloco sempre o ;. Nunca se sabe quando é que preciso de voltar atrás para adicionar mais propriedades e depois posso esquecer-me de o colocar. Na minha opinião é uma boa prática fechar sempre a propriedade.

Voltando ao nosso código... O título está quase bem. Mas acho que ficava melhor se estivesse centrado na página. Será que conseguimos fazê-lo com CSS?

Vamos adicionar mais uma propriedade à nossa regra. Como não fechei a última regra no exemplo anterior com um ;, espero não me esquecer de o colocar agora!

h1 {
  color:white;
  background-color:black;
  text-align:center;
}

Ah! Assim, sim. Está bem melhor.

Onde Coloco o Código CSS?

Boa pergunta! Há 3 locais onde podes colocar o código CSS dos teus sites:

1. Inline - que significa que o código CSS é colocado directamente nos elementos, com o atributo style="...";
2. Interno - que significa que o código CSS é colocado na página, mas no <header> do HTML;
3. Externo - que significa que criamos um ou mais ficheiros só para o código CSS e os anexamos às nossas páginas HTML.

Reparaste que para descrever as 3 maneiras de colocar o CSS nos sites, criei uma lista ordenada em vez de uma lista não ordenada? Foi de propósito, e a razão pela qual o fiz é porque há prioridades nas regras CSS e essas prioridades é que dão origem à palavra Cascading na definição desta linguagem.

Imagina que tens um ficheiro só com código CSS, e criaste tantas regras que o teu ficheiro já tem mais de 200 linhas de código.

Torna-se dificil de gerir e, por engano, podes criar regras para elementos que já tinhas criado antes. E, não só acontece mais vezes do que podes imaginar, como por vezes essas regras são diferentes daquelas que já tinhas criado.

Neste caso, em que as regras estão todas no mesmo ficheiro, quando há conflitos o navegador dá prioridade à última que escreveste, ou seja, à que está mais abaixo no ficheiro. Mas o navegador também tem que saber a qual dar prioridade quando o conflito é entre uma que está no ficheiro e outra que está inline, por exemplo.

Daí a minha lista ordenada. Caso tenhas atribuido a cor "preta" a um título no ficheiro CSS e a cor "cinzento escuro" inline no teu documento HTML, a prioridade vai para o que tens inline.

O navegador dá prioridade primeiro ao CSS inline, depois ao CSS interno e, por último, ao CSS externo.

CSS Inline

Como referi acima, quando usamos CSS inline, colocamos o código directamente no elemento HTML, usando o atributo style="". O valor que colcamos nesse atributo, são as propriedades e respectivos valores.

Assim, se eu decidir alterar os títulos de nível 2 do site com CSS inline, terei que o fazer da seguinte forma:

<h2 style="color:white; background-color:black; text-align:center;">Sub-Título do Meu Site</h2>

Como deves calcular, esta forma de colocar o CSS não é boa se, por exemplo, quiseres que todos os <h2> do teu documento tenham este estilo. Neste caso terias que colocar estas regras em todos, um a um.

Vou dar mais um exemplo para te mostrar que, só com CSS, podemos disponibilizar o mesmo elemento no navegador de formas completamente diferentes. Aqui vou usar o <p> e dar-lhe três estilos diferentes, inline.

1. Ao primeiro <p> não vou dar estilos. Vou deixar o "original".
2. Ao segundo <p> vou-lhe dar
   • um fundo cor-de-rosa background-color:pink;
   • bordas arredondadas com 5 pixeis de raio border-radius:5px;
   • cor do texto preta color:black;
   • texto centrado text-align:center;
3. Ao terceiro <p> vou-lhe dar
   • um fundo preto background-color:black;
   • uma sombra branca com 2 pixeis para a direita, 2 pixeis para baixo e um aspecto "desfocado" box-shadow:2px 2px 8px white;
   • cor do texto branca color:white;

O código HTML com o CSS inline é o seguinte:

<p>Isto é um parágrafo para testar diferentes estilos com CSS!</p>
  
<p style="background-color:pink; border-radius:5px; color:black; text-align:center;">Isto é um parágrafo para testar diferentes estilos com CSS!</p>

<p style="background-color:black; box-shadow:2px 2px 8px white; color:white;">Isto é um parágrafo para testar diferentes estilos com CSS!</p>

CSS Interno

O CSS Interno é colocado no elemento <head> do HTML, entre as tags <style></style>. Tem a vantagem de poder ser usado em todos os elementos desse documento que obedecerem a essas regras. Ou seja, só precisas de o escrever uma vez nessa página.

Se usar os exemplos que dei acima, é fácil de perceber que colocando a regra no elemento <head>, ela vai ser válida para todos os elementos <h2> e <p> dessa página. Desta forma não precisas de colocar as regras em cada um deles.

<!DOCTYPE html>
<html lang="pt">
 
  <head>
    <meta charset="UTF-8">
    <title>A minha Primeira Página</title>
    <style>
      h2 {
        background-color:black;
        color:white;
        text-align:center;
      }
        
      p {
        background-color:pink;
        border-radius:5px;
        color:black;
        text-align:center;
      }
    </style>
  </head>
 
  <body>
    <h2>Sub-Título do Meu Site</h2>
    <p>Isto é um parágrafo para testar diferentes estilos com CSS!</p>
    <h2>Outro Sub-Título com os mesmos estilos do anterior</h2>
    <p>Outro parágrafo com os mesmos estilos do anterior.</p>
  </body>
 
</html>

CSS Externo

O CSS Interno parece ser o ideal. Permite-nos poupar tempo e espaço ao permitir que as regras possam ser aproveitadas para um grande número de elementos iguais, na mesma página, certo?

Visto nesse prisma é verdade mas... E se o nosso site tiver 50 páginas? Ou 100? Temos que repetir esse CSS cinquenta ou cem vezes e, mesmo que não precisemos de muito tempo para o copiar de uma página para a outra, estamos a encher as nossas páginas com código repetido, aumentando assim o tempo que elas demoram a carregar e, dessa forma, estragando a experiência aos utilizadores que as estão a ver.

Felizmente é fácil resolver esse problema. A solução chama-se CSS Externo. No fundo, o CSS externo é apenas um (ou mais) ficheiro(s) à parte com todo o teu código CSS.

Queres ver um exemplo de um ficheiro só de CSS? Podes ver um dos ficheiros CSS deste site visitando o seguinte endereço: https://alexandrefigueiredo.com/html5-para-criancas/css/styles.css.

Mas, deves estar tu a questionar-te, como é que o meu ficheiro HTML sabe que ficheiro CSS usar?
É uma excelente pergunta. Para dizermos ao nosso HTML que ficheiro CSS é que queremos usar temos que colocar uma linha no <head> do nosso HTML com essa referência.

Aqui, tal como nos links, podemos usar endereços relativos ou absolutos. O exemplo que eu vou usar, é com um endereço relativo, e parte do princípio que tens um ficheiro CSS, chamado estilos.css, na mesma pasta em que se encontram os teus ficheiros HTML.

<!DOCTYPE html>
<html lang="pt">
 
  <head>
    <meta charset="UTF-8">
    <title>A minha Primeira Página</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
 
  <body>
...

Como vês, é um link, que diz que a relação que há entre o ficheiro CSS e o ficheiro HTML é uma folha de estilos rel="stylesheet" e que também diz qual é o endereço desse ficheiro de estilos href="estilos.css".

Se colocares apenas esta linha em todos os teus ficheiros HTML, o mesmo ficheiro CSS será usado em todas as páginas do teu site. Como os navegadores guardam os ficheiros CSS no computador/smartphone do utilizador por uns tempos, este ficheiro só precisa de ser descarregado uma vez porque depois é sempre reutilizado pelo teu navegador ao carregar as outras páginas do teu site.

E pronto. Já tivémos um cheirinho de CSS. Agora temos que voltar ao HTML porque há uns atributos muito importantes que nos vão muito jeito quando quisermos usar CSS especificamente em alguns elementos.

Vamos então navegar para o Capítulo 7 - Classes e Ids.