O que é CSS?
CSS significa Cascade Styling Sheet, Folha de Estilo em Cascata, e tem como objectivo definir
como posicionar e mostrar elementos HTML, de uma forma visualmente trabalhada.
SINTAXE CSS
A sintaxe CSS é bastante simples, sendo composto por um selector e uma ou mais
declarações
1
h1 {color:red;font-size:14px;}
O selector será o elemento HTML ao qual quer adicionar estilo. Cada declaração consiste em
uma propriedade e um valor. A propriedade é um atributo de estilo que quer alterar, e o valor
é o valor dessa propriedade.
Também é possível adicionar comentários ao código CSS através de /* e *\:
1
2
3
/* Isto é um comentário *\
h1 {color:red;font-size:14px;}
/* Isto é outro comentário *\
ONDE E COMO INSERIR
Existem 3 formas de inserir CSS:
1. Através de uma folha de estilos externa.
2. Através da folha de estilos interna.
3. Através do estilo em linha.
ID E CLASSE CSS
Além de estilizar elementos HTML, CSS permite-lhe definir os seus próprios selectores
chamados de ID eCLASS.
O selector ID é usado para definir estilo para um elemento único. Usa o ID do atributo do
elemento HTML e é definido com um “#”.
1
2
3
4
5
#titulo2
{
text-align:center;
color:red;
}
No caso, o estilo foi aplicado ao elemento com o ID=”titulo2″.
O selector CLASS é utilizado para estilizar um grupo de elementos. Ao invés do selector ID, o
selectorCLASS é frequentemente utilizado em vários elementos. Isto permite-lhe definir um
estilo particular para qualquer elemento HTML que tenha a mesma classe. Como o selector ID,
o CLASS usa o atributo de classe de HTML e é definido com um “.”.
1
.center {text-align:center;}
Propriedade "font"
→ font: Comando que abrevia todas as propriedades.
» Usa-se "font: Arial 12px normal #000000;"
→ font-family: Comando que permite escolher qual fonte será usada no texto, cabeçalho
etc.
» Usa-se "font-family: Arial;"
» As fontes mais comuns são Georgia, Verdana, Arial, Courier New, Trebuchet MS, Century
Gothic entre outras
→ color: Comando que permite alterar a cor da fonte.
» Usa-se: "color: #000000;"
» O código da cor pode ser hexadecimal (#000000, #FFFFFF), rgb (255,235,0) ou pode-se
usar também o nome em inglês das cores (white, black, green, red)
→ font-size: Comando que permite alterar o tamanho da fonte.
» Usa-se: "font-size: 12px;", "font-size: small;", "font-size: 78%;"
» O tamanho da fonte pode ser indicado por um dos seguintes valores: xx-small, x-small,
small, medium, large, x-large, xx-large, smaller, larger, length (px, pt, em, cm) ou %
Propriedade "text"
→ text-align: Comando que permite escolher o alinhamento do texto.
» Usa-se: "text-align: center;"
» left: texto alinhado à esquerda
» right: texto alinhado à direita
» center: texto alinhado ao centro
» justify: texto justificado
→ letter-spacing: Comando que permite adicionar um espaço entre as letras.
» Usa-se "letter-spacing: .1em;", "letter-spacing: 1px;"
» lenght: nesse valor, usa-se as medidas px, pt, em, cm...
» normal: deixa o espaço entre as letras normal
→ word-spacing: Comando que permite adicionar um espaço entr as palavras.
» Usa-se "word-spacing: .2em;", "word-spacing: 1px;"
» lenght: nesse valor, usa-se as medidas px, pt, em, cm...
» normal: deixa o espaço entre as letras normal
→ text-decoration: Comando que define a decoração do texto.
» Usa-se "text-decoration: underline;"
» underline: linha sólida
» overline: sobrelinhado no texto
» blink: faz com que o texto pisque
» line-through: linha sólida acima do texto
» none: nenhuma decoração
→ text-transform: Comando que permite escolher qual será a transformação do texto.
» Usa-se "text-transform: uppercase;"
» uppercase: deixa todas as letras em maiúscula
» lowercase: deixa todas as letras em minúscula
» capitalize: deixa apenas a primeira letra em maiúscula
» none: não permite a transformação do texto
Propriedade "margin"
→
→
→
→
→
margin-top: Comando que define a margem superior.
margin-bottom: Comando que define a margem inferior.
margin-right: Comando que define a margem à direita.
margin-left: Comando que define a margem à esquerda.
margin: Abreviação de todas as propriedades anteriores.
» Usa-se: "margin: 5px;", "margin-bottom: 7px;"
Propriedade "border"
→ border-width: Comando que define a espessura da borda.
» Usa-se: "border-width:1px;"
→ border-style: Comando que define o estilo da borda.
» Usa-se: "border-style: dotted;"
→ border-color: Comando que define a cor da borda.
» Usa-se: "border-color: #EEEEEE;"
→ border: Comando que abrevia o uso de todos os comandos anteriores.
» Usa-se: "border: 1px solid #DCDCDC;"
Propriedade "padding"
→
→
→
→
→
padding-top: Comando que define o espaço acima.
padding-right: Comando que define o espaço à direita.
padding-bottom: Comando que define o espaço abaixo.
padding-left: Comando que define o espaço à esquerda.
padding: Abreviação de todos os outros comandos.
» Usa-se: "padding:top: 5px;", "padding: 10px;"
Propriedade "background"
→ background-color: Comando que define a cor de fundo da página, menu etc.
» Usa-se: "background-color: #000000;", "background-color: green;"
» O código da cor pode ser hexadecimal (#000000, #FFFFFF), rgb (255,235,0)
transparente (transparent) ou pode-se usar também o nome em inglês das cores (white,
black, green, red)
→ background-image: Comando que define a utilização de uma imagem como fundo.
» Usa-se: "background-imagem: url (LINK-DA-IMAGEM);"
» url: comando que deve ser usado para colocar o link da imagem
→ background-repeat: Comando que permite repetir ou não a imagem no fundo.
» Usa-se: "background-repeat: repeat-y;"
» no-repeat: não repetir a magem
» repeat: repetir na horizontal e vertical
» repeat-y: repetir na vertical
» repeat-x: repetir na horizontal
→ background-attachment: Comando que permite definir se a imagem de fundo será fixa
ou não.
» Usa-se: "background-attachament: fixed;"
» fixed: imagem fixa na tela
» scroll: imagem rola com a tela
→ background: Comando que abrevia o uso de todos os comandos anteriores.
» Usa-se: "background: url (LINK-DA-IMAGEM) repeat fixed;"
LINKS CSS
Os links também podem ser estilizados com qualquer propriedade CSS, color, fontfamily, background, etc.
Existem também 4 estados de links como é sabido, e estes podem ser estilizados de forma
independente.




1
2
3
4
a:link
a:visited
a:hover
a:active
a:link {color:#FF0000;}
/* link nao visitado */
a:visited {color:#00FF00;} /* link visitado */
a:hover {color:#FF00FF;} /* rato sobre o link */
a:active {color:#0000FF;} /* link seleccionado */
Também é possível adicionar decoração:
1
2
3
4
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Ou cor de fundo:
1
2
3
4
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
TABELAS CSS
Uma simples tabela pode ser muito melhorada e tornada mais atractiva através de CSS. É
possível alterar os limites, tamanho, alinhamento do texto, espaçamento, cor e outros.
Limites
Estes limites são inseridos em toda a tabela, sendo que neste caso irá ter 1px de largura e a
cor preta:
1
2
3
4
table, th, td
{
border: 1px solid black;
}
Tamanho
Este tamanho é relativo à tabela, em que estamos a definir a largura e altura da mesma:
1
2
3
4
5
6
7
8
table
{
width:100%;
}
th
{
height:50px;
}
Alinhamento
Este alinhamento é relativo ao texto, sendo que pode ser alinhado de forma geral com o textalignou mais especificamente com o vertical-align e horizontal-align:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
td
{
text-align:right;
}
/*
ou
*\
td
{
height:50px;
vertical-align:bottom;
horizontal-align:center;
}
Espaçamento
Este espaçamento é entre o limite da tabela e o conteúdo. Pode ser utilizado com td e th.
1
2
3
4
td
{
padding
}
Cor
A cor pode ser adicionada a qualquer elemento da tabela:
1
2
3
4
5
6
7
8
9
table, td, th
{
border:1px solid orange;
}
th
{
background-color:red;
color:white;
}