CSS é abreviação para o termo em inglês Cascading Style Sheets, traduzido para o português como Folha de Estilo em Cascata. É uma linguagem de desenvolvimento web utilizada para definir a apresentação visual (estilos) de documentos escritos em uma linguagem de marcação de texto (HTML).
Esta é a primeira aula do Curso de CSS e, caso ainda não tenha visto, recomendo que leia antes o artigo introdutório: Curso de Desenvolvimento Web em Linguagem CSS.
A definição mais precisa para CSS encontra-se no site da W3C e diz:
“Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web”.
Isso significa dizer que o desenvolvedor web tem total controle sobre as características visuais de suas páginas web, ou seja, é possível alterar fontes, cores, espaçamentos, tamanhos, posicionamentos, etc, de qualquer elemento HTML inserido em suas páginas.
As folhas de estilo são, então, um conjunto de regras que define como será apresentado visualmente um determinado elemento (tag) do HTML. E, dentre as inúmeras vantagens que poderíamos citar em utilizar a linguagem CSS, a maior delas com certeza é a possibilidade de separar completamente a parte visual (estilo) do conteúdo do site.
Estilo inline
O método mais simples e direto de aplicar estilos em um elemento HTML é através do atributo style, conforme mostram os exemplos a seguir:
<html>
<head>
<title>Introdução às CSS</title>
</head>
<body>
<h1 style="color:red; font-size:32px;">Hiperbytes</h1>
<p style="color: blue; font-size:22px;">Curso de HTML</p>
<p style="color: blue; font-size:22px;">Curso de CSS</p>
</body>
</html>
Veja na imagem abaixo como o navegador exibe o código do exemplo acima.
Este método, denominado estilo inline, é válido segundo as normas da W3C. No entanto, este tipo de prática não é recomendada, pois não é possível o reaproveitamento de código, dificulta a leitura para manutenção e perde-se um dos maiores poderes da linguagem CSS: separar o conteúdo da estilização.
Sintaxe CSS
Chamamos de regra CSS a unidade básica de uma folha de estilo, sendo a menor porção capaz de produzir um efeito de estilização. Uma regra é composta por um seletor, uma propriedade e um valor. Sendo que o seletor indica qual elemento (tag) HTML você deseja manipular, a propriedade qual característica você deseja alterar, e o valor a definição propriamente dita a ser assumida pelo seletor. Vamos à um exemplo para melhor compreensão.
h1{
color: red;
}
Para criar uma regra CSS devemos começar pelo seletor que, neste primeiro momento, será a tag HTML da nossa página. Em seguida, devemos abrir um bloco de código com caractere abre-chaves ( { ) e, após inserir todas as características desejadas, devemos fechar o bloco de código com o caractere fecha-chaves ( } ).
Uma regra CSS pode conter mais de uma declaração de estilo (propriedade e valor). Isto significa que entre o abrir e fechar das chaves ( {} ), podemos inserir quantas declarações de estilização forem necessárias para aquele seletor. Veja alguns exemplos:
h1{
color: red;
text-align: center;
}
p{
color: green;
text-align: center;
}
As regras CSS acima poderiam ser escritas da seguinte maneira:
h1{ color: red; text-align: center; }
p{ color: green; text-align: center; }
Esta é uma forma muito mais compacta de escrever regras CSS. No entanto, a legibilidade é comprometida e torna-se mais difícil encontrar erros no código.
A sintaxe CSS (forma de escrita) permite múltiplos espaços em branco que são tratados como um espaço simples. Além disso, a linguagem CSS não é case sensite, ou seja, tanto faz você escrever com letras maiúsculas ou minúsculas. Veja os exemplos a seguir:
h1
{
COLOR: RED;
TEXT-ALIGN: CENTER;
}
p{
color: green;
text-align: center;
}
A definição da forma de escrita das regras CSS fica a critério do desenvolvedor. Recomenda-se que seja adotado um padrão para tornar o código uniforme, podendo você escolher qualquer uma das formas mostradas acima ou até mesmo outras variações. Contudo, a forma que é mais difundida entre os desenvolvedores e que recomendo, é a segunda forma de escrita a qual está aplicada no parágrafo do exemplo acima.
Este artigo continua em Aula 02: Estilo incorporado e cores em hexadecimal.
