Cascading Style Sheets

CSS
Cascading Style Sheets

CSS
• Folhas de estilos em cascatas

• Linguagem de estilo utilizada para descrever a
apresentação de um documento HTML
• Facilidade de manutenção
• Define estilos para aplicar em todas as páginas
• Quando houver novas funcionalidades, não é necessário
mudar a página, basta acrescentar no CSS
Sintaxe Básica
• O estilo especifica um conjunto de seletores que são

formatados por uma lista de propriedades entre chaves
“{}”;
• Notação utilizada:
• Elemento (seletor);
• propriedade;
• valor da propriedade;
• elemento {propriedade:valor}
• Exemplo:
• P{font-family:arial; color:magenta}
Tipos de utilização:
• In-line: utilizado direto na TAG que se deseja formatar
• Incorporado: colocado dentro do documento HTML,

através do elemento STYLE, geralmente no início do
arquivo
• Vinculado:criado um arquivo a parte e referenciado no

início do documento HTML, através do elemento LINK
Estilo In-line
• São utilizados dentro do elemento
• Atributo style
• Sintaxe:
• <ELEMENTO style= “propriedade:valor;
propriedade:valor”>
Exemplo: In-line
<HTML>
<HEAD>
</HEAD>
<BODY>
<P style=“font-family:arial; color:magenta”>
Exemplo de CSS utilizando estilo In-line
</P> Exemplo de parágrafo sem formatação
</BODY>
</HTML>
Estilo Incorporado
• Define-se o estilo no início do documento, através do

elemento STYLE, criando uma área padrão para toda a
página
• É melhor que o estilo In-line, mas limita-se a página

definida com o CSS
• Não podem ser compartilhados

Exemplo: Incorporado
<HTML>
<HEAD>
<STYLE type="text/css">
p {text-align:center;color:red}
</STYLE>
</HEAD>
<BODY>
<p> Exemplo de parágrafo utilizando o estilo incorporado
</BODY>
</HTML>
Estilo Vinculado
• Utiliza um arquivo externo, cria-se um arquivo unicamente

de estilos referenciado através do elemento LINK
• Melhor forma de organizar a formatação para utilizar em

HTML
• Os arquivos externos (separados) são identificados pela

extensão .CSS
• Todas as páginas HTML podem utilizar o arquivo
• Caso haja uma modificação, todas as páginas são alteradas

Estilo Vinculado
• Vincular uma página HTML ao estilo .CSS, deve ser

incluída um elemento LINK na seção HEAD da
página HTML onde a formatação deve ser aplicada,
especificando o local do arquivo.CSS
• rel="STYLESHEET" indicando que o link é uma folha de
estilo
• type="text/css" porque o arquivo é de texto, em sintaxe

CSS.
• href="estilos.css" indica o nome do arquivo fonte dos

estilos.
Exemplo: Vinculado
• Exemplo:
<HEAD>
<LINK rel=“stylesheet” type=“text/css” href=“arquivo.css”>
</HEAD>
Elementos Relacionados
STYLE
Define estilos CSS
LINK
Referência a um recurso externo
DIV
Elemento de bloco genérico, geralmente usado para
agrupar outros elementos de bloco
SPAN
Elemento in-line genérico, normalmente usado para criar
novos elementos lógicos
Elemento STYLE e LINK
Aparecem sempre dentro do cabeçalho (HEAD)
• Exemplo STYLE
<STYLE type=“text/css”>
Seletor {propriedade: valor}
</STYLE>
• Exemplo LINK
<LINK rel=“stylesheet” type=“text/css”

href=“arquivo.css”>
Elemento DIV
Marca um bloco de texto que pode receber formatação dos
estilos
Exemplo:
<HTML>
<BODY>
<DIV STYLE=text-align:center>
<H1> Título 1 </H1>
<P> Parágrafo e título centralizados </DIV>
</BODY>
</HTML>
Elemento SPAN
Define um trecho do texto que pode receber formatação

