Introdução ao CSS

image_pdfimage_print

Cascading Style Sheets, mais conhecido como CSS, te dá a possibilidade de controlar o estilo e layout de sua página web. Ele dá a possibilidade de criar estilos para os links, fontes, margens, tabelas, cores, tamanhos, alinhamentos e muito mais em seu site inteiro.

O CSS também pode ser utilizado para criar layouts (conhecido como “Tableless”) com um arquivo a parte, que pode ser usado no seu site inteiro. Você simplesmente pode ‘linkar’ o seu arquivo CSS com as suas páginas e tem a possibilidade de atualizar o arquivo CSS pra efetuar mudanças no seu site inteiro, apenas mechendo em um único arquivo. Com isso você não precisará sair alterando o HTML de cada página que você crou, pois basta alterar as propriedades dos seletores que elas serão alteradas nas páginas consequentemente.

Os benefícios de usar o CSS

CSS fará você ganhar muito tempo! Quando se fala de internet, existem apenas 2 tipos de elementos fundamentais: o conteúdo e a forma que o conteúdo é exibido. Com o HTML, nós estamos mostrando o nosso conteúdo e definimos como este será apresentado. No entanto, estamos muito limitados com o que podemos fazer com o HTML.

Cada navegador é diferente e interpreta as coisas diferentemente. É por isso que os webmasteres são orientados a sempre verem os resultados de suas páginas em vários navegadores, como o Internet Explorer, Firefox, Opera, Chrome e muitos outros, para ter certeza de que suas páginas estão aparecendo como ele realmente quer, independente de navegador que está sendo utilizado. Por enquanto você pode ler um pouco mais sobre isso no post que fiz chamado “Compatibilidade com Navegadores“. Pretendo escrever muitos outros pequenos artigos sobre esse problema.

De forma geral, o HTML é responsável pelo conteúdo do site e o CSS é responsável por policiar o HTML. Isso permite que você crie sites que sejam adequados para todos os navegadores.
Um dos melhores benefícios do uso do CSS com as páginas de seu site é a facilidade de atualizar todas as páginas apenas alterando o arquivo CSS. Se você quiser fazer uma alteração no seu design, em vez de sair modificando centenas de páginas do seu site, você pode fazer uma modificação no arquivo externo CSS, e ele fará a atualização automaticamente em todas as página que estão agregadas a este arquivo. O CSS permite que você realize modificações em apenas alguns segundos, onde você levaria horas alterando o HTML.

Criando o CSS

Aprender, criar e trabalhar com CSS não requer muito de você. Você não precisa de nenhum tipo de editor especial, já que ele pode ser criado até pelo Bloco de Notas.

De qualquer forma, você precisará de um navegador (óbvio). O Internet Explorer e o Firefox são os mais populares, mas existem muitos outros. Uma vez que você criou seu arquivo CSS, você tem que ter certeza que você irá ver as suas páginas da mesma forma em todos esses navegadores, ou pelo menos na maioria que você puder testar. Existe um site chaamdo “Browser Shots” que você pode visualizar o resultado em vários navegadores, mas ele é meio lento, dependendo da quantidade de navegadores que você marcar, já que tem que esperar que o resultado seja capturado pelos servidores. Acho mais fácil instalar os navegadores no seu próprio computador e testar. O PC que utilizo eu tenho instalado o Firefox e o “Internet Explorer Collection” que você tem a possibilidade de instalar várias versões do IE na mesma máquina. Sempre é bom instalar o “velho e querido” IE6, pois ele é o mais problemático.

Você também precisará enviar os arquivos do seu site para um servidor web. Geralmente se utiliza o FTP e existem muitos bons e grátis. Utilizo o “LeechFTP” ou o próprio sistema de FTP do Dreamweaver. Outra possibilidade é utilizar o sistema de gerenciamento de arquivos do painel de controle de sua hospedagem.

CSS Interno e Externo

