CSS

CSS
Cascade Style Sheets

Conceitos Básicos
Rael Gugelmin Cunha – raelgc@gmailcom

CSS
 CSS é a sigla para Cascade Style Sheets, ou
Folha de Estilos em Cascata.
 É uma linguagem que usamos para definir o

layout (aparência) de uma página HTML.
 É suportada, em sua versão básica, por todos

os navegadores atuais.
 Como qualquer linguagem, recursos mais novos

não são suportados por todos os navegadores.
CSS
 Com CSS, controlamos coisas como:
 Tipos e tamanhos de fontes

 Cores
 Margens e bordas
 Linhas
 Alturas, Larguras
 Imagens de fundo
 Posicionamentos
 e muito mais
CSS
 Devemos usar HTML para definir somente a
estrutura de nossa página.
 É possível definir layout em HTML, mas:
 HTML não foi (em sua origem) projetado para isso

 Isso está em desuso
 Nosso código HTML ficará poluído
 Os recursos são poucos
 Ficaremos presos sempre ao mesmo layout (como
veremos mais adiante)
CSS
 Usando CSS, temos as seguintes vantagens:
 Maior precisão no controle do layout

 Deixar o layout de uma página em arquivos
separados do HTML
 Poder usar a mesma definição de layout para várias
páginas
 Recursos mais avançados, como por exemplo,
blocos flutuantes
Como usar
 Primeiro, vamos ver um exemplo, de como

