CSS - Cascading Style Sheets

Bom dia pessoal ... depois de duas semanas de férias, estamos voltando às atividades. Quer dizer, começo amanhã, mas ando meio desesperado em mexer com um código rsrs ... meio que vício mesmo.


Pois bem, continuando com nossos artigos de linguagem, vamos falar hoje do CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata). Trata-se de uma linguagem de folhas de estilo, usada geralmente com o HTML. Através desta linguagem, conseguimos dar forma à nossa homepage, incluindo posições de figuras, fontes de letras, cor, margens e uma infinidade de outras coisas. É interessante o por que do nome Cascata: as propriedades do CSS, aplicadas aos marcadores, estende-se pelo documento, como uma cascata aos marcadores aninhados.

Existem três formas de incorporarmos o CSS em uma página da web, cada um apropriado para determinada situação. São elas:

• Importado ou Referenciado: neste caso, fazemos os códigos de CSS em um arquivo separado e importamos na página HTML usando a seguinte tag: <link rel="stylesheet" type="text/css" href="estilo.css"/>.  Esta forma é mais apropriada, e geralmente a mais usada, quando temos muitas páginas de um site que usam o mesmo estilo. Desta maneira, precisamos apenas de um arquivo CSS que pode ser importado e aplicado para várias páginas.
• Incorporado: neste caso, as regras estão declaradas dentro do próprio documento, no cabeçalho da página. Neste caso, usamos quando vamos fazer uma única página web.
• Em Linha: quando as regras são declaradas dentro do próprio marcador HTML. Se aplica como no caso anterior e quando só será aplicado a determinada parte do documento: Exemplo: numa página, apenas um parágrafo terá uma fonte de 12 pixels e uma margem esquerda de 10 px. Podemos escrever <p style "font size:12px; margin-left:10px;">Texto do parágrafo.</p>

Outro detalhe interessante são as unidades de medidas usadas em CSS. Usa-se muito o pixel (px) que é uma unidade fixa, e o em (%), usado muito em sites responsivos (que se adaptam a dispositivos móveis). Abaixo temos uma pequena tabela de conversão de unidades de CSS.

Para vermos um exemplo prático, vamos pegar o código que digitamos no artigo anterior. Vamos fazer cada linha de uma cor e uma fonte diferente. O código será incorporado, visto ser uma página só. Abaixo como ficaria o código CSS:

No caso, a primeira linha será vermelha com fonte 20 pixels, a segunda verde com 18 pixels e a terceira será cinza com fonte 15 pixels. Olha o resultado:

Muito legal não é mesmo? Podemos fazer muita coisa com o CSS. Assim, quem quer fazer um site, além do HTML, tem que aprender o CSS. No próximo artigo, vamos falar de outra linguagem muito importante, que dá a interação nas páginas WEB: o JavaScript ... até lá ...