O CSS pode ser usados de duas maneiras. Pode ser internamente, onde você irá associar o código de forma embed “incorporada” ou inline “em linha”. Ou então ele pode ser usado externamente, o que será utilizado como um arquivo linkado ao arquivo HTML. Provavelmente você utilizará este último método após terminar de ler este post.

O único momento que você poderá utilizar o CSS na forma incorporada é se você quiser modificar um link específico ou texto, ou quando tem apenas um ou dois parágrafos no site. Se for algo mais avançado que isso, melhor usar o CSS externo.

O CSS pode ser usado dessas três maneiras:

  1. Inline – Adicionado diretamente nas suas tags HTML.
  2. Embbed – É o CSS incorporado, geralmente fica entre as tags <HEAD> e </HEAD>.
  3. Linked – É um arquivo separado das páginas, mas que são linkadas através da tag <link> para que sejam utilizadas as características na página atual.

Prioridade entre tags HTML e CSS

Quando se está utilizando CSS, alguams tags tem a precedência sobre outras. Veja abaixo como elas são priorizadas:

  • Tags HTML tem prioridade sobre todas as outras tags;
  • CSS Inline tem prioridade sobre o CSS incorporado (Embedded) e externo (Linked)
  • CSS incorporado (Embedded) tem prioridade sobre o CSS externo (Linked)
  • CSS externo (Linked) não tem prioridade sobre nenhum outro.

Basicamente funciona assim:

HTML > Inline > Embbed > Linked

Formatando Tags CSS

As tags do CSS são formatadas da seguinte maneira:

seletor{propriedade: valor;}

ou

seletor{
  propriedade1: valor;
  propriedade2: valor;
  propriedade3: valor;
  propriedadeN: valor;
}

O seletor é o comando para o navegador e é seguido da propriedade. A propriedade é a palavra de descreve o seletor, o que seria a instrução para o navegador. O valor especifica o valor desta propriedade.

Embora pareça um pouco confuso, o CSS é bem similar ao format do HTML. Vamos comparar as duas formas:

http://browsershots.org/
<font size="2"> // HTML
body{font-size: 12px;} // CSS

Analisando os 2 códigos, temos o font (elemento HTML) se comparando ao seletor body do CSS. O atributo size (HTML) se comparando à propriedade do CSS, e pra finalizar o valor do atributo se comparando ao valor do CSS. Ou seja, cada parte do código HTML tem uma propriedade e valores que são equivalentes.

CSS Na Linha (Inline)

CSS Inline é utilizado por padrão no HTML através da propriedade style. Veja abaixo um exemplo de como remover o underline de um único link:

<a href="http://www.uebihost.com.br" style="text-decoration:none;">Uebi Host</a>

Coloque este código em sua páginas web e veja o resultado.

O atributo style foi adicionado diretamente no código HTML do seu link.

Geralmente o CSS Inline permite você especificar como um elemento de sua página irá se comportar individualmente.

CSS Incorporado (Embedded)

Este podem fazer as mesmas coisas que o CSS Inline faz. No entanto, este código é colocado entre as tags <HEAD> e </HEAD> da sua página HTML. Você pode especificar como sua página inteira irá aparecer, incluindo links, fontes, textos e muito mais, simplesmente incorporando seu código CSS.

O exemplo a seguir irá demonstrar como alterar a cor de um link que está ativo (após o clique no link) para a cor vermelha.  Já nohover (quando o mouse está sobre o link) iremos alterar a cor para verde e retirar o underline dos links.

