Seja bem Vindo!

Curso CSS - Cascading

Style Sheets

CursosOnlineSP.com.br
Carga horária: 50 hs
Conteúdo programático:

Introdução
Entendendo Style Sheets
Como Criar Estilos
As Folhas de Estilos
Adicionar regras para uma Style Sheet
Trabalhar com Classes em Style Sheets
Trabalhar com Tags Personalizadas
O Posicionamento dos Elementos
Mudar o Tamanho de um Elemento
Como Estilos Concorrentes são Combinados
A Herança de Estilos
Propriedades em CSS
- Propriedade Background (Fundo do Elemento)
- Propriedade Font (Tipo de Letra)
- Propriedade de Texto
- Propriedade das Margens
- Propriedades de Padding
- Propriedades de Dimensão
- Propriedades de Posicionamento
- Propriedade de Listas e Marcadores
Unidades de Medida
Introdução

CSS é a mesma coisa que Style Sheets e que Folhas de Estilo.

Você provavelmente já deve ter visto esses nomes em vários
lugares. CSS é mais uma forma de aperfeiçoar seus documentos,
o CSS tem muitos tipos de definição aqui veremos muitas delas.
A forma recomendada para formatar as páginas escritas em
XHTML baseia-se nos padrões "Cascading Style Sheets" (folhas
de estilos em cascata), publicados pelo World Wide Web
Consortium (W3C).
A utilização deste padrão da Web permite ganhar tempo, dar
consistência e facilitar muito a escrita de páginas para a Web.
Neste curso vamos aprender a usar folhas de estilos em cascata
(estilos CSS) para criar páginas mais flexíveis, mais leves, e
controlar o seu aspecto gráfico com maior precisão e com maior
facilidade na correção de erros.
Os "Style sheets" ou "Folhas de Estilo" para a Web foram
propostos e desenvolvidos há alguns anos, mas só recentemente
eles ganharam uma divulgação mais ampla. A razão é a de que os
style sheets são inúteis a não ser que haja navegadores que os
suportem, e nenhum browser largamente utilizado fez isso até que
a Microsoft começou a oferecer suporte parcial para os Cascading
Style Sheets (CSS) na versão 3.0 do Internet Explorer. Atualmente
é dado suporte para os style sheets, portanto, no IE 3.0 e superior,
e no Netscape 4.0 e superior; ou seja, navegadores atuais
certamente suportam essa formatação.

No que as Folhas de Estilos podem nos ajudar?

• Economizar o seu tempo

• Diminuir o tamanho do código de sua página.
• Sua página irá carregar mais rapidamente
• Mais facilidade de manter e fazer alterações na página
• Mais controle no layout da página
• e muito outros que você mesmo descobrirá...
Porque é que devemos formatar com estilos?

Vantagens dos estilos CSS

• Os estilos CSS foram adicionados pelo W3C às recomendação
HTML 4 e XHTML para resolver problemas muito sérios que
afetavam a qualidade das páginas escritas em HTML e
dificultavam a sua manutenção.
• A utilização de folhas de estilos externa permite poupar tempo,
ganhar flexibilidade e aumentar a consistência das páginas que
constituem um website.
• Quando guardamos os estilos num arquivo externo e os
aplicamos a todas as páginas de um website, a modificação de
diversas qualidades do aspecto gráfico passa a ser uma tarefa
fácil.
• As páginas que usam estilos CSS, para além de serem mais
fáceis de escrever, são também mais leves e carregam mais
depressa no navegador.

O "mecanismo" de cascata
As folhas de estilos CSS dão muita liberdade na forma de definir
os estilos. No mesmo documento podemos utilizar um ou mais
arquivos externos, definir os estilos na seção head do documento
ou utilizar o atributo style nos elementos do HTML.
O navegador lê todas as definições de estilos que encontra e
quando aparecem estilos repetidos ele combina-os num só estilo
seguindo algumas regras simples.
Uma das regras da cascata diz que ao encontrar várias versões
para o mesmo estilo o navegador guarda a última que encontrou.
Outra regra diz que alguns estilos são herdados pelos elementos
que se encontram dentro de outros elementos.

Porque é que a formatação com estilos é superior?

As etiquetas (tags) que definem os elementos do HTML foram
concebidas para definir conteúdos. O autor do HTML nunca teve
qualquer intenção de usar esta linguagem para definir estilos
gráficos para as páginas.
Os elementos do HTML foram idealizados para declarar coisas
como "Isto é um parágrafo", ou "Isto é um cabeçalho". Para isso
colocavam-se etiquetas como <p> ou <h1> ao redor do texto. A
forma como esta informação devia ser apresentada graficamente
era um problema que o navegador tinha de resolver tendo em
consideração o significado de cada elemento.Este conceito
perfeitamente racional era muito adequado enquanto o objetivo
das páginas foi apenas a escrita e a partilha de textos na Web, mas
a rápida aceitação da Web fez com que as pessoas que davam
importância ao design também se interessassem por este meio.
Esse interesse levou a que fossem feitos esforços para criar
páginas graficamente elaboradas, mais ao gosto dos designers.
Um dos efeitos mais importantes desses esforços foi a completa
adulteração do propósito de diversos elementos. O elemento
<table>, por exemplo, foi concebido unicamente para apresentar
tabelas com dados numéricos, mas os designers passaram a usá-
lo para colocar os elementos em diversos pontos das páginas em
arranjos cada vez mais complexos.
Mas isto não era suficiente porque havia coisas que não podiam
ser feitas usando apenas os elementos disponíveis. Para dar aos
designers aquilo que eles pediam, os criadores dos navegadores
acharam que era boa ideia inventarem as suas próprias etiquetas
e acrescentaram atributos estilísticos aos que já existiam. Estas
extensões permitiram usar o HTML para dar cores e estilos
diferentes ao texto e aplicar outras formatações.

