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.

CSS

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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Klaylton Fernando
    2 de dezembro de 2011

    Muito boa a sua iniciativa, vou acompanhar todos os capítulos, já conheço um pouco de CSS, mas já faz algum tempo que quero me profissionalizar na area.



  2. Jose Correia
    2 de dezembro de 2011

    Olá Diogo.
    Optimo artigo. Quero mesmo muito aprender css, html e php.
    Cumprimentos. Depois de este tutorial acabar podia ensinar java script?



  3. Rick
    3 de dezembro de 2011

    Parabéns pelo post Diogo, eu adoro ensinar e trabalhar com CSS, iniciei um curso em meu site, mas em vídeos.



  4. Gigaconteudo.com
    27 de dezembro de 2011

    Muito bom. Já me aventuro no CSS há algum tempo, e todo conteúdo sobre o tema é muito bem vindo.



  5. Thiago Rodrigues
    31 de janeiro de 2012

    Eu sempre tenho o interesse de imprimir alguns artigos de vocês. Principalmente os mais explicativos.

    Bem que vocês poderiam oferecer versões para impressão, só com o conteúdo.



  6. eduardo
    28 de fevereiro de 2012

    TESTE LOUCO



  7. Gilmar
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.



  8. carlosromero
    25 de setembro de 2013

    Dicas excelentese atuais. Estou limpando o conteúdo do meu blog, criando uma folha de estilos externa. Obrigado.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz