MANUAL

Cascading Style Sheet

MANUAL CSS

ndice
1.

O que CSS e como funciona. .................................................................................................. 4

2.

Por que usar CSS? ........................................................................................................................ 4

3.

Sintaxe Bsica................................................................................................................................ 4

4.

Tipos de CSS ................................................................................................................................... 5

4.1. CSS Inline ................................................................................................................................ 5
4.2. CSS Interno ............................................................................................................................ 5
4.3. CSS Externo............................................................................................................................ 5

5.

Cores e fundos ............................................................................................................................... 6

5.1. Propriedade: Color.............................................................................................................. 6
5.2. Propriedade: background-color .................................................................................... 6
5.3. Propriedade: background-image .................................................................................. 6
5.4. Propriedade: background-attachment ....................................................................... 6
5.5. Propriedade: background-position .............................................................................. 7

6.

Fontes, Textos e Links ................................................................................................................ 7

6.1. Propriedade: Font Family ................................................................................................ 7
6.2. Propriedade: Font Style .................................................................................................... 8
6.3. Propriedade: Font Variant ............................................................................................... 8
6.4. Propriedade: Font Weight................................................................................................ 8
6.5. Propriedade: Font Size ...................................................................................................... 8
6.6. Propriedade: Font ............................................................................................................... 9
6.7. Propriedade: Text Ident .................................................................................................... 9
6.8. Propriedade: Text Align .................................................................................................... 9
6.9. Propriedade: Text Decoration ........................................................................................ 9
6.10. Propriedade: Letter Spacing ........................................................................................ 10
6.11. Propriedade: text transform ........................................................................................ 10
6.12. Propriedade: Links .......................................................................................................... 10
6.12.1. Propriedade: Pseudo-classe ......................................................................... 10
6.12.2. Link, visited, active e hover .......................................................................... 11

7.

Agrupando Elementos - Class e id ..................................................................................... 11

7.1. Identificando e Agrupando Elementos .................................................................... 11
7.2. Agrupando: Class .............................................................................................................. 11
7.3. Identificando: Id ................................................................................................................ 12

Prof. Teresa Oliveira

Pg. 2 de 16

MANUAL CSS

8.

Agrupando Elementos - Span e Div .................................................................................. 12

8.1. Agrupando: Span .............................................................................................................. 12
8.2. Agrupando: Div ................................................................................................................. 12

9.

Margin, Padding e Bordas ...................................................................................................... 13

9.1. Box Model ............................................................................................................................ 13
9.2. Margin ................................................................................................................................... 13
9.3. Padding................................................................................................................................. 14
9.4. Bordas ................................................................................................................................... 14
9.4.1. Border-width ..................................................................................................... 15
9.4.2. Border-color ....................................................................................................... 15
9.4.3. Border-style ....................................................................................................... 15
9.4.4. Border ................................................................................................................... 15

10. Altura e Largura ........................................................................................................................ 16

10.1. Largura: Width .................................................................................................................. 16
10.2. Altura: height ..................................................................................................................... 16
11. Posicionando Elemento e Layer .......................................................................................... 16
11.1. Sistema de Coordenadas................................................................................................ 16
12. Comentrios em CSS ................................................................................................................ 16

Prof. Teresa Oliveira

Pg. 3 de 16

MANUAL CSS

1. O que CSS e como funciona.

CSS a sigla para Cascading Style Sheet, que traduzindo significa folha de estilo em cascata.
Consiste num conjunto de regras que informa a um programa, responsvel pela
formatao de um documento, como organizar a pgina, como posicionar e expor o texto e,
dependendo de onde aplicado, como organizar uma coleo de documentos.

2. Por que usar CSS?

Quando utilizamos CSS temos alguns benefcios bem claros:

Controle do layout de vrios documentos a partir de uma folha de estilos.

Utilizao de avanadas tcnicas de desenvolvimento.
Facilidade na edio de um layout.

3. Sintaxe Bsica
Uma folha de estilos composta por uma ou vrias regras CSS, que por sua vez so
compostas na sua forma bsica por 3 partes: um seletor, uma propriedade e um valor.
SELETOR { PROPRIEDADE: VALOR; }

SELETOR: Elemento onde a regra ser aplicada. Podendo ser tag, ID ou classe.

PROPRIEDADE: o atributo ao qual a regra ser aplicada (font, color, background).

VALOR: o valor propriamente dito a ser aplicado na propriedade selecionada.

SELETOR - O seletor pode ser uma tag de um elemento HTML, um ID ou uma

classe.

Tag como selector - todos os elementos daquela tag seguiro a regra.

ID como seletor - apenas este elemento seguir a regra.

Classe como selector - apenas os elementos que forem desta classe seguiro a regra.

Exemplos:
p{
font-size: 12px;
}
Exemplos:
p.fonteGrande{ font-size: 20px;}
<p class=fonteGrande>
Prof. Teresa Oliveira

Pg. 4 de 16

MANUAL CSS

4. Tipos de CSS

Inline: escrito dentro do atributo style da tag html.

Interno: escrito dentro das tags <style> </style> dentro do <head> do documento html.

Externo: escrito em um arquivo separado e apenas referenciado dentro do documento

html.

4.1. CSS Inline

aplicado dentro do atributo style da tag.
Exemplo:
<p style="color:#000000;"> Um texto escrito na cor preta.</p>

4.2. CSS Interno

Acrescentar a tag <style> dentro do cabealho e declarar todas as regras.
Exemplo:
<head>
<title>Exemplo CSS</title>
<style type="text/css">
.regra1 { font-size: 16px; }
.regra10 {font-color: #FFFFFF;}
</style>
</head>

4.3. CSS Externo

O arquivo deve conter a extenso .css e dentro apenas as regras que deseje declarar.
Exemplo:
Arquivo : estilo.css
.regra1{ font-size: 16px;}
.regra10 {font-color: #FFFFFF;}
Para referenciar este arquivo, no documento HTML devemos adicionar uma tag no
cabealho(<head>) do documento.
Exemplo:
<head>
<title>Exemplo CSS</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
Prof. Teresa Oliveira

Pg. 5 de 16

MANUAL CSS

5. Cores e fundos
5.1. Propriedade: Color
Representa a cor de primeiro plano de um elemento. Pode ser especificado por:
um nome de cor vlida - como "vermelho"
um valor HEX - como "# FF0000"
um valor RGB - como "rgb (255,0,0)"
p{
color: #0000CC;
}

5.2. Propriedade: background-color

Define a cor de fundo de um elemento html.
body {
background-color: #00FFFF;
}
p{
color: #00FFFF; background-color: #000000;
}

5.3. Propriedade: background-image

Permite utilizar uma imagem de fundo.
.bgImagem {
background-image: url(imagem.jpg);
}

5.4. Propriedade: background-attachment

Define se a imagem de background vai ser fixa ou vai deslocar junto com a tela, que a
opo padro.
Exemplo:
body{
background-image: url("imagem-1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
Valores para o background-attachment:
fixed : Deixa o background fixo e no desloca com a pgina.
scroll : Faz com que a imagem se desloque com a pgina.
Prof. Teresa Oliveira

Pg. 6 de 16

MANUAL CSS

5.5. Propriedade: background-position

Define a posio onde a imagem vai ser apresentada, por padro a imagem apresentada
na posio 0,0 que o canto esquerdo superior da tela.
Existem vrias maneiras de definir o posicionamento da imagem, todas usam coordenadas.
As coordenadas podem ser escritas em percentagem ou em unidades fixas (px, cm, etc),
podendo tambm utilizar palavras para definir o posicionamento:
top, bottom, center, left e right.
Exemplo:
body{
background-image: url("imagem-1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 20px;
}
body{
background-image: url("imagem-1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

6. Fontes, Textos e Links

6.1. Propriedade: Font Family
Permite escolher qual o tipo de letra a ser utilizado, como font Arial, Verdana ou outra
qualquer.
Pode ser includa uma referncia a uma famlia genrica, que ser usada caso nenhum dos
nomes coincida com o nome de uma fonte do sistema.
Exemplo:
h1 {
font-family: arial;
}
p{
font-family: Verdana, "Times New Roman;
}

Prof. Teresa Oliveira

Pg. 7 de 16

MANUAL CSS

6.2. Propriedade: Font Style

Define como a fonte vai aparecer: italic, oblique ou normal.
Exemplo:
p{
font-style: italic;
}

6.3. Propriedade: Font Variant

Define maisculas de tamanho reduzido, tem apenas 2 valores: normal e small-caps.
Exemplo:
p{
font-variant: small-caps;
}

6.4. Propriedade: Font Weight

Define se a fonte vai aparecer normal ou em negrito ou quanto de negrito vai aparecer.
Exemplo:
h2 {
font-weight: bold;
}

6.5. Propriedade: Font Size

Indica o tamanho da fonte. As unidades bsicas aceites so pixels (px) e percentagem (%),
podemos tambm usar pontos (pt).
Exemplo:
p{
font-size: 15px;
}
h1{
font-size: 80%;
}

Prof. Teresa Oliveira

Pg. 8 de 16

MANUAL CSS

6.6. Propriedade: Font

A propriedade font um compilador de todas as propriedades que vimos at agora. A
ordem de valores seguida :
font-style | font-variant | font-weight | font-size | font-family
Exemplo:
p{
Font: oblique bold 20px Verdana;
}

6.7. Propriedade: Text Ident

Propriedade que representa o tamanho do recuo da primeira linha do pargrafo em pixels.
Exemplo:
p{
text-ident: 20px;
}

6.8. Propriedade: Text Align

Alinhamento do texto, que pode ser left, right, center ou justify.
Exemplo:
p{
text-align: justify;
}

6.9. Propriedade: Text Decoration

Serve para decorar o texto, colocar um texto como sublinhado ou riscado, por exemplo.
Exemplo:
h1 {
text-decoration: line-through;
}
h2 {
text-decoration: underline;
}
h3 {
text-decoration: overline;
}
Prof. Teresa Oliveira

Pg. 9 de 16

MANUAL CSS

6.10. Propriedade: Letter Spacing

Permite definir o espao entre os caracteres de um texto.
Exemplo:
p{
letter-spacing: 2px;
}
h2{
letter-spacing: 4px;
}

6.11. Propriedade: text transform

Controla a captalizao do texto, ou seja, controla se o texto vai aparecer maisculo ou
no, ou quem vai aparecer maisculo.
So aceites a propriedade: capitalize, uppercase, lowercase ou none.

Captalize - Torna apenas a primeira letra de cada palavra maiscula.

Uppercase - Torna todo o texto em maisculo.
Lowercase - Torna todo o texto em minsculo.
None - Apresenta o texto da forma que ele foi digitado no arquivo HTML.

Exemplo:
p{
Text-transform: uppercase;
}

6.12. Propriedade: Links

Personalizao do estado do link: visitado, no visitado, ativo e outros. Utilizar as pseudoclasses.

6.12.1. Propriedade: Pseudo-classe

Uma pseudo-classe permite personalizar tendo em conta um evento ou estado de uma
tag. As pseudo-classes para o link so:

Link:
Visited:
Active:
Hover:

Prof. Teresa Oliveira

Usada para links no visitados.

Usada para links visitados.
Usada para links ativos.
Usada quando o cursor do mouse est sobre o link.

Pg. 10 de 16

MANUAL CSS

6.12.2. Link, visited, active e hover

Exemplos de uso das pseudo-classes.
Exemplo:
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: blue;
text-decoration:none;
}
a:active {
color: blue;
text-decoration:none;
}
a:hover {
color: red;
text-decoration:none;
}

7. Agrupando Elementos - Class e id

7.1. Identificando e Agrupando Elementos
Personalizar um grupo de tags usando o CLASS, identificado por um

Personalizar apenas um objeto usando o ID, identificado por um #

7.2. Agrupando: Class

Para definir uma classe dentro do css utilizar o padro .nomeDaClasse e em seguida abrir
as chavetas para as regras css.
Exemplo:
.textoSite {
Font-size: 15px;
}
Dentro das tags utilizar da seguinte forma:
<p class=textoSite>Texto do site</p>
Prof. Teresa Oliveira

Pg. 11 de 16

MANUAL CSS

7.3. Identificando: Id
O atributo ID identifica no html um objeto, e dentro do css utilizar o valor deste id para
definir as regras css para este elemento.
Exemplo:
#titVermelho{
Color: red;
}
Dentro das tags utilizar da seguinte forma:
<h1 id=titVermelho>Ttulo Vermelho</h1>

8. Agrupando Elementos - Span e Div

8.1. Agrupando: Span
A tag <span> no tem efeito visual nenhum dentro do documento html, usada apenas
para adicionar efeitos dentro do texto atravs do css.
Exemplo:
html:

<span class=negrito>texto em negrito</span>

Exemplo:
CSS:

.negrito {
font-weight: bold;
}

8.2. Agrupando: Div

O div utilizado para agrupar um ou mais elementos.
Exemplo:
CSS:

.eleDiv{
Color: red;
}

Exemplo:
HTML:

Prof. Teresa Oliveira

<div class=eleDiv>Aqui vai o contedo!</div>

Pg. 12 de 16

MANUAL CSS

9. Margin, Padding e Bordas

9.1. Box Model
Os elementos HTML geram uma caixa que chamada de BOX MODEL.
Esta caixa formada por:

Contedo - O contedo da caixa, onde texto e imagens aparecem

Padding - Limpa uma rea em torno do contedo. O preenchimento transparente
Border - A fronteira que gira em torno do preenchimento e contedo
Margin - Limpa uma rea fora da fronteira. A margem transparente

9.2. Margin
Margem a distncia da borda at o Box Model de outro elemento ou a margem do
documento HTML.
As margens do elemento HTML podem ser 4: esquerda, direita, superior e inferior
Para definir a margem de um elemento HTML, criar uma regra css para o elemento e
dentro dela preencher as propriedades:

margin-top:
margin-right:
margin-bottom:
margin-left:

Prof. Teresa Oliveira

Margem superior
Margem Direita
Margem Inferior
Margem Esquerda

Pg. 13 de 16

MANUAL CSS

Exemplo:
<h1>Ttulo</h1>
<p>Frase sobre margin!</p>
Aplicar uma margem esquerda no elemento <p>:
<style>
p{
margin-left: 20px;
}
</style>

9.3. Padding
O padding o espaamento entro o elemento e a sua borda.
As propriedades CSS para o padding so:
padding-top:
Padding superior
padding-right:
Padding Direita
padding-bottom Padding Inferior
padding-left:
Padding Esquerda
Todas as propriedades de preenchimento podem ter os seguintes valores:
comprimento - especifica um espaamento em px, pt, cm, etc.
% - Especifica um espaamento em % da largura do elemento
Exemplo:
p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

OU

p{
padding: 50px 30px 50px 80px;
}

9.4. Bordas
Propriedades das bordas:
Border-width - especifica a largura das quatro bordas
Border-color - define a cor das quatro bordas
Border-style - especifica que tipo de borda a ser exibido
Border - especifica todas as propriedades da borda individuais

Prof. Teresa Oliveira

Pg. 14 de 16

MANUAL CSS

9.4.1. Border-width
Define a largura da borda que pode ser determinada por thin, medium, e thick

9.4.2. Border-color
Define a cor que vai ser apresentada na borda.
Pode ser definida das seguintes formas:
"#000FFF", "rgb(123,123,123)", "blue"

9.4.3. Border-style
Define o estilo de borda que vai ser apresentada. Utilizar os seguintes estilos:
Dotted - Define uma borda pontilhada
Dashed - Define uma borda tracejada
Solid - Define uma borda slida
Double - Define uma margem dupla
Groove - Define uma borda 3D.
Ridge - Define uma borda ridged 3D.
Inset - Define uma borda de insero 3D.
Outset - Define uma borda incio 3D.
None - Define nenhuma borda

9.4.4. Border
Border um compilador de todas as propriedades vistas anteriormente.
Segue a seguinte ordem:
width, style, color
<style>
h1 {
border: thick solid blue;
}
</style>
Prof. Teresa Oliveira

Pg. 15 de 16

MANUAL CSS

10.Altura e Largura
10.1. Largura: Width
Width a propriedade que representa a largura de um objeto.
Width: 200px;

Ou

Width: 20%

10.2. Altura: height

Height a propriedade que representa a altura de um elemento.
Height: 200px;

Ou

Height: 20%

11.Posicionando Elemento e Layer

11.1. Sistema de Coordenadas
O sistema de coordenadas representado em pixels, tem um eixo X na horizontal e um
eixo Y na vertical. O canto superior esquerdo representa o ponto 0,0.
Para posicionar um elemento utilizar as propriedades:
Position: aceita dois valores absolute ou relative.
Top ou botton: representa o eixo Y.
Left ou Right
representa o eixo X,.
Exemplo:
HTML:
<h1>Cabealho</h1>
CSS:
H1{
Position: absolute; Top: 200px;
Left: 100px;
}

12.Comentrios em CSS
Os comentrios so usados para explicar o cdigo e so ignorados pelos navegadores.
Exemplo
p{
color: red;
/* comentrio */
text-align: center;
}

Prof. Teresa Oliveira

Pg. 16 de 16