Entendendo Style Sheets

CSS, ou Cascading Style Sheets é uma recomendação do W3C,

assim como o XML e o HTML.
Style Sheets permite a separação do conteúdo dos documentos de
sua apresentação. E associando scripts aos elementos é possível
alterar o formato do documento assim como sua interface com o
usuário.
Anexando Style Sheets em documentos HTML

A linguagem HTML permite que qualquer trecho de código seja

adicionado à página. Para tanto, é utilizado o elemento <META>.
Entretanto, você deve especificar a linguagem a ser utilizada,
como no exemplo abaixo:

Através de links

Você pode criar uma Style Sheet em um arquivo separado para

posteriormente aplicar tal estilo em todas as páginas do site.
Utilizando este recurso adequadamente, é possível centralizar
quase toda a apresentação de um site em um ou mais arquivos.
Caso haja necessidade de mudança na apresentação do site, esta
é feita em um único lugar.
É aconselhável que o arquivo de estilos possua a extensão .css
mas não é obrigatório. Outra extensão também funciona. É um
arquivo somente texto cujo formato é legível e de fácil
compreensão. Isto facilita a criação de Style Sheets utilizando
editores simples como o notepad.
Para associar uma Style Sheet armazenada em um arquivo
separado use o elemento <LINK> como no exemplo abaixo:

Incluindo CSS no documento

Nem sempre é necessário armazenar o estilo em um arquivo

separado. Os códigos de estilo podem ser colocados dentro de
cada documento HTML. Obviamente, os códigos colocados dentro
um documento HTML afetarão somente aquele documento.
É possível a utilização de estilos internos e estilos externos. Neste
caso, os estilos internos sobrepõem estilos externos se houver
conflitos. Se não houver, os estilos internos são aplicados e
posteriormente são aplicados os estilos externos.

O elemento utilizado para adicionar o estilo ao documento é o

elemento <STYLE>. O atributo TYPE especifica o tipo MIME.
Existem alguns outros atributos que serão abordados
posteriormente.
Definindo estilos junto com o elemento

CSS permite que sejam definidos estilos como atributo de um

elemento. Esta funcionalidade pode ser útil porque os estilos
definidos com o elemento sobrepõem os estilos do documento e
mesmo estilos anexados.
Por exemplo: suponhamos que você queira alterar a cor de um
parágrafo destacando-o diante do resto do documento mas esta
alteração é uma exceção. Então você pode utilizar o atributo
STYLE e atribuir a este o estilo a ser aplicado:

Estilos definidos junto com os elementos devem ser utilizados com

cuidado para que seja preservada uma das principais
características da CSS: a reutilização de estilos.

Importando Style Sheets

Estilos também podem ser importados de outros arquivos. Para

tanto, é utilizada o comando @import passando como parâmetro
caminho e o nome do arquivo. A maioria dos navegadores ainda
não suportam este comando e o elemento <STYLE> é
indispensável.
Importância do estilo

A utilização de estilo na construção de grandes sites é

fundamental. A utilização adequada pode contribuir nos seguintes
aspectos:
- Existência de um padrão de cores e navegação para todo o site
- Reutilização de código
- Velocidade no carregamento das páginas
- Administração centralizada
- Personalização de sites.
Apesar das inúmeras vantagens a construção de estilos sólidos e
reusáveis é uma tarefa difícil e requer administração centralizada.
Mais tarde discutiremos os desafios enfrentados ao desenvolver
sites utilizando CSS.

Entendendo a ordem

Como dito anteriormente, você pode utilizar vários tipos de estilos

para controlar a aparência do seu site. O navegador estabelece
uma prioridade para cada estilo a ser aplicado como na lista a
seguir:
- Estilos definidos junto com o elemento;
- Estilos definidos no documento;
- Estilos anexados.
Embora não seja aconselhável você pode usar o palavra
importante para alterar esta precedência. No exemplo abaixo o
estilo atribuído ao elemento H1 sobrepõe o estilo definido junto com
o elemento graças ao uso da palavra important:
Criando Style Sheets para cada tipo de Mídia

CSS permite também estilos diferentes para cada tipo de mídia

utilizada para apresentação deste estilo. Isto dá um enorme poder
para a CSS permitindo a utilização de um documento por
portadores de deficiência visual ou auditiva. Permite também a
aplicação de estilos especificamente para impressão de
documentos, o que resolve uma grande deficiência dos
navegadores.

A tabela abaixo descreve cada um dos estilos possíveis com a