dos estilos
Exemplo:
</HTML>
<BODY>
<H1> Título 1 </H1>
<P> Parágrafo com <SPAN STYLE=color:blue> texto em
azul </SPAN>
</BODY>
</HTML>
DIV ≠ SPAN
SPAN pode ser aplicada a uma palavra ou frase dentro de

um parágrafo, DIV é apenas para blocos de texto
Agrupamento de Elementos
Além de definir a formatação de vários atributos para um

elemento, pode-se agrupar elementos
Agrupar elementos
Uma formatação é válida para todos elementos
• Exemplo: a cor dos cabeçalhos será vermelho

H1, H2, H3, H4, H5, H6 {color: red;}
CLASS
Classe no CSS permite criar um versão específica de

determinado elemento, definindo a formatação, aplicando a
qualquer elemento HTML
Pode-se aplicar estilos diferentes para o mesmo elemento,
basta usar classes diferentes
• Sintaxe: (elemento.nome da classe)
elemento.nome_classe {propriedade:valor;
propriedade:valor;}
Exemplo: CLASS
<HTML>
<HEAD>
<STYLE type=“text/css”>
P.ex1 {color:green;}
P.ex2 {color: red;}
</STYLE>
</HEAD>
<BODY>
<P class=“ex1”> Exemplo de parágrafo utilizando a classe ex1. O texto
está em verde!
<P class=“ex2”> Exemplo de parágrafo utilizando a classe ex2. O texto
está em vermelho!
</BODY>
</HTML>
ID
O ID é um seletor que difere do CLASS por ser único

elemento exclusivo.
Poder ser aplicado a UM elemento na página.
Não pode haver mais de um elemento com o mesmo ID
• Sintaxe:
#nomeID {propriedade: valor;}

Exemplo: ID
#exemplo {color: #000000;

background:#FFFFFF;}
<DIV id="exemplo">
Este é um exemplo da utilização do DIV aplicado com o ID
no CSS
</DIV>
Pseudo-Classes
a:link{color: green;
}
a:visited{color: red;
}
a:active{background-color: magenta;
}
a:hover{color: green;
font-style: italic;
letter-spacing: 10px;
}
Pseudo-Elementos
Permitem que elementos lógicos sejam definidos

• first-line: estilo aplicado a primeira linha de cada parágrafo
• first-letter: estilo aplicado ao primeiro caractere de um
elemento
Exemplo:
P:first-letter {
font-size: 300%;
}
P:first-line {
color: green;
}
Diretiva @import
Permite importar partes de um arquivo.css para dentro do

estilo definido
• Exemplo:
@import “estilo.css”;
Fonte
Características das letras que constituem o texto

Propriedades básicas:
• color:cor da fonte
• font-family:tipo de fonte (exemplo: tahoma)
• font-size:tamanho da fonte (valor)
• font-style:estilo de fonte (normal, italic)
• font-weight:estilo negrito para o texto (normal, bold,
100,...)
• font:maneira abreviada para todas propriedades
• Valores: length -medida (px, pt, em, cm...)
% -porcentagem da largura do elemento
Unidades de medida
Unidade de tamanho relativo –tomam como base um valor

de referência anteriormente definido
• em: tamanho relativo ao tamanho da propriedade font-
size de um elemento
• ex:tamanho relativo da fonte de um elemento
• px:tamanho em pixels, aceita valores inteiros
Unidades de medida:
São calculadas em relação a um valor preexistente, em geral uma

