Curso de CSS – Aula 01: Introdução às CSS (Folhas de Estilo)

CSS é abreviação para o termo em inglês Cascading Style Sheets, traduzido para o português como Folhas 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).

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 desenvolver 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 nada mais são então do que 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.

Curso de CSS

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.

Curso de CSS

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 estamos perdendo um dos maiores poderes da linguagem CSS, que é 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 a 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 que está aplicado no parágrafo do exemplo acima.

Até a próxima aula!

Coordenador de curso na Etec de Itapira, pós-graduado em desenvolvimento de sistemas web e professor nos cursos de Administração e Técnico em Informática para Internet. Nerd por vocação e blogueiro por opção, é autor do livro “Diário de um Blogueiro” e dos blogs Neurônio 2.0 e Hiperbytes.

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here