You are on page 1of 10

 CSS 

CSS 

O que é CSS 
 
CSS é a abreviação de Cascading Style Sheets (folhas de estilo em cascata). É uma linguagem de 
estilos com diversos comandos, que tem como principal objetivo formatar o layout de uma 
página HTML. Através do CSS, podemos formatar textos, bordas, posicionamentos, margens, 
espaçamentos entre outras coisas. 

Infelizmente, algumas pessoas ainda possuem o péssimo hábito de usar o HTML para formatar 
o layout das páginas, o que é um erro. Apesar de parecer mais “fácil” e rápido formatar o 
layout desta forma, veremos a facilidade de utilizar o CSS na hora de fazer uma ou mais 
atualizações no site. 

Imagine um site com 50 páginas, todas elas formatadas diretamente no HTML. O menu lateral 
tem 200 pixels de largura, mas agora vai passar a ter 250 pixels. Se o site estiver com o layout 
formatado com o HTML, você precisará formatar todas as páginas individualmente. 
Entretanto, se o layout estiver formatado com folhas de estilo, a única alteração será de 1 
número (de 200 para 250). Acredito que esse seja um grande incentivo para criarmos nossas 
páginas formatadas desta forma. 

 

1
 
 CSS 

2
 
 CSS 

O conceito de Tableless 
 
Tableless é a forma de desenvolvimento de páginas web sem a utilização de tabelas 
para se definir o layout, e sim aliando o HTML ou XHTML com o CSS. 
 
Construir um site com esse conceito não é abolir totalmente o uso de tabelas. Elas 
existem e devem sim ser utilizadas, mas apenas quando for necessária a exibição de 
dados tabulares, como uma tabela de preços, tabela de notas, etc. 
 
É muito comum vermos pessoas que criavam seus layouts em tabelas, usarem apenas 
DIVs para exibição. Essa é a chamada “divmania”, onde o novato no ambiente CSS 
deseja formatar todo o layout usando DIVs. 
 
Apesar de o nome Tableless ser mais conhecido, o correto seria Web Standards. 
Tableless significa “menos tabelas”, mas como vimos, tabelas podem e devem ser 
usadas. O termo Web Standards ou Padrões Web são mais corretos, pois definem a 
forma correta de se construir uma página, que é usar cada tag para sua real função e 
deixar o código semanticamente correto. Ex: Definir um título com <h1>, um subtítulo 
com <h2>, parágrafos com <p>, etc. 

Podemos perceber que ao desenvolver um site nos padrões: 

• O código ficará mais claro e limpo, facilitando futuras alterações; 
• O arquivo HTML ficará com um tamanho menor; 
• Melhor indexação por motores de busca; 
• Economia na banda e rapidez no carregamento da página; 
• Facilidade ao alterar o layout do site, e disponibilizar versões diferentes para a 
mesma página (versão para impressão, dispositivos móveis, etc). 

 

 

 

3
 
 CSS 

Métodos de inclusão do CSS na página 
Existem 3 métodos de se carregar a formatação CSS para dentro de uma página: inline, 
interno e externo. 

‐ Método inline 

Insere uma formatação diretamente em uma tag. Esse tipo de marcação deve ser 
evitada, pois se perde a vantagem de usar folhas de estilo, já que a formatação está 
inserida direto no HTML. Ex: 

<p style="color:#ff0000"> Bla bla bla </p>  

Neste exemplo, estamos configurando o parágrafo com a cor de fonte vermelha. 
 

‐ Método interno 

Neste método, criamos uma folha de estilos inserida diretamente na página. Ela é 
declarada na tag <head> do HTML, e define a formatação apenas para essa página. Ex: 

