Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

CSS (Folhas de Estilo em Cascata) é o código que se utiliza para estilizar a sua página da Web. CSS - Elementar guia-o através do que precisa para começar. Vamos responder a perguntas deste género: Como é que eu coloco o meu texto a preto ou vermelho? Como é que eu faço para que o meu conteúdo apareça neste lugar do ecrã? Como é que eu decoro a minha página da Web, com cores e imagens de fundo?

Então, o que realmente é o CSS?

Tal como o HTML, o CSS não é bem uma linguagem de programação; também não é uma linguagem de demarcação. É uma linguagem de folha de estilos. Isto significa que permite aplicar estilos seletivamente aos elementos nos documentos HTML. Por exemplo, para selecionar todos os elementos do parágrafo numa página HTML e transformar o texto dentro deles em vermelho, iria escrever este CSS:

p {
  color: red;
}

Vamos tentar: copie e cole estas três linhas de CSS num novo ficheiro do editor de texto, depois grave com o nome style.css na diretoria styles.

Mas ainda é preciso aplicar este CSS ao seu documento HTML. Se não, os estilos CSS não vão afetar a forma como o seu navegador apresenta o documento HTML. (Se não tem seguido o nosso projeto, leia Lidar com ficheiros e HTML - Essencial para saber o que fazer primeiro)

  1. Abra o seu ficheiro index.html e cole a linha seguinte no cabeçalho (isto é, entre as marcas <head> e </head>):
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Guarde o ficheiro index.html e aceda-lhe no seu navegador. Deverá ver algo deste género:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.O texto dos seus parágrafos ficou vermelho. Parabéns! Acabou de escrever com sucesso o seu primeiro CSS.

Anatomia de um conjunto de regras de CSS

Vejamos o CSS acima com um pouco mais de detalhe:

A esta estrutura dá-se o nome conjunto de regras (geralmente, "regra" para abreviar). Repare nos nomes de cada parte:

Seletor
Neste caso, é o nome do elemento HTML, no início do conjunto de regras. Seleciona o(s) elemento(s) a que vai ser aplicado o estilo (neste caso, todos os elementos p). Para dar estilo a outro elemento, muda-se o seletor.
Declaração
Trata-se de uma única regra, como  color: red; , que especifica as propriedades que se pretendem modificar no elemento.
Propriedades
São as formas como se pode estilizar o elemento HTML (Neste caso, color é uma propriedade dos elementos <p>). Em CSS, pode escolher que propriedades pretende modificar na regra.
Valor da propriedade
À direita da propriedade, depois dos dois pontos (:), temos o valor da propriedade, que escolhe uma das possíveis aparências que a propriedade pode indicar (há muitos mais valores para color além de red).

Repare em outros aspetos importantes da sintaxe:

  • Cada conjunto de regras (além do seletor) tem que estar entre chavetas ({}).
  • Dentro de cada declaração, utilize dois pontos (:) para separar a propriedade dos seus valores.
  • Dentro de cada conjunto de regras, utilize ponto e vírgula (;) para separar cada declaração da próxima.

Para modificar múltiplas propriedades, basta separá-las com o ponto e vírgula, assim:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Selecionar múltiplos elementos

Também pode selecionar vários tipos de elementos e aplicar um conjunto de regras único para todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo :

p, li, h1 {
  color: red;
}

Diferentes tipos de seletor

Há muitos tipos diferentes de seletor. Por cima, apenas olhámos para seletores de elementos, que selecionam todos os elementos de determinado tipo no documento HTML a que são aplicados. Mas podemos fazer seleções mais específicas. Em baixo, estão alguns dos tipos mais comuns de seletores:

Nome do seletor O que é que este seleciona Exemplo
Seletor de elemento (também chamado seletor de etiqueta ou tipo) Todos os elementos HTML do tipo especificado. p
Seleciona todos os elementos <p>
Seletor de ID  O elemento da página com o ID especificado (numa página HTML, só pode haver um elemento para cada ID e vice-versa). #my-id
Seleciona <p id="my-id"> ou <a id="my-id"> (não devem exisitir ambos na mesma página)
Seletor de classe Seleciona o(s) elementos(s) da página com a classe especificada (é possível haver elementos diferentes com a mesma classe). .my-class
Seleciona <p class="my-class"> e também <a class="my-class">
Seletor de atributo Seleciona o(s) elementos(s) que tenham o atributo dado. img[src]
Seleciona <img src="myimage.png"> mas não seleciona <img>
Seletro de Pseudo-classe O(s) elemento(s) especificado(s), mas só quando estiverem no estado indicado. Ex: quando se tem cursor do rato sobre eles. a:hover
Seleciona <a>, mas só quando o cursor está sobre o link.

Existem muitos mais seletores para explorar, e pode encontrar uma lista mais detalhada no nosso Guia de seletores.

Tipos de letra e texto

Agora que explorámos as bases do CSS, vamos acrescentar mais regras e informação ao nosso ficheiro style.css para que o exemplo tenha boa apresentação. Vamos começar por dar melhor aspeto ao tipo de letra do nosso texto.

  1. Primeiro, volte atrás e encontre o output de Google Fonts que guardou num lugar seguro. Acrescente o elemento <link> no cabeçalho do index.html (entre etiquetas <head> e </head>).
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. De seguida, apague a regra que tinha no ficheiro style.css. Foi um bom teste, mas a cor vermelha não ficou muito bem.
  3. Insira as linhas que se seguem, substituindo a linha de substituição pela linha font-family que obteve no site Google Fonts. (font-family indica o nome do tipo de letra). Esta regra estabelece um tamanho e tipo de letra global, em toda a página, já que o elemento <html> é o elemento raiz e todos os elementos aninhados herdam font-size e font-family:
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    Nota: num documento CSS, tudo o que esteja entre /* e */ é um comentário de CSS, que o navegador ignora quando processa o código. Os comentários servem para escrever notas úteis sobre o que está a fazer.

  4. Agora estabelecemos o tamanho da letra para elementos textuais no corpo do HTML: (<h1>, <li>, e <p>). Também vamos centrar o texto dos nossos títulos e especificar altura da linha de texto e espaçamento entre letras no corpo para o tornar mais legível:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Pode ajustar os valores de px conforme achar que fica melhor, mas em geral, o design deve ter esta aparência:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Caixas, caixas, é tudo sobre caixas

Quando escreve CSS, poderá notar que a maior parte do esforço é referente a caixas — configurar o seu tamanho, cor, posição, etc. Pode pensar na maioria dos elementos de HTML da sua página como caixas colocadas umas sobre a outras.

a big stack of boxes or crates sat on top of one another

Sem surpresa, a disposição de elementos em CSS assenta principalmente num modelo de caixa. Cada um dos blocos que ocupa espaço na sua página tem propriedades como:

  • padding (preenchimento) — espaço em volta do elemento (ex: em volta do texto de um parágrafo)
  • border (contorno) — a linha que fica em torno do preenchimento
  • margin (margem) — espaço exterior em torno do elemento

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

Nesta secção também vamos usar:

  • width — largura do elemento
  • background-color — cor de fundo que fica atrás do conteúdo e preenchimento do elemento
  • color — a cor do conteúdo (geralmente o conteúdo é texto)
  • text-shadow — sombreado do texto de um elemento
  • display  modo de apresentação do elemento (não se preocupe ainda com detalhes)

Portanto, vamos começar e acrescentar algum CSS à nossa página! Acrescente as novas regras no fim do ficheiro e não tenha medo de mudar os valores para ver como fica.

Alterar a cor da página

html {
  background-color: #00539F;
}

Esta regra estabelece uma cor de fundo na página inteira. Mude o código de cor para aquele que escolheu quando planeou o seu site.

