• Tweet
• Email

• Tweet
• Email

CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags <style> </style> na secção head dos documentos HTML, ou através de folhas de estilo externas (Ver Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos. O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens.

Quando a tag <img> surgiu os websites ganharam outra vida e a internet mudou, com os programadores web a necessitarem de mais meios e técnicas para controlar os elementos, e novas tags foram surgindo, como o negrito ( <b> ) ou o itálico ( <i> ). Além dos benefícios que já conhecemos, CSS ainda nos beneficia das seguintes formas:

• Fácil manutenção – Uma única folha de estilos consegue controlar múltiplos documentos HTML, pelo que alterar a estilização de um website inteiro pode ser feito em uma única folha de estilos.
• Tamanhos de ficheiro reduzidos – A condensação de todas as regras de estilização em um único ficheiro retira código dos documentos HTML, o que permite que os ficheiros sejam mais pequenos e as páginas sejam carregadas mais rapidamente.
• Controle total – Com CSS você tem controle total sobre a apresentação dos seus documentos HTML.

1. COMO FUNCIONA?

O termo cascata descreve na perfeição o modo de funcionamento da folha de estilos e como as regras podem ser aplicadas aos documentos. A cascata irá definir qual a regra de estilização que irá ter superioridade sobre outra mesmo que outra seja aplicada posteriormente. Confuso? não desespere:

• Folha de estilos do navegador – os navegadores por defeito aplicam uma estilização standard a todos os websites e embora possam diferenciar um pouco entre navegadores, todos têm as mesmas funcionalidades em comum (Como por ex. texto com a cor preta e hiperligações a azul).
• Folha de estilos do utilizador – A grande maioria dos navegadores permite ao utilizador especificar as suas próprias preferências de estilização, que cria uma folha de estilos personalizada que tem superioridade perante a folha de estilos do navegador.
• Folha de estilos do programador – Este é o caso em que o documento HTML especifica uma folha de estilos a ser utilizada e o navegador irá aplicá-la, sendo que esta tem prioridade sobre as anteriores.

2. CRIAR REGRAS DE ESTILIZAÇÃO

Em CSS cada regra de estilização é composta por duas secções principais, o selector que é o que especifica quais os elementos alvo da estilização, e o bloco de declarações que é onde especifica como é que as propriedades do elemento seleccionado irão ser estilizadas.

Uma regra de estilização começa com o selector, seguida do bloco de declarações que fica dentro de chavetas  { } que pode conter mais de uma propriedade e valor correspondente como no exemplo a seguir:

Por norma o selector selecciona um elemento HTML para aplicar a estilização, como todos os cabeçalhos h1 existentes no documento, como exemplificado na imagem acima. O bloco de declarações do exemplo contém duas declarações para determinar a cor do texto e do background. Para a propriedade color foi atribuída a cor red e assim todos os cabeçalhos h1 irão ter a cor vermelha. Para a propriedade background foi atribuída a cor black e desta forma todos os cabeçalhos h1 irão ter o texto com a cor vermelha e o fundo irá ter a cor preta. O caracter utilizado para atribuir o valor a uma propriedade é dois pontos “:” e as declarações são separadas por ponto e vírgula “;”. Note também que a última declaração do bloco de declarações não necessita de um ponto e vírgula “;” no final.

Conheça algumas regras de boas práticas e comece já a praticar:

1. Quando criar uma nova regra de estilização CSS o primeiro passo é definir qual o elemento HTML ao qual irá ser aplicada a estilização, então o selector é tudo o que aparece antes da chaveta que inicia o bloco de declarações: h1
2. De seguida o bloco de declarações deve ser iniciado, inserindo as chavetas: h1 {  }
3. O próximo passo é inserir uma declaração dentro do bloco de declarações, atribuindo um valor a uma propriedade: h1 { color:red }
4. De seguida pode adicionar uma ou várias declarações, dependendo da estilização que quer aplicar ao elemento: h1 {  color:red; background: black }
5. Tal como referimos no primeiro ponto, o selector é tudo o que aparece antes do bloco de declarações – Então se pretender aplicar o mesmo estilo a vários elementos pode fazê-lo separando os elementos com uma vírgula “,” da seguinte forma: h1, h2 {  color:red; background: black }

Eis o resultado:

3. APLICAR REGRAS DE ESTILO INTERNAS

Uma folha de estilos é nada mais nada menos que uma panóplia de regras de estilização que vão ser aplicadas em um documento HTML. Uma folha de estilos interna pode ser criada facilmente inserindo o código dentro das tags <style> </style> na secção <head> </head> do documento HTML. A tag inicial <style> deve conter informação sobre o tipo de estilo que estamos a aplicar, neste caso será “text/css” que irá determinar que estamos a utilizar estilos CSS.

Todos os navegadores modernos suportam CSS, vamos meter mãos à obra e praticar um pouco:

1. Comece por criar um novo documento HTML com os elementos h1,h2 e p.

   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Folha de Estilos Intera</title>
   </head>
   
   <body>
   <h1>Este é o título principal, h1</h1>
   <h2>Este é o título secundário, h2</h2>
   <p>Este é um parágrafo de texto normal</p>p>
   </body>
   </html>

2. De seguida na secção <head> </head> insira um o código que irá estilizar os elementos inseridos na página:

   <style type="text/css">
   h1 { color:red; background: black }
   h2 { color:green; background:yellow }
   p { color: orange }
   </style>

3. Guarde o ficheiro HTML e abra-o no seu navegador preferido para ver o resultado:
   
4. As regras de estilização também podem ser aplicadas individualmente em linha nos elementos HTML, através do atributo “style”. Edite o seu ficheiro para trocar as cores do texto e do fundo dos cabeçalhos, aplicando estilização em linha:

   <h1 style="color:black; background: red">Este é o título principal, h1</h1>
   <h2 style="color:yellow; background:green">Este é o título secundário, h2</h2>

   
   Como poderá confirmar, a estilização em linha tem prioridade sobre a folha de estilos interna.

4. APLICAR REGRAS DE ESTILO EXTERNAS

Uma folha de estilos externa é nada mais nada menos que uma panóplia de regras de estilização criadas num ficheiro com a extensão .css que vão ser aplicadas em um documento HTML, através da ligação feita à mesma. A folha de estilos pode ser linkada aos documentos HTML utilizando a tag <link> com o atributo type “text/css” para especificar qual o tipo de estilo que estamos a aplicar, o atributo rel com o valor “stylesheet” e um atributo href para definir onde está o ficheiro .css.

Nada melhor do que praticar para aprender:

1. Crie um documento HTML com um cabeçalho e um parágrafo:

   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Folha de Estilos Externa</title>
   </head>
   
   <body>
   <h1>Este é o título principal, h1</h1>
   <p>Este é um parágrafo de texto normal</p>
   </body>
   </html>

2. Na secção <head> </head> insira a ligação à folha de estilos externa:

   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Folha de Estilos Externa</title>
   <link type="text/css" rel="stylesheet" href="style.css" />
   </head>

3. Guarde o seu documento HTML e crie um novo documento. Insira o seguinte código no seu novo documento:

   h1 { color: red; background: black }
   p { color: orange }

4. Guarde o seu novo documento como style.css e assegure-se que ambos os ficheiros (o HTML e o CSS) estão no mesmo diretório. Abra o ficheiro HTML no seu navegador e observe o resultado:
   
5. Além do código de estilização, pode inserir comentários no seu código. Isto é especialmente útil quando se tem imensas linhas de código e existe a necessidade de identificar algumas secções de código, para comentar basta seguir o exemplo:

   /* Comentário */

5. IMPORTAR OUTRAS FOLHAS DE ESTILO

A estlização utilizando as folhas de estilo não está limitada a um ficheiro do género do criado nos passos acima. Podem ser utilizados múltiplos ficheiros de folha de estilos para controlar diferentes aspectos de documentos HTML utilizando o @import para especificar o caminho para cada ficheiro a importar. Este @import deverá ser colocado antes de qualquer código dentro do ficheiro da folha de estilos principal e termina-se com ponto e vírgula “;”.

Mais uma vez passamos à ação, praticando:

1. Crie um novo documento HTML com a ligação ao ficheiro .css e  com os cabeçalho e um parágrafo:

   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Folha de Estilos Externa</title>
   <link type="text/css" rel="stylesheet" href="style.css" />
   </head>
   
   <body>
   <h1>Este é o título principal, h1</h1>
   <h2>Este é o título secundário, h2</h2> 
   <p>Este é um parágrafo de texto normal</p>
   </body>
   </html>

2. Guarde o ficheiro HTML e crie o ficheiro style.css. Dentro do ficheiro CSS insira o código de importação dos ficheiros adicionais:

   @import "cabecalhos.css";
   @import "paragrafos.css";

   Guarde o ficheiro.

3. Crie o ficheiro cabecalhos.css e insira o código de estilização dos cabeçalhos:

   h1 {color:red; font-family: "lucida handwriting", cursive }
   h2 {color: orange }

   Guarde o ficheiro.

4. Crie o ficheiro paragrafos.css e insira o código de estilização dos parágrafos:

   p {color: green }
   p:first-letter {font-size: xx-large}

   Guarde o ficheiro.

5. Abra o ficheiro HTML no seu navegador e observe o resultado:
   

6. NÃO ESQUECER

• CSS é uma linguagem fornecida pela W3C
• Cada regra de estilização é composta por pelo menos 1 selector e pelo bloco de declarações
• Cada declaração determina uma propriedade e um valor a ser aplicado a uma determinada propriedade
• Uma regra de estilização pode conter múltiplas declarações separadas por “;”
• Uma folha de estilos interna é um conjunto de regras de estilo inseridas dentro da tag <style> </style> na secção <head> </head> do documento
• As regras de estilização podem ser aplicadas em linha atribuindo propriedades e valores no atributo style de um elemento HTML
• A estilização em linha dificulta a manutenção e a alteração da estilização, pelo que devem ser evitadas
• As folhas de estilo externas são altamente recomendadas por condensarem todo o conteúdo de estilização num sítio só, tornando mais fácil a programação, criando código limpo e optimizando os documentos não introduzindo código em excesso
• Uma folha de estilos externa é um conjunto de regras de estilo introduzidas num ficheiro de texto com a extensão .css
• A ligação a uma folha de estilos externa é feita utilizando o elemento <link> na secção <head> </head> do documento
• Cada <link> deve conter os atributos rel, type e href
• Todas as ordens de importação (@import) têm de ser introduzidas antes de qualquer texto na folha de estilos

Abraço e até já!