What is CSS?

CSS é uma abreviação para Cascading Style Sheets, é a primeira linguagem usada para descrever o visual e a formatação de páginas da web na internet e documentos de marcação (ex: HTML e XML) em geral.

Uma linguagem de marcação parecida com HTML, foi inicialmente criada para fornecer informações sobre formatação e aparência, mas logo ficou claro que isso faria muito mais sentido dividir em duas camadas: o conteúdo e a aparência, com CSS cumprindo a tarefa deste último. Historicamente é o HTML que tem tags como "font", o qual o único propósito era ajustar a tipo de fonte, cor e tamanho, um trabalho que hoje, é feito pelo CSS. Isso permite ao desenvolvedor reutilizar a formatação em vários lugares do mesmo documento e até mesmo de outros documentos. Aqui está um exemplo para facilitar e não se preocupe se não estiver claro de como funciona - tudo vai ser explicado ao longo deste tutorial.

Como era feita a modificação de texto antigamente, utilizando apenas HTML:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Uma abordagem mais moderna com CSS

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Observe como eu simplesmente reutilizei as mesmas regras em várias tags HTML. Isso é uma vantagem, pois utilizamos a mesma classe três vezes, como pode ver no exemplo, mas não termina por aí - coloque o CSS em um arquivo externo (.css). e você poderá utilizar as mesmas regras em TODO seu website. E quando você decidir que aquele texto destacado devesse ser vermelho ao invés de azul? Com a primeira abordagem, você tem que editar manualmente as tags em todos os lugares - com CSS, apenas modifique a classe ".highlight" uma única vez.

Sumário

CSS permite aplicar facilmente regras sobre formatação e layout para os seus elementos HTML e reutilizar estas mesmas regras em múltiplos elementos e até páginas. Nesta introdução, nós vimos um código CSS mas nós não falamos como isso funciona e de que maneira que é feito. - este será um assunto para os próximos capítulos, onde nós começaremos do zero e explicaremos isso nos mínimos detalhes.