CSS:
Como Criar Estilos

Cada estilo que você cria é definido como uma regra CSS. Cada
regra deve utilizar a seguinte sintaxe:

Explicação desta sintaxe:

Elemento -descreve o elemento de design ao qual o estilo será
aplicado. A mesma tag XHTML, mas sem os sinais de maior e
menor. Essa parte da regra é às vezes chamada de seletor.

Atributo- o aspecto específico do elemento que você quer usar

como estilo. Deve ser um nome de atributo CSS válido, como o
atributo font-size.

Valor -a configuração aplicada ao atributo. Deve ser uma

configuração válida para o atributo em questão, como 20pt (20
pontos) para font-size.

- a parte declaração da regra. Você pode atribuir

Atributo: valor
múltiplas declarações, se você desejar separá-los com ponto-e-
vírgula (;). Não coloque um ponto-e-vírgula depois da última
declaração.

Agora é hora de exemplos. Eis uma regra CSS que especifica que
todos os títulos de nível 1 (tags<H1>) sejam exibidos em uma fonte
de 36 pontos e da cor verde:
Aqui está um exemplo de regra que diz que todos os títulos de nível
2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;

Você pode inserir quebras de linha e espaços em branco dentro da

regra como quiser. Assim, é possível ver mais facilmente todas as
declarações e certificar-se de que colocou todos os sinais de
ponto-e-vírgula e colchetes nos lugares corretos.
Por exemplo, aqui está uma regra que diz que os parágrafos
aparecerão em fonte “comic sans ms”, 12 pontos, azul e recuado
meia polegada a partir da margem esquerda da página:
<body>
<p>
O texto deste parágrafo tem tipo de letra “comic sans ms”
</p>
</body>
</html>

Note como é fácil aplicar todas as declarações ao elemento

parágrafo (P) e como cada declaração, exceto a última, é seguida
pelo caracter de ponto e vírgula exigido.

As Folhas de Estilos

Você pode definir regras de CSS em três lugares. E, por definição,

pode utilizar uma combinação dos três métodos nos seus web
sites.
A maneira como as regras interagem entre si está relacionada à
parte “em cascata”. Os três lugares são:
1) em um documento separado fora de todos os documentos
HTML;
2) no cabeçalho de um documento HTML
3) dentro de uma tag de HTML.
Cada um destes métodos tem um nome e afeta as páginas HTML
em seu site de um modo diferente, como discutido aqui:
significa que você coloca as regras de CSS em um arquivo
Externo:
separado, e então sua página HTML pode fazer um link para esse
arquivo. Essa abordagem lhe permite definir regras em um ou mais
arquivos que podem ser aplicadas em alguma página do seu web
site.

significa que você especifica as regras de CSS no

Incorporado:
cabeçalho do documento. As regras incorporadas afetam somente
a página atual.

significa que você especifica as regras de CSS dentro da tag

Inline:
de HTML. Essas regras afetam somente a tag atual.

Estilos externos
Para definir um conjunto de regras de estilo que você pode
facilmente aplicar em alguma página do seu site, é preciso colocar
as regras em um arquivo de texto. Você pode criar este arquivo
com um editor de textos simples, como o notepad do Windows, e
dar ao nome desse arquivo a extensão “css”.
Sempre que quiser utilizar esses estilos em uma nova página,
basta colocar uma tag <link> no cabeçalho que referencie esse
arquivo .css. Veja o exemplo:
Arquivo meu_estilo.css
H1{font-family:’comic sans ms’;
Font-size: 36pt;
Color: blue}

P {font-family: ‘Courier’;
Margin-left: 0.5in}

Agora, para utilizar os estilos definidos neste arquivo .css você

precisa adicionar a tag a seguir ao cabeçalho da página, onde
nome_do_arquivo é uma referência absoluta ou relativa ao arquivo
.css.

OBS: Você deve inserir este texto entre as tags <head>...</head>

e colocar a localização correta do seu arquivo e seu nome.

Estilos incorporados

Se quiser criar um conjunto de estilos que se aplicam a uma única

página, você pode configurar os estilos exatamente como fizemos
no exemplo dos estilos externos - mas em vez de colocar as tags
<style>...</style> e as regras em um arquivo separado, coloque
estas tags na própria página HTML. A estrutura básica de uma
página da web que utiliza estilos incorporados é semelhante ao
seguinte código:
Estilos inline

Os estilos inline são os que têm menos efeitos. Eles afetam

somente a tag atual - não outras tags na página e tampouco outros
documentos. A definição de estilos utilizando o atributo style faz-
nos perder muita das vantagens das folhas de estilos porque
acaba por misturar estilos com conteúdos. Esta forma de definir
estilos deve ser usada com moderação e apenas quando
precisamos aplicar um estilo uma única vez a um único elemento.
A sintaxe para definir um estilo inline é a seguinte:

Note que em vez das tags <style>...</style>, você apenas utiliza

um atributo style dentro da tag para definir o estilo. E, em vez de
colocar as regras de CSS entre colchetes, você as coloca entre
aspas, separando-as com ponto-e-vírgula como de costume.
Adicionar regras para uma Style Sheet

Tanto Style Sheets anexadas quanto no documento permitem a

definição de um ou mais elementos.
Por exemplo, você deseja criar uma Style Sheet que define estilos
para os elementos <H1>, <H2> e <P>. Cada definição de estilo é
chamada de regra. Uma regra contém um seletor (que é o próprio
elemento), seguido da declaração (a definição do estilo). O
exemplo abaixo mostra uma regra que define um estilo para cada
ocorrência do elemento <H1>:

A declaração é colocada entre chaves ({}). Cada item na

declaração possui duas partes: O nome da propriedade e o valor
atribuído a esta, separado por dois pontos (:). No exemplo abaixo,
color é o nome da propriedade e blue é o valor atribuído a esta.
Existes dezenas de propriedades as quais se aplicam tipos
predefinidos e certos intervalos de valores:
Atribuindo múltiplas propriedades em uma regra simples

Múltiplas propriedades podem ser atribuídas em uma única

declaração. Isto é feito separando cada atribuição com o sinal de
ponto e vírgula (;). No exemplo abaixo, o navegador mostra cada
ocorrência do elemento <H1> usando a cor azul, fonte 12
centralizada. Para todas as outras propriedades o navegador
utilizará os valores padrão:

Agrupando seletores juntos em uma regra simples

Caso seja necessária a definição de um mesmo estilo para vários

elementos, esta pode ser feita listando os estilos individualmente.
Entretanto, existe uma maneira mais eficiente de fazer a mesma
ação. Os elementos (ou seletores) podem ser agrupados de modo
a definir uma regra única para todo o grupo. No exemplo abaixo os
seletores são agrupados e uma única regra é atribuída:

P, UL, LI {font-size: 12pt}

Definindo relacionamentos Pai-Filho nas regras

Usando CSS é possível especificar quando um estilo é aplicado à

um elemento. Por exemplo, você pode querer definir dois estilos
para o elemento <LI>: um que se aplica quando ele for filho do
elemento <UL> e outro quanto ele for filho do elemento <OL>. Para
tanto, você utiliza seletores contextuais. Seletores contextuais
definem a sequência exata de elementos para o(s) qual(is) um
estilo será aplicado.
Note que a lista de seletores não é separada por vírgula.
Separando cada seletor por vírgula os estilos atribuídos serão
aplicados aquele grupo de elementos.

Entendendo Herança

Os elementos herdam certas propriedades de seus pais. Por

exemplo, todas os elementos dentro do elemento <BODY> (<P> e
<UL>) herdam certas propriedades deste. Assim como o elemento
<LI> herda propriedades do elemento <UL> no qual ele está
contido. Veja o exemplo:

A Style Sheet para este exemplo muda a cor do elemento <P> para
azul. Não há definição para o elemento <EM>. Devido ao fato do
elemento <EM> está dentro do elemento <P>, <EM> herda a
propriedade color do elemento <P>.

Trabalhar com Classes em Style Sheets

Uma classe define a variação de um estilo, o qual é referenciado

através de uma ocorrência específica de um elemento utilizando o
atributo CLASS. Por exemplo, você pode definir três variações do
estilo H1 e então usar cada variação em um contexto apropriado.
Uma classe é definida normalmente, como é definido um estilo.
Apenas é adicionado o nome da classe no final do elemento,
separado por ponto, assim como no exemplo:

Quando o elemento <H1> é adicionado ao documento, o atributo

CLASS é utilizado para atribuir qual estilo será utilizado.

Uma classe não precisa estar ligada à um elemento. As classes

podem ser declaradas sem nenhum elemento. Assim, qualquer
elemento que utilize aquela classe utilizará aquele estilo:
Definindo um estilo para um elemento específico

Como já discutido anteriormente, você pode declarar estilos junto

com o elemento. Entretanto, para facilitar a leitura do documento,
você pode atribuir um ID aos elementos e então associar estilos à
este ID. Para declarar o estilo para um ID é usado o símbolo (#).
Somente aos atributos com aquele ID são aplicados os estilos.
O exemplo abaixo declara um estilo para o ID test. Ele também usa
o elemento <P> e atribui a este o ID test:

Pseudo-classes e Pseudo-elementos

Em CSS1, um estilo geralmente é associado a um elemento com

base na posição que este elemento ocupa dentro da estrutura
hierárquica do documento. Isto é suficiente para uma grande
variedade de estilos, mas não atende a alguns efeitos comuns.
O conceito de pseudo-classes e de pseudo-elementos pretende
suprir esta área, permitindo que informações exteriores possam
influenciar o processo de formatação do documento.
Pseudo-classes e pseudo-elementos podem ser usados como
seletores na CSS, mas eles não existem dentro da HTML. Mais
exatamente, eles são 'inseridos' pelo navegador, sob certas
condições, para serem usados como elos de ligação com as folhas
de estilo. Eles são referidos como 'classes' e 'elementos' porque
esta é uma maneira conveniente de descrever seu
comportamento. Mais especificamente, seu comportamento é
definido por uma tag fictícia de sequência.
Pseudo-elementos são usados para especificar sub-partes de
elementos, enquanto pseudo-classes permitem às folhas de estilo
diferenciar entre tipos diferentes de elementos. Abaixo vemos um
exemplo de utilização da pseudo-classe Anchor:

Todos os elementos 'A' com um atributo 'HREF' serão classificados

em um, e apenas um, destes grupos (ou seja, as definições das
posições locais dos links não serão afetadas). Os navegadores
podem decidir mover um elemento de um grupo a outro (de
'visitado' para 'não visitado', por exemplo, após um certo tempo).
Um 'link ativo' é aquele que está sendo selecionado no momento
pelo leitor (está sendo 'clicado').
Como adicionar comentários em Style Sheets

Assim como em qualquer linguagem de programação, em CSS é

possível adicionar comentários para melhor documentar o código.
Tanto para linhas de comentário quanto para blocos, a sintaxe é a
mesma:

Trabalhar com Tags Personalizadas

Com as classes de estilo, é possível definir diversas variações de

uma única tag. Por exemplo, você poderia fazer um estilo de
parágrafo "texto alinhado à direita", um estilo de parágrafo "texto
centralizado" e assim por diante, criando múltiplos temas em torno
da tag de parágrafo (<p>).
Você pode definir classes de estilo tanto em folhas de estilo
externas como nas incorporadas (não há sentido em definir uma
classe em um estilo inline!). A sintaxe é praticamente idêntica à
sintaxe normal para os estilos externo e incorporado, com adição
de um ponto e o nome da classe depois do elemento no qual será
utilizado o atributo.

Para dar um exemplo mais prático, uma classe de estilo muito

utilizada é a seguinte:
Depois você pode apenas adicionar o atributo class="meuslinks"
aos links em que desejar que fiquem azuis e não-sublinhados, por
exemplo. Veja como deve ficar o código:

Agrupar seletores

Se precisarmos aplicar os estilos em mais do que um elemento,

podemos agrupar os seletores que partilham as mesmas
definições. Para isso, os escrevemos um a um, separados por
vírgulas. No exemplo seguinte, os elementos de <h1> até <h6>
partilham todos a mesma definição:

Seletores de classe

Os seletores de classe permitem definir estilos diferentes que

podem ser aplicados ao mesmo elemento. Imagine que você
precisa ter dois tipos diferentes de parágrafo no documento: um
alinhado à direita e outro alinhado ao centro. Vejamos como os
seletores de classe tornam isto muito fácil:

Nota: O atributo class, como qualquer outro atributo, só pode ser

especificado uma única vez num dado elemento. O exemplo
seguinte está errado:

Os seletores de classe também podem ser definidos sem

colocarmos o nome de um elemento no início da definição. Quando
isso acontece, as definições podem ser aplicadas a qualquer
elemento cujo atributo class tenha o valor correto. O exemplo
seguinte define uma classe que pode ser utilizada com qualquer
elemento do HTML:

Seletor de id

O seletor de id é diferente do seletor de classe porque se aplica a

um único elemento da página. As regras do HTML ditam que os
valores do atributo id não podem repetir-se numa mesma página.
Daí resulta que o número de elementos no documento com um
determinado id é um ou é zero.
A regra de seleção para o estilo definido no exemplo seguinte
indica que ele só pode ser aplicado a um elemento <p> que tenha
o valor "para1" no atributo id:
Se quisermos que a regra se aplique a qualquer elemento que
tenha o id para1 basta escrevê-la na forma seguinte:

A regra acima é aplicável a qualquer elemento que tenha o id

correto, porque o seletor * diz que ela se aplica a todos os
elementos. No exemplo seguinte ela seria aplicada ao elemento
<h1>:
O Posicionamento dos Elementos

No mundo das publicações, camadas são blocos retangulares de

texto e imagens que podem ser posicionados em qualquer lugar
da página. Estas camadas podem ser ocultas e sobrepostas.
Antes da CSS, era impossível construir páginas HTML utilizando
este conceito. O documento era exibido sequencialmente sem a
possibilidade de sobrepor camadas.
Já com CSS é permitida a construção de blocos de texto que se
sobrepõem, assim como ocultar ou exibir determinados blocos.

Posicionando um Elemento HTML

CSS fornece dois modos de posicionar elementos no navegador:

RELATIVE e ABSOLUTE.
No modo RELATIVE, o navegador posiciona o elemento em
relação à sua posição normal, ou seja, onde o elemento deveria
realmente aparecer.
No modo ABSOLUTE, o navegador posiciona o elemento em
relação ao elemento pai.
Para posicionar o elemento são utilizadas as propriedades TOP e
LEFT:

No exemplo acima, o elemento é posicionado à 100 pixels da borda

superior do elemento pai e à 20 pixels da borda esquerda do
elemento pai. Quando o elemento a ser posicionado não possui
pai, este é posicionado em relação às bordas do navegador.
A unidade de medida padrão para LEFT e TOP é pixels.
Pode ser usado
também valores percentuais, que equivale ao percentual do
elemento pai.
O exemplo abaixo posiciona uma imagem à 40 pixels do topo e
100 pixels da borda esquerda do elemento <BODY>. Como no
elemento <BODY> não existe posicionamento definido e ele não
tem nenhum elemento pai, este assume a posição 0, 0.

Sobrepondo elementos

Utilizando as propriedades TOP e LEFT é possível sobrepor

elementos e a ordem de exibição é a mesma ordem em que eles
estão no código, ou seja, o último bloco de código será o último
bloco a ser montado na tela, sobrepondo todos os outros. Esta
ordem de sobreposição pode ser alterada utilizando a propriedade
Z-INDEX.
A propriedade Z-INDEX aceita valores inteiros positivos. Um
elemento com a propriedade Z-INDEX igual a 10 sobrepõe um
elemento com a propriedade Z-INDEX igual a 1.
O exemplo abaixo mostra 2 elementos usando a propriedade Z-
INDEX para manipular a ordem de exibição:
Aninhando o posicionamento de elementos

Nem sempre é necessário que alguns elementos precisem estar

contidos dentro de outros. Entretanto, esta prática pode ser
interessante, visto que quando você posiciona o elemento pai,
todos os elementos filhos seguirão aquele posicionamento. Veja o
estilo abaixo:

Veja o comportamento das páginas abaixo. A esquerda possui 2

elementos distintos. O posicionamento do ID test1não influencia no
ID test2. Já no outro exemplo, o posicionamento do ID test1 está
diretamente ligado ao posicionamento do ID test2.
Posicionando elementos através de script

Como já visto anteriormente, CSS permite o controle de como o

documento é apresentado. Entretanto, todas as propriedades da
CSS podem ser manipuladas através da utilização de scripts.
Lembrando que esta manipulação varia de navegador para
navegador.
Dado o ID de um determinado elemento, este pode ser
referenciado utilizando o DOM, como no exemplo abaixo:

Document.all.item(id, 0) .style.propery

Onde id é o ID do elemento e 0 é a primeira ocorrência deste ID.

Usando scripts para ocultar ou exibir elementos

Para ocultar ou exibir elementos, usa-se a propriedade visibility. O

valor hidden oculta o elemento e o valor “” exibe o mesmo. O
exemplo abaixo mostra como ocultar e exibir elementos utilizando
JavaScript:

Document.all.item(“teste”, 0), style, visibility = “hudden”

Mudar o Tamanho de um Elemento

Assim como é possível controlar a posição do elemento é possível

também controlar a dimensão do elemento.
Para isto, são usadas as propriedades WIDTH para largura e
HEIGHT para altura. Assim como LEFT E TOP, a unidade de
medida padrão é pixels, mas podem ser usados valores
percentuais.
Também pode ser usado o valor AUTO para que o navegador
automaticamente determine o tamanho do elemento.

#element {position: adsolute; top: 100; left: 20; width: 100; height: 100}

A propriedade WIDTH não é usada para definir exatamente a largura

do elemento. Esta propriedade serve apenas para o caso em que
haja algum elemento dentro, o qual é definido pela propriedade
WIDTH, e este seja maior que o mesmo.
Existe ainda a propriedade OVERFLOW, que determina como o
navegador se comporta no caso em que o conteúdo de um
elemento exceda o tamanho do elemento.
Os possíveis valores são NONE, CLIP e SCROLL. O exemplo
abaixo mostra o comportamento de um bloco de texto quando
posicionado e dimensionado utilizando CSS:
Como Estilos Concorrentes são Combinados

Um documento HTML pode definir ou utilizar mais do que uma

folha de estilos. Quando isso acontece, é possível que algumas
propriedades sejam definidas numa folha e definidas de novo
numa outra. Nestes casos, o navegador deve aplicar regras para
decidir qual das definições é mais importante.
A ordem da cascata
Quando um estilo é definido mais do que uma vez, qual das
definições o navegador deverá escolher? A primeira? A última?
Nenhuma delas? Para decidir, o browser aplica as seguintes
regras (listadas por ordem crescente de importância):
1. Estilos definidos por omissão (são aplicados sempre que não
existirem outros que se sobreponham a eles)
2. Estilos definidos numa folha de estilos interna (dentro do
elemento <style>) ou num arquivo externo
3. Estilos "inline" (definidos através do atributo style nos elementos
do documento HTML).
Assim, temos que os estilos que são definidos no próprio elemento,
através do atributo style, têm a prioridade mais elevada. As
definições que o atributo style faz sobrepõem-se a qualquer
definição que tenha sido feita antes.
O exemplo de aplicação seguinte ilustra melhor este mecanismo.
Apesar de o exemplo de aplicação anterior ser elucidativo,
analisemos mais um exemplo. Suponhamos que uma folha de
estilos externa define as seguintes propriedades para o seletor h3:
 H3
{
Color: red;
Text-align: left;
Font-size: 8pt
}

Mas existe uma folha de estilos interna com as seguintes

propriedades também para o seletor h3:

{
test-align: right;
font-size: 20pt

Se a página que contém a folha de estilos interna usar o elemento

<link> para se ligar à folha de estilos externa indicada antes, então
as duas definições serão combinadas para produzir a seguinte
versão final para o seletor h3:
h3
{
color: red;
text-align: right;
font-size: 20pt
}
A cor foi herdada da folha externa, mas o alinhamento do texto e o
tamanho de letra foram substituídos pelas definições dadas na
folha interna.

A Herança de Estilos

Algumas propriedades CSS definidas para um elemento passam

automaticamente a ser aplicadas aos descendentes desse
elemento. Quando isso acontece, diz-se que as propriedades são
herdadas. O exemplo seguinte mostra como funciona este
mecanismo de "herança" de estilos:
No exemplo que acabamos de ver, a folha de estilos diz que o texto
dos elementos <div> deve ter cor azul. O parágrafo que está dentro
de um elemento <div> herda a cor azul porque a
propriedade color é herdada pelos descendentes de um elemento.
Já o segundo parágrafo não está dentro de nenhum elemento que
lhe deixe uma "herança" (que neste caso é a propriedade color),
por isso o seu texto tem a cor normal.
Há outras propriedades que só afetam o elemento ao qual são
aplicadas e não se propagam aos seus descendentes. Diz-se que
estas propriedades não são herdadas. O exemplo seguinte é
semelhante ao anterior, mas agora à propriedade herdada color,
juntamos a propriedade border, que não é herdada:
Como pode observar, a propriedade color propaga-se ao elemento
<p> mas a propriedade border não.
Propriedades em CSS

As folhas de estilo definem a visualização de um documento pela

atribuição de diversos valores às suas propriedades de estilo. Esta
lição lista estas propriedades e seus valores possíveis.

Notação para os Valores das Propriedades

No texto que se segue, os valores permitidos para cada

propriedade são listados usando a seguinte sintaxe:
Valor: N | NW | NE
Valor: [ <comprimento> | thick | thin ]{1,4}
Valor: [<família> , ]* <família>
Valor: <url>? <cor> [ / <cor> ]?
Valor: <url> || <cor>
As palavras entre "<" e ">" indicam o tipo do valor.
Os tipos mais comuns são <comprimento>,<percentagem>, <url>,
<número> e <cor>; eles estão descritos na lição Unidades de
Medida. Os tipos mais específicos de valores (<família-da-fonte> e
<estilo-da-borda>) estão descritos nos tópicos correspondentes.
As outras palavras são palavras-chaves que devem ser usadas tal
como aparecem, sem as aspas. A barra (/) e a vírgula (,) também
devem ser empregadas tal como estão definidas.
Vários parâmetros indicados em sequência significa que todos eles
devem ser definidos, na ordem em que aparecem. Uma barra (|)
separa alternativas: apenas um dos parâmetros deve ser definido.
Uma barra dupla (||) significa que tanto o parâmetro A como o B,
ou mesmo ambos, podem ser definidos, em qualquer ordem.
Colchetes ([]) são usados para agrupar parâmetros. Em ordem de
prioridade, uma sequência de parâmetros vale mais que a barra
dupla (||), e a barra dupla vale mais que a barra simples (|).
Portanto,
a b | c || d e é equivalente a [ a b ] | [ c || [ d e ]]
 Cada tipo de valor, palavra-chave ou grupamento ([]) pode vir
seguido por um dos seguintes modificadores:
• Um asterisco (*) indica que o tipo, palavra ou grupo que o precede
pode ser repetido zero ou mais vezes.
• Um sinal positivo (+) indica que o tipo, palavra ou grupo que o
precede é repetido uma ou mais vezes.
• Um ponto de interrogação (?) indica que o tipo, palavra ou grupo
que o precede é opcional.
• Um par de números entre chaves ({A,B}) indica que o tipo, palavra
ou grupo que o precede é repetido no mínimo A e no máximo B
vezes.

Propriedade Background (Fundo do Elemento)

As propriedades dos fundos dos elementos definem cores de

fundo e imagens de fundo para os elementos do HTML. Estas
propriedades permitem-nos controlar as cores e as imagens de
fundo dos elementos (posição, repetição, etc.).
Vamos às principais:
 Propriedade Background:

- Oferece-nos uma forma abreviada para escrever todas as

propriedades do fundo numa única declaração.
- Esta propriedade aceita os valores que podemos dar a todas as
restantes propriedades desta relação (background-color,
background-image, background-repeat, background-attachment e
background-position).
 Propriedade background-attachment:

- A propriedade background-attachment indica se a imagem de

fundo deve permanecer imóvel na janela do navegador ou se
acompanha o conteúdo quando o movemos (scroll).
- Valores: scroll, fixed.
 Propriedade background-color:

- Define a cor de fundo de um elemento.

- Valores: color-rgb, color-hex, color-name, transparent.

 Propriedade background-image:
- Define uma imagem de fundo para ser usada no elemento.
- Valores: url ou none.

 Propriedade background-position:
- Define o local onde se começa a desenhar a imagem de fundo.
- Valores: top left, top center, top right, center left, center center,
center right, bottom left, bottom center, bottom right, x-% y-%, x-
pos y-pos.

 Propriedade background-repeat:

- Estabelece se a imagem de fundo deve repetir-se (formando um

mosaico) ou não, e as direções da repetição.
- Valores: repeat, repeat-x, repeat-y, no-repeat.

Exemplos de utilização de algumas propriedades e valores:

- Propriedade Font (Tipo de Letra)

As propriedades do tipo de letra definem aspectos estilísticos das

letras com que se escreve o texto.
Elas permitem-nos escolher entre vários conjuntos de caracteres
que desenham as letras de forma diferente, controlar os tamanhos,
ajustar as suas formas, etc.
 As principais propriedades de fontes e respectivos valores, são:

o Propriedade font:
- Aceita os valores que podem ser dados às restantes
propriedades desta relação, mais aqueles que se encontram nos
valores. Oferece-nos uma forma abreviada para definir numa única
declaração todas as propriedades relativas ao tipo de letra.
- Valores: icon, menu, message-box, small-caption, status-bar.

o Propriedade font-family:
- A propriedade font-family consiste numa lista com os tipos de
letra que o navegador pode escolher para escrever os textos. A
lista está ordenada de forma prioritária: a primeira escolha aparece
primeiro, a seguir vem a segunda escolha e assim
sucessivamente. O navegador escolhe o primeiro tipo que seja
capaz de usar. Os nomes dos tipos de letra podem ser nomes de
família ou nomes genéricos.
- Valores: family-name, generic-family.

o Propriedade font-size:
- Define o tamanho de um tipo de letra.
- Valores: xx-small, x-small, small, medium, large, x-large, xx-
large, smaller, larger, comprimento %.

o Propriedade font-size-adjust:
- Se o tipo de letra (font) escolhido não estiver disponível, o
navegador vê-se obrigado a usar um outro tipo diferente. A
propriedade font-size-adjust especifica o "aspect value" do tipo de
letra escolhido para que o navegador possa substituí-lo por um
outro tipo que esteja acessível preservando a altura da letra "x" e
mantendo a legibilidade do texto.
- Valores: none, número.
o Propriedade font-stretch:
- A propriedade font-stretch provoca uma expansão ou uma
contração horizontal no tamanho da letra.
- Valores: normal, wider, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded, expanded, extra-
expanded, ultra-expanded.

o Propriedade font-style:
- Define o estilo de letra a usar.
- Valores: normal, italic, oblique.

o Propriedade font-variant:
- Escreve o texto usando um tipo de letra "small-caps" ou o tipo
normal.
- Valores: normal, small-caps.

o Propriedade font-weight:
- Define a espessura do traço com que são desenhadas a letras.
- Valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800, 900.
Exemplos da aplicação de algumas propriedades e valores de
font:
- Definir o tipo de letra para um texto
- Definir o tamanho das letras

- Propriedade de Texto

As propriedades de texto definem o aspecto gráfico a dar ao texto.

Estas propriedades permitem-nos controlar cores, aumentar ou
reduzir o espaço entre os caracteres, alinhar o texto, escolher o
tipo de letra, decorá-lo, etc.
Exemplos de algumas propriedades e valores para texto:
- Definir a cor do texto
- Inícios de parágrafo

- Propriedade das Margens

As margens de um elemento são constituídas por espaço em

branco que fica ao seu redor e o separados elementos adjacentes.
Se o valor de uma margem for positivo o elemento afasta-se dos
outros que lhe são adjacentes, mas se for negativo ele aproxima-
se dos outros elementos. Isto significa que podemos usar as
margens para afastar e aproximar os conteúdos de dois ou mais
elementos e até sobrepô-los. As quatro margens podem ser
controladas todas ao mesmo tempo ou separadamente.

Exemplo:
- Definir a margem esquerda para um texto
Como vimos antes, o limite de um elemento designa-se por
"border". Ao redor do limite podemos desenhar linhas de contorno.
O padrão CSS permite-nos especificar o estilo, a cor e a espessura
das linhas que delimitam um elemento do HTML. Antes de termos
os estilos CSS, para desenharmos linhas ao redor de um elemento,
tínhamos de colocá-lo dentro de uma tabela e desenhar as linhas
usando os elementos da tabela juntamente com o atributo "border".
- Propriedades de Padding

As propriedades padding controlam o espaço em branco que

separa os conteúdos de um elemento dos seus limites ("border").
É proibido usar valores negativos para estas propriedades porque
isso colocaria os conteúdos fora do elemento, o que não faria
sentido. Os quatro lados podem ser controlados todos de uma vez
ou separadamente.
Exemplo:
- Definir o espaço em branco entre o limite esquerdo e o conteúdo de uma célula
de tabela
- Propriedades de Dimensão

As propriedades relativas a dimensões são usadas para controlar

a altura e a largura dos elementos e o espaço entre linhas de texto.

Exemplo:
- Definir a altura e a largura de uma imagem
- Propriedades de Posicionamento
- Propriedade de Listas e Marcadores

Unidades de Medida

Medição de distâncias numa página HTML

O valor de um comprimento escreve-se como um número seguido
de uma abreviação que indica asunidades de medida. Não
podemos colocar espaços entre o número e as unidades (não
escreva 2 cm mas sim 2cm). Quando o comprimento é 0 (zero) não
é preciso indicar as unidades.
A tabela seguinte descreve as unidades de medida que podemos
usar em CSS.

Definição de cores
Esta tabela limita-se a resumir o que vimos no curso.

Bibliografia

-https://www.w3schools.com/css/
-http://tableless.github.io/iniciantes/manual/css/