<style>
<!--
a:hover{color:#00FF00; text-decoration:none;}
a:active{color:#FF0000;}
-->
</style>

Pegue CSS e incorpore na sua página e crie alguns links para testar. Todos links das páginas devem se comportar da mesma maneira.

Notou que o código demonstrado está dentro de uma tag de comentário do HTML? Comentários no HTML são desta forma:

<!-- Comentário -->

Esta tag de comentário previne dos navegadores antigos e/ou os que não suportam CSS de exibir os códigos CSS durante a exibição das páginas.

O bom de utilizar esse tipo de CSS é que você pode criar várias classes de códigos, ou seja, você pode especificar diferentes estilos nos elementos de sua página apenas chamando a classe que você deseja.

Por exemplo, você pode adicionar a classe no seu codigo para parágrafos no seletor de parágrafo assim:

<style>
<!--
p.espaco{
  font-family: Arial;
  font-size: 12px;
  padding-left: 50px;
  padding-right: 5px;
}
-->
</style>

Notou o nome “espaco” código? Aquilo é o nome de nossa classe. Você pode criar várias classes com nomes diferentes apenas criando seletores e determinando seus nomes com um ponto e nome juntos, assim: .minhaclasse

Tenah mente que o nome que você botar na sua classe, tem que ser exatamente a mesma na hora de chamar dentro da sua tag HTML.

Por exemplo, se você criar as classes assim:

<style>
<!--
p.vermelho{...}
p.texto{...}
p.introducao{...}
-->
</style>

Você deve chamá-las no HTML assim:

CSS Externo (Linked)

Este método utiliza um arquivo CSS externo que irá especificar os estilos da página. Este arquivo pode ter todas as classes necessárias para estilizar o seu site deste a tag body, cabeçalhos, images, textos, tabelas, ou qualquer outra coisa que seja um elemento HTML.

O conteúdo é algo deste tipo:

body{
  font-family: Arial;
  font-size: 12px;
}
h1{
  font-family: Georgia;
  font-size: 16px;
  font-weight: bold;
  color: #FF0000;
}
p{
  font-family: Verdana;
  font-weight: normal;
  color: #0000FF;
}

Este arquivo pode ser salvo da seguinte maneira “estilo.css” e enviado juntamente com seus arquivos HTML para o servidor web.

Quando se utiliza esse método, devemos fazer um link entre o arquivo CSS e a páginas HTML atual utilizando a tag <LINK> entre as tags <HEAD> e </HEAD>, como mostra o exemplo abaixo:

<html>
 <head>
  <title>Minha Página com CSS Externo</title>
  <link href="/estilo.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
Meu texto normal vem aqui.
<h1>Título do texto</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing tincidunt elit, vel aliquet dui facilisis nec.
Phasellus mollis cursus leo iaculis fermentum. Vivamus eleifend quam a diam pharetra condimentum non et erat. Suspendisse est
urna, ullamcorper id condimentum vitae, dapibus nec odio. Sed porta sagittis pharetra. Vivamus eu eros neque, nec euismod
justo. Phasellus et orci quis nulla semper dapibus. Aliquam a magna metus, et vehicula mi. Pellentesque vestibulum faucibus
dolor, in fringilla augue ornare ac. Sed est erat, dapibus id fermentum id, venenatis at mi. Sed egestas erat eget lectus
feugiat ac luctus risus scelerisque. Proin pretium ligula porta magna condimentum molestie. Nunc mauris tortor, feugiat et
dapibus at, faucibus in lectus. In hac habitasse platea dictumst. Mauris rutrum felis nulla. Praesent convallis, orci sed
condimentum venenatis, justo ante facilisis felis, nec faucibus tellus sapien non leo. Nunc adipiscing ultricies odio non
faucibus. Curabitur lacinia auctor velit.
</p>
</body>
</html>

Você pode associar o seu arquivo CSS em quantas páginas você quiser, o que te dará controle para alterar todas as páginas que utilizam esse mesmo arquivo ao mesmo tempo quando você alterar o arquivo CSS, fazenod com que você ganhe tempo.

Sou bacharel em Sistemas de Informação pela Estácio de Sá (Alagoas), especialista em Gestão Estratégica da Tecnologia da Informação pela Univ. Gama Filho (UGF) e pós-graduando em Gestão da Segurança da Informação pela Univ. do Sul de Santa Catarina (UNISUL). Tenho interesse por todas as áreas da informática, mas em especial em Gestão, Segurança da Informação, Ethical Hacking e Perícia Forense. Sempre disposto a receber sugestões de assuntos para criar uma postagem.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Quer ficar atualizado?

Inscreva-se em minha newsletter e seja notificado quando eu publicar novos artigos de graça!