unidade de medida
% -porcentagem relativo ao tamanho padrão, aceita números reais
(0 a 100)
• Exemplo:
<style type="text/css">
P {background:#ccc; width:50%; font-size: 30px; }
SPAN{ font-size: 200%; }

</style>
<P> Exemplo do parágrafo utilizando <SPAN> SPAN para uma palavra

</SPAN>
Texto
Define a aparência do texto

• text-align:alinhamento do texto na horizontal (left, right,
center, justify)
• text-indent:distância à esquerda da primeira linha de um
bloco de texto (lenght, %)
• text-decoration: características de apresentação
• (none, underline, overline, linethrough)
• letter-spacing:espaço entre as letras -aceita valores
negativos (normal, lenght)
• word-spacing:espaço entre palavras
• white-space:múltiplos espaços em branco e quebras de
linha (normal, pre, ...)
Texto (font-size)
• font-size: define o tamanho das fontes
Valores possíveis: valor absoluto, valor relativo, valor em

porcentagem e inherit (valor herdado)
• Valor absoluto (fonte html): xx-small (1), xsmall, small (2),
medium (3), large (4) , x-large (5), xx-large (6)
• Exemplo:
P{font-size: x-large;
}
<P><FONT size=5> Texto </FONT>
Texto (font-size)
• Valor relativo (fonte html): smaller (menor) e larger (maior)

Definem o tamanho da fonte tomando como base o
tamanho da fonte do elemento-pai
Porcentagem e valor relativo:
• Exemplo:
P {font-size: 80%;
}
P {font-size: 1.8em;
}
Cor e Fundo
Define as cores do texto e cores aplicadas no fundos dos

elementos
• color:cor do texto
• background-color:cor de fundo de um elemento
• background-image: define imagem para o fundo (URL)
• background-repeat: determina como será repetida a
imagem de fundo (repeat, norepeat, repeat-x, repeat-y)
Margem
Definem as margens dos elementos, podem ser aplicadas

individualmente para cada lado do elemento
• margin-top: margem superior
• margin-bottom: margem inferior
• margin-left:margem esquerda
• margin-right:margem direita
• margin:forma abreviada para todas as margens
valores:auto –padrão
• length –medida (px, pt, em, cm...)

Exemplo: Margem
Exemplo1 :
body
{
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Exemplo 2:
body{
margin: 100px 40px
10px 70px;
}
Links sugeridos
• W3C
http://www.w3.org/Style/CSS/
• Editor de CSS
http://www.hostm.com/css
BORDER
Bordas
• Define o estilo das bordas adicionadas a um elemento
• Cada borda (bottom/top/left/right) permite três
propriedades
• border-widht:espessura da borda
• border-style:estilo da borda
• border-color:cor da borda
• border:forma abreviada para todas as propriedades da
borda
Bordas Widht e Style
border-widht
Opções:
Thin ; Medium; Thick
border-style
Propriedade :
Definir o estilo
da borda.
Exemplo: Bordas
H1 {border-width: thick;
border-style: dashed;
border-color: gold;
}
H2 {
border-width: 20px;
border-style: double;
border-color: red;
}
P { border-width: 1px;border-style: grooveborder-color: blue;}

Exemplo: Borda Personalizada
H1 {
background-image: url(exemplo.jpg);
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: 20px;
}
Espaçamento
Permite definir o espaçamento do conteúdo do elemento

em relação a sua borda
• padding-top:distância mínima da borda superior
• padding-bottom:distância da borda inferior
• padding-left:distância da borda esquerda
• padding-right:distância da borda direita
• padding:forma abreviada para todas as margens
• valores: 0 (padrão)
• length: medida (px, pt, cm...)
Exemplo: Espaçamento
H1.esp{
background: red;
padding: 20px 20px 20px 80px;
}
H2.esp{
background: yellow;
padding-left:120px;
}
<BODY>
<H1 class="esp"> Título A modificando o espaçamento /H1>
<H2 class="esp"> Título B modificando o espaçamento </H2>
</BODY>
Dimensão
Define o tamanho dos elementos

• width: largura do elemento
• height: altura do elemento
• line-height: define a altura das linhas de texto
• max-height/min-height: definem altura máxima/mínima de

um elemento
• max-width/min-widht: definem a largura máxima/mínima de

um elemento
Exemplo: Dimensão
<STYLE type="text/css">
div.exemplo {
width: 100px;
border: 1px solid black;
background: blue;
}
</STYLE>
<BODY>
<DIV class="exemplo">
Bloco de texto com o DIV, exemplificando o uso das propriedades Borda,
cor de fundo e largura
</DIV>
</BODY>
Listas
Define-se o tipo de lista e a posição do marcador (UL/OL)
• list-style-position: posição do marcador da lista em

relação ao conteúdo (inside, outside)
• list-style-image: imagem usada como marcador da lista

(list-style-image: url(“exemplo.jpg”)
• list-style-type: tipo de marcador da lista (se list-style-

image estiver como “none”)
• list-style: forma abreviada para todas as listas

Tabelas
Define as características da tabela
• padding:espaçamento entre as bordas de uma célula e o

conteúdo (padding: [left/right/top/bottom])
• border-width:espessura da borda (thin, medium, thick).

subestilos (border-left-width)
• border-style: formatação da borda
• border-color: cor da borda. subestilos (border-right-style)

Menus
Para criação de menus é comum o uso do elemento

ul(listas)
Estilização padrão
• Diferentes navegadores aplicam por padrão margin e

padding diferentes
• Conveniente zerar essas propriedades (margin: 0; padding:

0;)
• Tirar marcador: list-style-type: none

Link sugerido
• W3C
http://www.w3.org/Style/CSS/

Cascading Style Sheets

Enviado por

Direitos autorais:

Formatos disponíveis

Cascading Style Sheets

Enviado por

Dados do documento

Título original

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

Cascading Style Sheets

Enviado por

Direitos autorais:

Formatos disponíveis

CSS

Cascading Style Sheets

• Folhas de estilos em cascatas

• O estilo especifica um conjunto de seletores que são

• In-line: utilizado direto na TAG que se deseja formatar

• Incorporado: colocado dentro do documento HTML,

• Vinculado:criado um arquivo a parte e referenciado no

• Define-se o estilo no início do documento, através do

• É melhor que o estilo In-line, mas limita-se a página

• Não podem ser compartilhados

• Utiliza um arquivo externo, cria-se um arquivo unicamente

• Melhor forma de organizar a formatação para utilizar em

• Os arquivos externos (separados) são identificados pela

• Todas as páginas HTML podem utilizar o arquivo

• Caso haja uma modificação, todas as páginas são alteradas

• Vincular uma página HTML ao estilo .CSS, deve ser

• type="text/css" porque o arquivo é de texto, em sintaxe

• href="estilos.css" indica o nome do arquivo fonte dos

Aparecem sempre dentro do cabeçalho (HEAD)

<LINK rel=“stylesheet” type=“text/css”

Define um trecho do texto que pode receber formatação

SPAN pode ser aplicada a uma palavra ou frase dentro de

Além de definir a formatação de vários atributos para um

• Exemplo: a cor dos cabeçalhos será vermelho

Classe no CSS permite criar um versão específica de

• Sintaxe: (elemento.nome da classe)

O ID é um seletor que difere do CLASS por ser único

#nomeID {propriedade: valor;}

#exemplo {color: #000000;

Permitem que elementos lógicos sejam definidos

Permite importar partes de um arquivo.css para dentro do

Características das letras que constituem o texto

Unidade de tamanho relativo –tomam como base um valor

São calculadas em relação a um valor preexistente, em geral uma

SPAN{ font-size: 200%; }

<P> Exemplo do parágrafo utilizando <SPAN> SPAN para uma palavra

Define a aparência do texto

• font-size: define o tamanho das fontes

Valores possíveis: valor absoluto, valor relativo, valor em

• Valor relativo (fonte html): smaller (menor) e larger (maior)

Define as cores do texto e cores aplicadas no fundos dos

Definem as margens dos elementos, podem ser aplicadas

• length –medida (px, pt, em, cm...)

P { border-width: 1px;border-style: grooveborder-color: blue;}

Permite definir o espaçamento do conteúdo do elemento

Define o tamanho dos elementos

• height: altura do elemento

• line-height: define a altura das linhas de texto

• max-height/min-height: definem altura máxima/mínima de

• max-width/min-widht: definem a largura máxima/mínima de

• list-style-position: posição do marcador da lista em

• list-style-image: imagem usada como marcador da lista

• list-style-type: tipo de marcador da lista (se list-style-

• list-style: forma abreviada para todas as listas

Define as características da tabela

• padding:espaçamento entre as bordas de uma célula e o

• border-width:espessura da borda (thin, medium, thick).

• border-style: formatação da borda

• border-color: cor da borda. subestilos (border-right-style)