Quando se fala em Cascading Style Sheet, à primeira vista poderá ser intimidante, mas não é nada que não esteja perfeitamente ao alcance de todos. De hoje em dia, CSS é uma das ferramentas mas simples e úteis disponível para os desenvolvedores web e é amplamente conhecido no seio da internet. Neste artigo vamos entrar um pouco nos princípios básicos de CSS e explorá-los um pouco mais a fundo, onde vamos abordar a forma como você poderá utilizar CSS para simplificar a tarefa de gestão de um website, estruturado adequadamente com Começando com CSS – Dê os primeiros passos em segurança.


1. COMO DEFINO ESTILOS EM CSS?

O princípio básico de CSS é permitir que os designers possam definir estilos, que são os detalhes de formatação, como os tipos de letra, tamanho do tipo de letra, tamanho dos elementos, cores, entre muitos outros detalhes. Depois torna-se mais fácil aplicar essa estilização aos elementos da página, utilizando os selectores. Vejamos como isto é feito recorrendo a este exemplo:

<h1> Título Principal </h1>
<p> Texto relativo ao título principal </p>

<h2> Título Secundário </h2>
<p> Texto relativo ao título secundário </p>

Neste caso, o título principal e o título secundário iriam ser formatados usando a folha de estilos interna do browser. Agora, usando um tipo de estilização que vamos estudar mais à frente, vamos definir a estilização dos títulos principais (h1) e títulos secundários (h2):

<head>
    <style type="text/css">
        h1,h2{
            font-family:sans-serif;
            color:#FF0000;
        }
    </style>
</head>
<body>
<h1> Título Principal </h1>
<p> Texto relativo ao título principal </p>

<h2> Título Secundário </h2>
<p> Texto relativo ao título secundário </p>
</body>

Esta formatação ou estilização deve ser sempre introduzida no príncipio do documento, dentro da tag <head>. Neste momento você já tem uma pequena ideia do propósito do CSS, e como acontece em outras situações, você pode aplicar a estilização de diversas maneiras, como vamos perceber mais à frente.

2. ESTILIZAÇÃO EM LINHA

Este é considerado o método mais simples de introduzir a estilização nas suas páginas web. O estilo em linha é aplicado ao elemento em questão através do seu atributo style:

<p style="font-family:sans-serif; color:#FF0000;">
Este parágrafo tem a estilização descrita acima
</p>

A estilização em linha não tem selectores e as declarações de estilo são aplicadas ao elemento em questão, neste caso é a tag <p>. No entanto, apesar do benefício de ser o método mais simples de aplicar estilização, a estilização em linha tem uma grande desvantagem – é impossível reutilizá-las. A título de exemplo, a estilização que foi aplicada acima não poderá ser reutilizada porque não tem como o fazer. Se quisermos aplicar a mesma formatação a outro elemento, teremos de escrever tudo novamente. Outro inconveniente tem a ver com alterações ao código: se pretendermos alterar a estilização, temos de percorrer todo o código até encontrarmos o elemento que pretendemos alterar.

3. ESTILIZAÇÃO EMBUTIDA

Outra alternativa para introduzir estilização nos elementos é através da estilização embutida. Este foi o exemplo que demos no início do artigo, em que aplicámos estilização ao H1 e H2. Com esta alternativa, você pode declarar toda a estilização no início do documento, dentro da tag <style>, que por sua vez estará dentro da tag <head>:

<head>
    <style type="text/css">
        Aqui você introduz a estilização
    </style>
</head>

O atributo type especifica a linguagem que você estará a utilizar quando está a definir a estilização. Neste caso utilizamos text/css porque vamos utilizar a linguagem CSS. Uma grande vantagem em relação à estilização em linha tem a ver com o facto de que se você necessitar de fazer uma alteração nos estilos do documento, tem tudo no mesmo lugar. Desta forma, você poderá poupar imenso tempo quando for necessário fazer uma alteração na estilização do mesmo, ao contrário do que acontece no exemplo anterior onde terá que procurar em todo o documento pelo elemento de estilização em questão. Por outro lado tem uma desvantagem relacionada com a utilização de vários estilos em todo o seu website, e não só no documento em questão. No entanto também existe uma solução para isso. A folha de estilos externa.

4. FOLHA DE ESTILOS EXTERNA

A folha de estilos externa é um ficheiro (que normalmente tem a extensão .css) onde estão todos os estilos de uma página web, evitando desta forma a introdução de estilos em cada documento, ou em cada elemento em separado dentro do documento. Com a utilização deste método você pode ligar todas as páginas do seu website ao mesmo ficheiro .css, e quaisquer alterações que faça neste ficheiro, irão ter efeito em todo o website. É portanto razoável concluir que este será o método que mais de adequa à maioria dos websites, permitindo poupar imenso tempo, não só na concepção da estilização, como também na hora de efectuar alguma alteração.

Para fazer a ligação a uma folha de estilos externa (neste caso utilizaremos o ficheiro style.css) basta introduzir a ligação ao mesmo, dentro da tag <head>:

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Vamos agora utilizar o exemplo apresentado no início do artigo, mas desta vez vamos aplicá-lo na folha de estilos externa:

h1,h2 {
       color: #FF0000
       font-size: 12px;
       font-family: sans-serif;
      }

Agora que temos o nosso ficheiro style.css criado (o indicado é estar no root do website), podemos fazer a ligação ao mesmo dentro do documento:

<head>
    <title> Página de Exemplo </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h1>Título Principal</h1>
    <p> Texto relativo ao título principal</p>

    <h2> Título Secundário </h2>
    <p> Texto relativo ao título secundário </p>
</body>

Neste pequeno trecho de código omitimos as tasgs <meta> e <html>.

Para o auxiliar na produção do seu código HTML/CSS aconselhamos-lhe os nossos artigos 10 Programas de Edição HTML e CSS para Windows e Linux e ainda 8 Programas de Edição HTML e CSS para Mac.

Este ficheiro pode ser introduzido em qualquer documento do seu website, podendo desta forma optimzar o seu tempo, reutilizando o que já escreveu anteriormente, obviamente sem necssidade de o reescrever.

5. SINTAXE

Uma folha de estilos é um conjunto de definições de estilo concentradas num só sítio, com o propósito de lhe proporcionar uma leitura fácil e ter toda a informação disponível rapidamente. Além disso, qualquer alteração que você faça neste ficheiro, irá ter efeito em todo o website.

Toda e qualquer declaração de estilo tem duas componentes principais:

  • Uma lista de selectores, separados por vírgulas, que vão definir os elementos aos quais vão ser aplicados os estilos.
  • As declarações, inseridas dentro de parêntesis  { }  que vão especificar a estilização a ser aplicada aos elementos.

As declarações contêm uma ou mais declarações de estilo e cada uma delas especifica um valor para uma propriedade. Para separar as diferentes propriedades utiliza-se o ponto e vírgula ;

Veja um exemplo ilustrativo abaixo:

O exemplo mostrado acima está escrito utilizando a escrita em linha. Este mesmo código poderá ser escrito de outra forma com indentação:

h1,h2{
      font-family: sans-serif;
      color: #FF0000;
     }

VOCÊ UTILIZA CSS REGULARMENTE?

Qual é o seu nível de familiarização com CSS? É novato ou experiente? Comente o artigo e deixe as suas ideias e partilhe a sua experiência com os outros utilizadores!

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

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