Ordenar o corpo

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Agora o elemento <body>. Há várias declarações, então vamos ver uma de cada vez:

  • width: 600px; — Faz com que a largura seja sempre 600 pixels.
  • margin: 0 auto; — Quando se dá dois valores a margin ou padding, o primeiro afeta o espaço por cima e por baixo do elemento (neste caso, 0), e o segundo o espaço à esquerda e à direita (auto é um valor especial que divide o espaço existente de forma igual entre a esquerda e a direita). Também pode utilizar um, três ou quatro valores, conforme a documentação da sintaxe de margin.
  • background-color: #FF9500; — como já vimos, estabelece a cor de fundo. Esta é uma tonalidade vermelho alaranjado para o corpo, em vez do azul escuro do elemento <html>, mas esteja à vontade para experimentar outras cores.
  • padding: 0 20px 20px 20px; — temos quatro valores nesta propriedade, para deixar bastante espaço em volta do conteúdo. Desta vez, fazemos com que não haja preenchimento por cima do elemento e 20 pixels à esquerda, à direita e por baixo. Os valores estabelecem, por esta ordem, o preenchimento por cima, à direita, por baixo e à esquerda. Tal como a margin, pode usar um, dois ou três valores, conforme a documentação da sintaxe de padding.
  • border: 5px solid black; — simplesmente, cria um contorno de todos os lados do elemento, com cor preta, a traço cheio (contínuo) e espessura de 5 pixels.

Posicionar e estilizar o título da nossa página principal

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Deve ter notado que há espaço em branco horrível no topo do conteúdo da página. Isto acontece porque o navegador aplica estilo por omissão ao elemento <h1> (entre outros), mesmo que não se tenha aplicado qualquer CSS! Embora isso possa parecer má ideia, na prática até uma página sem folha de estilos tem que ter alguma legibilidade. Para nos livrarmos deste espaço, colocamos margin: 0;.

De seguida, colocámos o preenchimento por cima e por baixo a 20 pixels, e demos ao texto a mesma cor que a cor de fundo do elemento <html>.

Utilizámos uma propriedade interessante, text-shadow, que aplica sombreado ao texto de um elemento. Estes são os quatro valores da mesma:

  • O primeiro valor em pixels estabelece a distância horizontal entre a sombra e o texto, ou seja, quanto ela se desvia para a direita. Um valor negativo desvia para a esquerda.
  • O segundo valor em pixels estabelece a distância vertical entre a sombra e o texto, ou quanto ela se desvia para baixo. Um valor negativo desvia para cima.
  • O terceiro valor em pixels é o raio de desfoque da sombra — quanto maior o valor, mais a sombra ficará esbatida.
  • O quarto valor é a cor da sombra.

Novamente, tente experimentar os valores para ver como fica!

Centrar a imagem

img {
  display: block;
  margin: 0 auto;
}

Por fim, vamos centrar a imagem para ficar melhor. Utilizámos o truque de colocar margin: 0 auto como fizemos com o corpo, mas temos que fazer outra coisa. O elemento <body> está ao nível de bloco, ou seja, ocupa toda a largura da página e podem ser-lhe aplicados valores de margem, e outros valores de espaçamento. Por outro lado, as imagens são elemento em linha, a que não se podem aplicar estes valores. Então, para a margem ser aplicada à imagem, temos que lhe atribuir comportamento ao nível do bloco com display: block;.

Nota: Estas instruções assumem que está a usar uma imagem mais pequena que a largura do corpo (600 pixels). Se for maior, vai transbordar do corpo e ocupar espaço no resto da página. Para retificar isto, pode 1) reduzir a largura da imagem com um programa de edição gŕafica, ou 2) reduzir a imagem com CSS utilizando a propriedade width no elemento <img> com um valor mais pequeno, como 400 px;.

Nota: não se preocupe se ainda não entende display: block; e a distinção enter bloco e em linha (block-level/inline). Irá preceber à medida que estuda o CSS com mais profundidade. Pode descobrir mais sobre os diferentes valores de display na página de referência de display.

Conclusão

Se seguiu as instruções nesta página, a sua página deve ter este aspeto (e pode ver a nossa versão aqui):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Se ficou preso, pode sempre comparar o seu trabalho com o exemplo terminado no GitHub.

Aqui, mal tocámos na superfície do CSS. Para saber mais, consulte o tópico de Aprender CSS.

 

Neste módulo

 

Etiquetas do documento e contribuidores

Contribuidores para esta página: diogo-panaca, mdnwebdocs-bot, mansil
Última atualização por: diogo-panaca,