<style type="text/css"> 
<!‐‐ 
  body { background:#000000; } 
  p { margin‐left: 15px; } 
‐‐> 
</style> 
 
Neste caso, configuramos a cor de fundo da página como amarelo e definimos um 
espaço de 15 pixels em cada parágrafo (margem esquerda). 

 

‐ Método externo 

É o método mais indicado, já que desta forma, conseguimos controlar toda a 
formatação de um site através de um único arquivo CSS. O arquivo CSS pode ser 
chamado de duas formas na página (todas elas definidas na tag <head> do HTML). 

<style type="text/css"> 
<!‐‐ 
  @import url("estilos.css"); 
‐‐> 
</style> 
 
Ou 
 
<link href=" estilos.css" rel="stylesheet" type="text/css" media="screen" /> 
4
 
 CSS 

Configurando seletores CSS 
A sintaxe do CSS é composta por 3 elementos: 

Seletor  { propriedade: valor; } 

O seletor é uma tag HTML, id ou classe que será formatada. A propriedade é o valor ou 
os valores a serem alterados e/ou definidos. O valor contém a formatação 
propriamente dita. 

 

Cada seletor pode possuir várias propriedades dentro dele. Para isso, iremos separá‐
las por um ponto e vírgula, e essas propriedades deverão estar entre chaves. Ex: 

p { text‐align:center; color:#ff0000; font‐size:1.2em; } 

 

Se o valor de uma propriedade for composto por mais de uma palavra, devemos 
colocar entre aspas. 

p   { font‐family:“Trebuchet MS”, Arial, Verdana; } 

 

Podemos ainda configurar um grupo de seletores juntos, separador por vírgula. 

h1, h2, h3   { font‐family:“Trebuchet MS”, Arial, Verdana;  color:#333333;  } 

 

 Às vezes, é interessante inserir comentários dentro do arquivo CSS. Esses comentários 
não são interpretados na hora que o CSS é carregado, e servem como “lembretes”.  
Isso é bom para deixar o código mais claro, e facilitar alterações no arquivo por você 
ou por outras pessoas. Definimos um comentário desta forma: 

/* Configuração de parágrafos */ 

 

Tudo o que estiver entre a marcação /* e a marcação */ será ignorado e não 
interpretado como código CSS. 

5
 
 CSS 

Definindo uma classe e um id 
Até esse ponto, aprendemos a configurar uma tag. Todas as vezes que ela aparecer no 
documento HTML, ela irá adotar essa configuração. Mas e se quisermos alterar outras 
configurações dentro de um parágrafo? Vejamos esse exemplo: 

Esse parágrafo tem um texto vermelho. 

 

Se definirmos a configuração do seletor p para um texto em negrito e na cor preta, não 
iremos ver a palavra vermelho na cor vermelha. Para isso, iremos definir uma classe e 
aplicar na palavra vermelho 

<p>Esse parágrafo tem um texto <span class=”destaque”>vermelho</span>.</p> 

 

Uma classe é definida no CSS com um ponto na frente do nome. 

.destaque { color:#ff0000; }  

 

Agora toda vez que precisarmos colocar um texto em vermelho, é só aplicar a classe 
nas áreas desejadas. 

Podemos também definir um id, que será identificado pelo id de uma tag. A declaração 
é feita com o símbolo “#” na frente do nome. 

Um detalhe importante é lembrar que esse tipo de declaração é única e não poderá 
ser repetida no HTML (ao contrário da classe, que pode ser usada quantas vezes forem 
necessárias) 

#menu { width:180px; background‐color:#343346; }  

 

Uso correto:  Uso incorreto: 

<p class=”destaque”>Bla bla bla</p>  <p id=”destaque”>Bla bla bla</p> 

<p class=”marcador”>Bla bla bla</p>  <p id=”marcador”>Bla bla bla</p> 

<p class=”destaque”>Bla bla bla</p>  <p id=”destaque”>Bla bla bla</p> 
 

6
 
 CSS 

Propriedades CSS 
 
 
Propriedades background 

Define a configuração do background (fundo) de um elemento HTML. Existem vários 
tipos de configuração de backgrounds: 
 
Propriedade  Significado e valores aceitos
background‐color  Cor do fundo do elemento. Pode ser em hexadecimal, rgb ou 
com o nome da cor em inglês. 

Ex: p { background‐color: #00ff00; }  

background‐image  Coloca uma imagem de fundo. 
url(caminho/imagem.gif) 
 
Ex: body { background‐image: url(stars.gif); } 

background‐repeat  Define a maneira de como a imagem de fundo é posicionada 

• no‐repeat: não repete  
• repeat: repete vertical e horizontal. 
• repeat‐y : repete vertical. 
• repeat‐x : repete horizontal. 
 
Ex: body { background‐image: url(stars.gif); 
background‐repeat: repeat‐x; }  

 

background‐attachment  Se a imagem de fundo "rola" ou não com a tela 

• fixed: imagem fixa na tela. 
• scroll: imagem "rola" com a tela. 
 
Ex: body { background‐image: url(stars.gif); background‐
attachment: fixed; } 

 

 

 

7
 
 CSS 

background‐position  Como e onde a imagem de fundo é posicionada 

• xpos ypos 
• x% y% 
• top left 
• top center 
• top right 
• center left 
• center center 
• center right 
• bottom left 
• bottom center 
• bottom right 
 
Ex: body {  
background‐image: url(stars.gif); 
background‐repeat: no‐repeat; 
background‐attachment:fixed; 
background‐position: 0% 0%; } 

background  Maneira abreviada para todas as propriedades 

 
 
 

 

8
 
 CSS 

Propriedades text 

A propriedade text permite controlar a aparência do texto. Permite mudar a cor, 
aumentar ou diminuir os espaços entre os caracteres, mudar o alinhamento, indentar 
a primeira linha, entre outras configurações. 
 
 
Propriedade  Significado e valores aceitos
color   Altera a cor do texto.  Pode ser em hexadecimal, rgb ou com o 
nome da cor em inglês. 

Ex: p { color:#ffff00; }  

line‐height  Ajusta a altura das linhas do texto. Esse valor define a 
distância entre as linhas. 

Ex: p { line‐height: 14px; } 

letter‐spacing  Aumenta ou diminui o espaço entre os caracteres.  

  Ex: p { letter‐spacing: 12px; } 

text‐align  Ajusta o alinhamento do texto.

  • left: esquerda. 
• right: direita. 
• center: centralizado. 
• justify: justificado. 
 
Ex: p { text‐align: center; }  

text‐decoration  Ajusta a decoração do texto.

  • none: nenhuma. 
• underline: sublinhado. 
 
• overline: linha sobre o texto. 
  • line‐through: linha sobre o texto. 
• blink: texto piscando (não funciona no IE e no Opera). 
 
Ex: p { text‐decoration: underline; }  

text‐transform  Controla as letras de um elemento

  • none: nenhuma. 

9
 
 CSS 

• capitalize: cada palavra do texto começa com letra 
maiúscula. 
• uppercase: todo o texto em letras maiúsculas. 
• lowercase: todo o texto em letras minúsculas. 
 
Ex: p { text‐transform: uppercase; } 

word‐spacing  Aumenta ou diminui o espaço entre as palavras. 

  Ex: p { word‐spacing: 10px; } 

 

Links úteis 

http://jigsaw.w3.org/css‐validator/ 

http://www.westciv.com/style_master/academy/css_tutorial/index.html  

10