Ir para o conteúdo

Cascading Style Sheets

Cascading Style Sheets (CSS) ou Folhas de Estilo em Cascata, é o nome de uma tecnologia criada para complementar a linguagem HTML e facilitar a criação e manutenção do design de páginas web através de estilos, o que possibilita a mudança da aparência de todos os elementos de todas as páginas que estejam relacionados com determinado campo do mesmo estilo. Em vez do programador criar uma ligação para uma folha de estilos que pode estar implementada na página ou num ficheiro exterior. Devido a esta nova tecnologia ficou possível alterar muitos estilos de várias páginas e objectos alterando apenas num campo.

A primeira versão chamada CSS1 foi lançada em Dezembro de 1996 e é um modelo simples de formatação, na maior parte para apresentações screen-based. O CSS1 tem aproximadamente 60 propriedades.

A segunda versão CSS, CSS2 foi lançada em Maio de 1998, além de incluir todas as propriedades do CSS1, possui por volta de 70 novas propriedades.

Ambos os padrões CSS1 e CSS2 são reconhecidos pelo W3C (World Wide Web Consortium), entidade que cuida do desenvolvimento e padronização das tecnologias ligadas à internet.

Para que servem?

Para dar cor e forma às páginas web! A intenção das folhas de estilo é separar o desenvolvimento dos conteúdos das páginas da apresentação das mesmas. Por analogia, podemos supor que a nossa página é uma pessoa, e as folhas de estilo são roupas, brincos, anéis, etc.: podemos personalizá-la da forma que queremos, sem ser necessário mudar a pessoa fisicamente. No caso das páginas web, podemos personalizar de várias formas a apresentação dos conteúdos das páginas, mexendo apenas no CSS.

Um exemplo concreto

Vamos supor que temos a seguinte página:

<html>
<head>
  <title>Experiências com CSS</title>
  <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>

<body>
  <h1>Esta é a minha página</h1>
  <p>Aqui vem uma parágrafo com um <a href="https://www.portugal-a-programar.pt">link</a>. E a seguir, uma lista de coisas a fazer:</p>
  <ul>
    <li>Aprender HTML</li>
    <li>Aprender CSS</li>
    <li>Criar uma página</li>
    <li>Ir trocando os estilos e ver no que dá</li>
  </ul>
  <div id="caixa">E esta é uma caixa que posso colocar onde quiser</div>
</body>
</html>

Ao abrir isto no browser, ficamos com uma página, tipicamente, a preto e branco com os conteúdos que definimos. Isto porque o browser assume um estilo predefinido, que pode variar conforme as diferentes aplicações de navegação na internet. Porém, temos total liberdade para modificar estes estilos de acordo com as nossas necessidades. Vamos supor agora que temos na mesma directoria do ficheiro HTML, um ficheiro com o nome estilos.css com o seguinte conteúdo:

estilos.css
body {
  background-color: #ECF2F8;
  margin: 20px 5px 20px 10px;
}

h1 {
  color: #6666CC;
  text-decoration: underline;
  font-family: "Calibri", "Arial";
  font-style: italic; 
}

a:link, a:visited {
  color: #6596C8;
  text-decoration: underline;
}

a:hover {
  background-color: #C0D4E8;
}

ul li .importante {
  background-color: yellow;
}

#caixa {
  padding: 10px;
  border: dashed 2px #6596C8;
}

No browser Mozilla Firefox (e noutros, possivelmente com pequenas diferenças) obter-se-á o seguinte resultado:

Resultado da página HTML

Podemos mudar completamente o design da página, mexendo apenas no CSS. Vamos provar isso mesmo, alterando o conteúdo do ficheiro estilos.css para o seguinte:

estilos.css
body {
  background-color: #E6FFCC;
  color: #61BD00;
}

h1 {
  color: #54A300;
  text-align: center;
  font-size: 50px;
}

a:link, a:visited {
  color: #00BD5B;
  text-decoration: none;
  border-top: 1px solid #00BD5B;
  border-bottom: 1px solid #00BD5B;
}

a:hover {
  font-weight: bold;
}

ul li {
  margin-bottom: 15px;
}

ul {
  margin-left: 50px;
}

ul li .importante {
  font-weight: bold;
  font-size: 20px;
}

#caixa {
  position: absolute;
  top:0;
  right:0;
  width: 200px;
  padding: 10px;
  color: black;
  background-color: #81FA00;
}

E obtemos um resultado diferente, sem mudar uma única linha de HTML:

Resultado da página HTML com CSS alternativo

Esta é uma das grandes vantagens do CSS.

Aprender CSS

Existem muitos lugares onde se pode aprender CSS. Ficam alguns links de referência:

Ferramentas úteis para CSS

Para quem já conhece CSS, aqui fica um leque útil de ferramentas online para acelerar e optimizar o desenvolvimento das folhas de estilo.