seria alterarmos a cor de fundo de nossa
página:
 Usando HTML
 <body bgcolor="#FF0000">
 Usando CSS
 body { background-color: #FF0000; }
Como usar
 Repare na estrutura do comando CSS:
body { background-color: #FF0000; }
Aqui identificamos
Aqui identificamos Aqui identificamos
o elemento que qual o valor
qual propriedade
queremos formatar
Como usar
 Mas onde colocar isso?
 Existem 3 lugares possíveis:
 Dentro do próprio elemento (inline)

 No início da página (usando a tag style)
 Em um arquivo externo - recomendado
Inline
 Podemos aplicar CSS, usando o atributo STYLE
dentro do elemento HTML:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Tag Style
 Podemos aplicar CSS, usando a tag STYLE do HTML:
<html>
<head>
<style type="text/css">
body { background-color: #FF0000; }
</style>
</head>
<body>
</body>
</html>
Arquivo externo
 Para usar CSS como um arquivo externo,

criamos um arquivo de texto com a extensão
.css
 Este arquivo irá conter tudo que o que havia na

tag STYLE.
 Com isso, podemos usar o mesmo arquivo para

várias páginas diferentes.
Arquivo externo
 Para utilizarmos este arquivo, colocamos um
link em nossa página HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
</body>
</html>
Arquivo externo
 Como já dito, podemos usar o mesmo arquivo

para várias páginas diferentes.
 Uma alteração neste arquivo, e todo o layout

de nosso site pode ser alterado:
 O layout fica centralizado em um arquivo

 O código HTML fica mais limpo
 Menos trabalho (imagina trocar o layout de todas as
páginas, uma a uma)
Exercício
 Crie um arquivo de CSS externo, e nele defina

a cor de fundo para seu layout, conforme visto
anteriormente.
 Chame este arquivo em sua página.
 Teste no navegador.
Altura e largura
 Podemos definir as dimensões de nossos
elementos, respectivamente, altura e largura.
 width: 100px;
 height: 80px;
 Toda medida em CSS pode ser relativa

(expressa em %, por exemplo), ou absoluta
(valor preciso).
 São utilizadas várias unidades, como px

(pixels), cm (centrímetros), pt (pontos), etc.
Background
 Além da cor, podemos alterar várias outras

propriedades do fundo dos elementos
(background), como usar imagens ou não,
posicionamento, etc.
 Background não existe apenas no elemento

body, mas sim em vários outros elementos,
como células de tabelas, blocos, etc.
Background
 As principais propriedades de background são:
 background-color: cor do fundo

 background-image: imagem de fundo
 background-repeat: maneira como a imagem de
fundo é posicionada
 background-attachment: se a imagem de fundo
"rola" ou não com a tela
 background-position: como e onde a imagem de
fundo é posicionada
 background: maneira abreviada para todas as
propriedades
Fontes
 Vamos também, alterar a fonte de texto
utilizada nos parágrafos
 Repare que podemos definir mais de uma fonte

utilizada, caso a primeira da lista não exista:
 p{
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #CCCCCC;
}
Fontes
 É preciso cuidado com o tipo de fonte

escolhida: cada sistema operacional tem um
conjunto de fontes pequeno que o acompanha
 Ou seja, você pode utilizar uma fonte de

aspecto muito bonito, mas que quase ninguém
a possua, causando uma visualização diferente
do seu site em outros computadores
Fontes
 As principais propriedades das fontes são:
 color: cor da fonte

 font-family: fontes utilizadas
 font-size: tamanho de fonte (fixo ou em %)
 font-style: estilo de fonte (normal, itálica)
 font-weight: negrito
 font: maneira abreviada para todas as propriedades
Textos
 Além das fontes, também temos as seguintes
principais propriedades para os textos:
 letter-spacing: espaçamento entre letras

 word-spacing: espaçamento entre palavras
 text-align: alinhamento (esq, dir, centro, justificado)
 text-decoration: decoração (normal ou sublinhado)
 text-indent: recuo do texto
 text-transform: forçar maiúsculas ou minúsculas
 white-space: como o browser trata os espaços em
branco
Links
 Podemos aplicar todas as propriedades vistas

até agora aos links HTML em nossas páginas
 Mas podemos ainda, definir os atributos CSS

para cada um dos estados de um link:
 a:link: link não visitado

 a:visited: link já visitado
 a:active: link ativo (acabou de ser clicado)
 a:hover: quando o mouse está sobre o link
Links
 Exemplo: colocaremos cores diferentes para

cada estado, e o link será sublinhado apenas
quando o mouse estiver sobre ele:
 a:link: { color: red; text-decoration: none; }

 a:visited: { color: purple; text-decoration: none; }
 a:active: { color: green; text-decoration: none;}
 a:hover: { text-decoration: underline; }
Margens
 Todo elemento sempre tem 4 margens:
 Superior
 Inferior
 Direita
 Esquerda
 Em CSS, podemos definir cada margem

individualmente, ou todas de uma vez só.
Margens
 Todo elemento sempre tem 4 margens:
 Superior
 Direita
 Inferior
 Esquerda
 Em CSS, podemos definir cada margem

individualmente, ou todas de uma vez só.
Margens
 Para definir cada margem individualmente,
temos as seguintes propriedades:
 margin-top
 margin-right
 margin-bottom
 margin-left
 Ou, como já dito, definimos apenas uma

margem que funcione nos 4 lados:
 margin
Margens
 Exemplo:
 margin-top: 30px;
 margin-right: 10px;
 margin-bottom: 30px;
 margin-left: 10px;
 Ou:
 margin: 30px 10px 30px 10px;

Padding
 Padding é uma margem interna.
 Ou seja, é uma distância que fica entre a borda

de um elemento e seu conteúdo.
 O funcionamento é o mesmo que para

margens: temos 4 paddings (superior, direita,
inferior, esquerdo), que podem ser definidos
separadamente ou apenas em uma declaração
única.
Padding
 Exemplo:
 padding-top: 30px;
 padding-right: 10px;
 padding-bottom: 30px;
 padding-left: 10px;
 Ou:
 padding: 30px 10px 30px 10px;

Bordas
 As bordas podem ser usadas como elemento

decorativo ou para separar um conteúdo de
outro.
 Podemos definir muitas propriedades e

combinação para as bordas.
 As bordas também são definidas ou para os 4

lados (superior, direita, inferior, esquerda), ou
apenas um estilo para as 4 bordas.
Bordas
 Além da espessura da borda, podemos definir

também:
 o tipo de borda: pontilhada, tracejada, linha, etc
 cor da borda
 E também, podemos definir essas propriedades

individualmente para cada lado, ou para todos
os lados em uma só propriedade.
Bordas
 Vamos supor que estamos definindo a margem
direita de um elemento:
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: red;
 Poderíamos fazer em apenas um comando:
 border-right: 1px solid red;

Bordas
 O mesmo vale para os outro lados.
 Se quiséssemos definir as propriedades para todas as

bordas:
 border-width: 1px;
 border-style: solid;
 border-color: red;
 Também poderíamos definir todas as propriedades

(espessura, estilo e cor) para todas as bordas em um
comando só:
 border: 1px solid red;

Bordas
 Se não quisermos bordas, utilizamos como style

a palavra none:
 border-right-style: none;
 Que também pode ser usada para os 4 lados:
 border-style: none;
Exercício
 Crie uma lista não ordenada (ul), contendo os
membros da sua família.
 Coloque os seguinte estilos nesta lista:
 Cor de fundo: amarelo;
 Texto: escolha uma fonte, e coloque tamanho 14;
 Altere o caracter usado na tag li;
 Crie uma tabela com o mesmo conteúdo (membros da

sua família), e usando CSS:
 Coloque uma borda vermelha e pontilhada;
 Altere a cor de fundo das células;
 Altere o texto de cada célula para que fique centralizado;
Agrupando elementos
 Em alguns casos, é necessário aplicar estilos

diferentes para alguns elementos.
 Por exemplo, podemos querer que um

cabeçalho formatado diferentemente em
determinadas ocasiões.
 Para isso, podemos criar um estilo que não

esteja associado a nenhum elemento do nosso
HTML.
Agrupando elementos
 Por exemplo:
.introducao {
text-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #CCCCCC;
}
 No elemento em que quisermos aplicar estes

estilos, usamos o comando class:
<p class="introducao">Este texto...</p>

Agrupando elementos
 Também podemos agrupar elementos e fazer

com que este estilo que definimos seja aplicado
a todo este grupo.
 Podemos agrupar os elementos de duas formas

em CSS:
 através do elemento SPAM
 através do elemento DIV

Agrupando elementos
 Quando agrupamos elementos com div, tudo

que está dentro deste agrupamento se
comportará como um bloco (inclusive com
quebra de linha após o fechamento do bloco).
 Quando agrupamos elementos com spam, não

temos nenhuma alteração visual, o grupo não
se comporta visualmente como um bloco.
 Cada um tem sua aplicação.

Agrupando elementos
 Exemplo:
<div <div
class="Simpsons"> class="Flintstones">
<ul> <ul>
<li>Homer</li> <li>Fred</li>
<li>Margie</li> <li>Vilma</li>
<li>Bart</li> <li>Pedrita</li>
<li>Lisa</li> <li>Dino</li>
<li>Meggie</li> </ul>
</ul> </div>
</div>
.Simpsons { background-color: red; }
.Flintstones { background-color: blue; }
Outros elementos
 Ainda existem muitas outras opções de

formatação em CSS.
 Podemos por exemplo, definir quando um div

será mostrado ou ficará oculto.
 Podemos alterar o símbolo usado nos itens de

uma lista não ordenada, etc
Exercício
 Repetindo este exemplo, deixe as duas listas

com aparência bem diferentes entre si,
alterando:
 fonte de texto;
 cor do texto;
 bordas;
 margens.
Floating
 Podemos fazer com que alguns elementos

fiquem automaticamente posicionados em uma
direção da tela.
 Por exemplo, podemos pedir que uma imagem

fique posicionada à esquerda de todos os
elementos, automaticamente.
 Para isso, usamos a propriedade float.

Floating
 Por exemplo:
<div class="picture">
<img src="foto.jpg">
</div>
.picture { float: left; }
 Podemos usar como valor para float: left, right ou

none (nenhum).
Floating
 A propriedade clear é usada para controlar o

comportamento dos elementos que vem depois
dos elementos floats no documento.
 Por padrão, o elemento seguinte ao float,

ocupa o espaço livre ao lado do elemento
flutuado. No exemplo anterior, o texto
deslocou-se automaticamente para a direita da
foto.
Floating
 A propriedade clear pode assumir os valores
left, right, both ou none.
 Quando usamos both, significa que queremos

que nosso bloco não contenha nenhum outro
bloco à sua direita ou à sua esquerda.
 Se no exemplo anterior, definíssemos que o

bloco com o texto tivesse o valor de clear como
both, o texto viria abaixo da imagem.
Posicionando elementos
 Com float fazemos com que nossos elementos

fiquem posicionandos automaticamente.
 Porém, podemos definir posições fixas para

nossos elementos.
 Essas posições podem ser especificadas com

coordenadas X,Y (onde o topo esquerdo é a
coordenada (0,0), ou podem ser posições
relativas.
 Por exemplo, se quiséssemos posicionar uma
foto na posição (100,200):
<div class="picture">
<img src="foto.jpg">
</div>
.picture {
position: absolute;
top: 100px;
left: 200px;
}
 Podemos também, além de top e right, definir
as posições em função de bottom e left.
 Para posicionar um elemento de forma relativa,

usamos position como relative. A diferença
entre os dois tipos de posicionamento é a
maneira como o posicionamento é calculado.
 A posição relativa é calculada com base na

posição original do elemento no documento.
Isto significa que deslocamos o elemento para
a esquerda, para a direita, para cima ou para
baixo.
Layers
 Utilizando os posicionamentos vistos até agora,

podemos fazer com que blocos sejam
sobrepostos.
 Através do uso de layers (camadas),

conseguimos definir qual a ordem dos
elementos sobrepostos: qual elemento vai
aparecer acima, e qual vai aparecer abaixo.
Layers
 Exemplo:
.camada1 { position: absolute; left: 100px; bottom: 100px; z-index: 1; }
.camada2 { position: absolute; left: 115px; bottom: 115px; z-index: 2; }
 As camadas com número menor aparecem mais

embaixo, enquanto as com número maior aparecem
acima.
 As camadas começam no número 1, mas não

precisamos seguir uma seqüência: podemos ter uma
camada 1, depois uma camada 5, por exemplo.
CSS - Concluindo
 Utilizando CSS temos uma possibilidade quase
infinita de formatar nossa página HTML.
 Embora exista um padrão definido pela W3C,
navegadores diferentes muitas vezes
interpretam algumas propriedades CSS de
maneira diferente.
 Pode ser muito desgastante fazer uma página
que funcione corretamente em todos os
navegadores.
 Algumas vezes acabamos abrindo mão de um
layout mais trabalhoso, ou então abrimos mão
de que este layout funcione em determinado
navegador (não recomendado).
Bibliografia
3
 CSS para WebDesign
http://wwwmaujorcom/tutorial/fonttutphp
 Dave Raggett's Introduction to CSS
http://wwww3org/MarkUp/Guide/Style
 HTMLnet – CSS Tutorial
http://pt-brhtmlnet/tutorials/css/
 UFSCAR – Desenvolvimento para Web
http://www.dc.ufscar.br:8080/latosensu/index.j
sp?site=calendario/index.html

CSS - Basic Intro

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS - Basic Intro

Enviado por

Direitos autorais:

Formatos disponíveis

Cascade Style Sheets

Rael Gugelmin Cunha – raelgc@gmailcom

 É uma linguagem que usamos para definir o

 É suportada, em sua versão básica, por todos

 Como qualquer linguagem, recursos mais novos

 Com CSS, controlamos coisas como:

 Tipos e tamanhos de fontes

 É possível definir layout em HTML, mas:

 HTML não foi (em sua origem) projetado para isso

 Usando CSS, temos as seguintes vantagens:

 Maior precisão no controle do layout

 Primeiro, vamos ver um exemplo, de como

 Repare na estrutura do comando CSS:

body { background-color: #FF0000; }

 Mas onde colocar isso?

 Existem 3 lugares possíveis:

 Dentro do próprio elemento (inline)

 Para usar CSS como um arquivo externo,

 Este arquivo irá conter tudo que o que havia na

 Com isso, podemos usar o mesmo arquivo para

 Como já dito, podemos usar o mesmo arquivo

 Uma alteração neste arquivo, e todo o layout

 O layout fica centralizado em um arquivo

 Crie um arquivo de CSS externo, e nele defina

 Chame este arquivo em sua página.

 Toda medida em CSS pode ser relativa

 São utilizadas várias unidades, como px

 Além da cor, podemos alterar várias outras

 Background não existe apenas no elemento

 background-color: cor do fundo

 Repare que podemos definir mais de uma fonte

 É preciso cuidado com o tipo de fonte

 Ou seja, você pode utilizar uma fonte de

 As principais propriedades das fontes são:

 color: cor da fonte

 letter-spacing: espaçamento entre letras

 Podemos aplicar todas as propriedades vistas

 Mas podemos ainda, definir os atributos CSS

 a:link: link não visitado

 Exemplo: colocaremos cores diferentes para

 a:link: { color: red; text-decoration: none; }

 Em CSS, podemos definir cada margem

 Todo elemento sempre tem 4 margens:

 Em CSS, podemos definir cada margem

 Ou, como já dito, definimos apenas uma

 margin: 30px 10px 30px 10px;

 Ou seja, é uma distância que fica entre a borda

 O funcionamento é o mesmo que para

 padding: 30px 10px 30px 10px;

 As bordas podem ser usadas como elemento

 Podemos definir muitas propriedades e

 As bordas também são definidas ou para os 4

 Além da espessura da borda, podemos definir

 o tipo de borda: pontilhada, tracejada, linha, etc

 E também, podemos definir essas propriedades

 Poderíamos fazer em apenas um comando:

 border-right: 1px solid red;

 Se quiséssemos definir as propriedades para todas as

 Também poderíamos definir todas as propriedades

 border: 1px solid red;

 Se não quisermos bordas, utilizamos como style

 Que também pode ser usada para os 4 lados:

 Crie uma tabela com o mesmo conteúdo (membros da