css_premium

Prévia do material em texto

Dados do Aluno 
Nome: _________________________________________________ 
Número da matrícula: _____________________________________ 
Endereço: ______________________________________________ 
Bairro: _________________________________________________ 
Cidade: ________________________________________________ 
Telefone: _______________________________________________ 
Anotações Gerais: ________________________________________ 
 _______________________________________________________ 
 _______________________________________________________ 
 
 
 
 
CSS 
 
 
Apresentação do CSS 
Cascading Style Sheets (ou simplesmente CSS) é uma lingua-
gem de estilo utilizada para definir a apresentação de documentos es-
critos em uma linguagem de marcação, como HTML ou XML. Seu 
principal benefício é prover a separação entre o formato e o conteúdo 
de um documento. 
Em vez de colocar a formatação dentro do documento, o de-
senvolvedor cria um link (ligação) para uma página que contém os 
estilos, procedendo de forma idêntica para todas as páginas de um 
portal. Quando quiser alterar a aparência do portal basta modificar a-
penas um arquivo. 
Fonte: http://pt.wikipedia.org/wiki/Cascading_Style_Sheets 
 
 
 
 
 
 
 
 
 
 
Marcas Registradas: 
Todas as marcas e nomes de produtos apresentados nesta apostila 
são de responsabilidade de seus respectivos proprietários, não estan-
do a editora associada a nenhum fornecedor ou produto apresentado 
nesta apostila. 
 
Método CGD® - Todos os direitos reservados. 
Protegidos pela Lei 5988 de 14/12/1973. 
Nenhuma parte desta apostila poderá ser copiada sem prévia autorização. 
O Método CGD é um produto da Editora CGD. 
Controle de Presença 
Data Módulo e Passo Anotações 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
____/____/_____ ___________ ________________ 
Índice 
MÓDULO 1 - INICIANDO NO CSS ................................................................................. 7 
● O QUE É O CSS ........................................................................................................ 7 
● EDITORES CSS .......................................................................................................... 7 
● O PRIMEIRO CONTATO COM O CSS .............................................................................. 8 
● OS TIPOS DE FOLHA DE ESTILO .................................................................................. 10 
● AS DEFINIÇÕES EXISTENTES DO CSS ............................................................................ 11 
● TRANSFORMANDO CSS INLINE EM CSS INTERNA ........................................................... 13 
● COMEÇANDO UM PROJETO DO ZERO .......................................................................... 26 
● DEFININDO AS CARACTERÍSTICAS DO CORPO ................................................................ 27 
● A PROPRIEDADE BACKGROUND .................................................................................. 27 
● A PROPRIEDADE MARGIN .......................................................................................... 32 
● AS PROPRIEDADES WIDTH E HEIGHT ........................................................................... 34 
● EDITANDO TEXTOS ................................................................................................... 37 
● AJUSTANDO O PARÁGRAFO ....................................................................................... 44 
MÓDULO 2 - PROPRIEDADES PARTE 1 ....................................................................... 47 
● A PROPRIEDADE FLOAT ............................................................................................. 47 
● A PROPRIEDADE CLEAR ............................................................................................. 50 
● A PROPRIEDADE PADDING ......................................................................................... 52 
● A PROPRIEDADE BORDER .......................................................................................... 56 
● RODAPÉ ................................................................................................................. 68 
● A PROPRIEDADE POSITION ........................................................................................ 68 
MÓDULO 3 - ARQUIVO CSS ....................................................................................... 71 
● ARQUIVO CSS ......................................................................................................... 71 
● BOTTOM, LEFT, TOP E RIGHT ..................................................................................... 77 
● CRIANDO UM MENU ATRAVÉS DE UMA LISTA NÃO ORDENADA ....................................... 80 
● A PROPRIEDADE DISPLAY .......................................................................................... 81 
● EDITANDO LINKS ..................................................................................................... 82 
● CENTRALIZAÇÃO DE DIVS E OUTROS ELEMENTOS EM CAIXA ............................................ 88 
● TRANSIÇÃO DE IMAGEM ........................................................................................... 94 
● A PROPRIEDADE BACKGROUND-POSITION .................................................................... 95 
● A PROPRIEDADE BACKGROUND-REPEAT ....................................................................... 96 
● A PROPRIEDADE Z-INDEX ......................................................................................101 
MÓDULO 4 - SIMPLIFICANDO .................................................................................. 104 
● SIMPLIFICANDO O CSS ...........................................................................................104 
● A PROPRIEDADE TEXT-TRANSFORM ..........................................................................104 
● A PROPRIEDADE CURSOR ........................................................................................105 
MÓDULO 5 - PROPRIEDADES PARTE 2 ..................................................................... 106 
● A PROPRIEDADE TEXT-INDENT .................................................................................106 
● A PROPRIEDADE OVERFLOW ................................................................................... 106 
 
CSS 7 
Módulo 1 - Iniciando No CSS 
● O Que É O CSS 
● Um arquivo CSS (Cascading Style Sheets) ou folha de estilos em cas-
cata é uma linguagem utilizada para a definição de layouts em documen-
tos HTML, controlando tamanho, margens, cores, bordas. 
● Assim como no HTML, qualquer alteração no código CSS deve ser salva 
para que, então, possa ser visualizada no navegador. 
● O HTML também pode ser utilizado para a definição do layout (como era 
feito antigamente, através do uso de tabelas), porém esse uso é incor-
reto. Hoje em dia temos a presença das normas de desenvolvimento pa-
ra web, e você deve segui-las para que assim possa obter um resultado 
parecido nos navegadores existentes. 
● Esses padrões para desenvolvimentos são definidos pelo W3C, um con-
sórcio internacional no qual organizações filiadas,uma equipe em tempo 
integral e o público trabalham juntos para desenvolver padrões para a 
Web. 
● Editores CSS 
● Existem, atualmente, diversos editores para arquivos CSS, assim como o 
HTML. Até mesmo um editor de texto comum, como o Bloco de Notas 
do Windows, possui a capacidade de editar e/ou criar um arquivo CSS. 
Durante o curso nós iremos utilizar o Notepad++. 
● O Notepad++ é um editor de códigos fonte livre que substitui o Bloco 
de Notas e tem suporte a várias linguagens de programação. Possui u-
ma função que deixa as tags coloridas, destacando-as e separando-as de 
textos normais. Roda em ambiente Windows e seu uso é regido pela 
Licença GPL. Acesse o site oficial do programa para saber mais. 
● Os editores WYSIWYG: 
● WYSIWYG é o acrônimo da expressão inglesa "What You See Is What 
You Get", cuja tradução remete a algo como "O que você vê é o que 
você obtém". Significa a capacidade de um programa editar um arquivo 
permitindo a pré-visualização do resultado que será obtido ao término 
do processo. O mais famoso editor de páginas da web nesse formato é o 
Dreamweaver da Adobe. 
 
8 CSS 
● O Primeiro Contato Com O CSS 
• Abra a pasta Modelos 
● Dentro da pasta Modelos, localize a pasta modelo_um. 
● Abra a página index.html no navegador. 
● Note que a página está completamente sem formatação, desorganizada: 
 
● Esta página foi produzida com a formatação em CSS, e nós retiramos os 
códigos justamente para você ver as "mágicas" que o CSS permite fazer. 
● Visualize o código da página (para visualizar o código da página, basta 
abrir o arquivo com o Notepad++): 
 
 
CSS 9 
● O código é 100% HTML: 
 
● Feche a página no navegador e no Notepad++. 
● Acesse novamente a pasta modelo_um. 
● Abra a página index_css.html no navegador. 
 
10 CSS 
● Visualize o código da página no Notepad++. 
● Os Tipos De Folha De Estilo 
● Atualmente existem três (3) tipos de folhas de estilo, a INLINE, a 
EXTERNA e a INTERNA. 
● INLINE: Utilizando este estilo, você irá inserir os códigos CSS junto 
com o código HTML, dentro da própria tag alvo, utilizando o atributo 
style, ou seja, se você deseja, por exemplo, deixar um div com fundo 
preto e texto branco, seu código ficaria assim: 
 
● EXTERNA: Utilizando uma folha de estilo externa, você deverá criar um 
link (ligação) com ela, na página, através de uma tag própria, que deve 
ser inserida entre as tags <head> e </head>: 
 
● INTERNA: Utilizando uma folha de estilo interna, você deverá criar um 
arquivo css normalmente, porém ele será inserido na própria página en-
tre as tags <head> e </head>, utilizando a tag <style>. Todas as 
propriedades CSS devem ir dentro da tag style: 
 
CSS 11 
● Como você pode ver nossa página utiliza um CSS do estilo INLINE: 
 
● Os estilos são inseridos diretamente na tag que irão modificar. 
● As Definições Existentes Do CSS 
● Uma folha de estilos CSS é criada através de 4 possíveis definições, 
CLASSE, ID, TAG e COMPOSIÇÃO. 
● A CLASSE pode ser aplicada em vários elementos HTML, quantas vezes 
for necessário. A criação de uma classe ocorre na definição do nome an-
tecedido por um ponto final. Veja a seguir a criação de uma classe, onde 
definiremos a fonte do texto, o tamanho e a cor: 
 
● A aplicação desta classe poderia ser feita em um div, em um parágrafo, 
em um span, onde fosse necessário, podendo ser repetida no documen-
to. Sua aplicação em um parágrafo seria feita da seguinte maneira: 
 
 
12 CSS 
● O ID, ao contrário da classe, só pode ser aplicado em um elemento de-
terminado da página, uma única vez, ou seja, deve ser único, não pode 
se repetir. A criação de um id ocorre na definição do nome antecedido 
por um sustenido (#). 
● Veja a criação de um id, onde definiremos a largura, a cor de fundo e as 
margens do objeto: 
 
● O id é geralmente utilizado em áreas importantes da página, como a 
definição do corpo, do menu, do cabeçalho etc. No exemplo acima, nós 
criamos uma definição para o corpo da página. Ela deve ser aplicada em 
um div, já que este, por sua vez, é uma espécie de container do 
HTML. 
• Exemplo: 
● A TAG serve, basicamente, para redefinir uma determinada tag HTML, 
ou seja, define a formação de uma tag, aplicando-a em todas as tags da 
página. Para a definição de uma tag, basta inserir seu nome, e todas as 
tags da página seguirão sua formatação. 
● Veja a a definição de uma imagem de fundo para a página, uma fonte 
padrão, uma cor e um tamanho de texto: 
 
● Como a tag redefine um elemento HTML, ela não precisa ser aplicada. O 
exemplo acima iria definir a formatação da tag body, ou seja do corpo 
da página, definindo uma fonte padrão e uma imagem de fundo. 
CSS 13 
● A COMPOSIÇÃO serve para definir a formatação de um determinado i-
tem que deve estar dentro de outro determinado item. Para a definição 
de uma composição você deve inserir primeiro o elemento principal e, 
em seguida, o elemento que realmente deseja editar. 
● Veja a definição de um parágrafo que deve estar dentro de uma tag com 
a id #conteudo: 
 
● A aplicação desta composição seria feita em um div com a id #conteu-
do e ela iria alterar todos os parágrafos presentes dentro deste div, ou 
seja, qualquer texto presente no div só seria realmente alterado se esti-
vesse dentro de um parágrafo: 
 
● Transformando CSS Inline Em CSS Interna 
● Seguindo a idéia da explicação anterior, agora você irá transformar o 
CSS Inline da página index_css.html em CSS Interno. 
● Insira a tag <style> entre a abertura e o fechamento da tag </head>: 
 
● Localize a tag <body>: 
 
14 CSS 
● Veja que ela possui o atributo style, que define o uso de elementos CSS 
Inline: 
 
● Entre as tags de abertura e fechamento do elemento <style>, digite 
"body{". 
● Tecle duas vezes Enter e digite "}". 
• Fica assim: 
● Entre as chaves, você irá definir as propriedades CSS que serão inseri-
das na tag body. 
● Localize novamente a tag body, e observe o conteúdo do atributo style. 
● Copie e cole cada elemento do atributo style, deixando o CSS da se-
guinte maneira: 
 
• Apague o atributo style da tag body, deixando assim: 
● No seu local de gravação, crie uma pasta chamada "Projetos". 
 
CSS 15 
● Dentro da pasta Projetos crie uma pasta com o nome "css_interno" e 
salve o arquivo como index.html. 
● Logo abaixo da tag <body> você possui um div que define as margens 
da página, através do elemento style. 
● Crie uma classe chamada "margem". 
● Copie o valor do atributo style: 
 
● Cole-o na classe criada e ajuste, deixando assim: 
 
● Apague o atributo style copiado da tag div. 
● Aplique a classe criada ao div: 
 
● Salve as alterações. 
● Abaixo do div com a classe margem, você tem o div responsável por 
definir o cabeçalho da página. 
 
● Crie um ID chamado "cabecalho". 
● A id cabecalho deverá ficar assim: 
 
 
16 CSS 
● O id deverá ser aplicado ao div, que, por sua vez, ficará assim: 
 
● Note que a tag img que está dentro do div também possui o atributo 
style, responsável por definir sua margem superior. 
● Para editar a tag img você deve utilizar uma composição, ou seja, mo-
dificar toda img que estiver dentro do id cabecalho. 
● Primeiro você deve definir o local onde sua tag está e depois definir qual 
tag deseja alterar. 
• Deixe assim: 
● Apague o atributo style da imagem. 
 
● Após este div você possui um novo div, responsável pela criação do me-
nu. 
● O processo deve ser o mesmo utilizado com o cabeçalho. Desta vez você 
deverá criar um novo id chamado "menu". 
● Este é o código do div responsável pela criação do menu: 
 
● Transfira todas as características para o id menu. 
• Deixe assim: 
 
CSS 17 
● Aplique o id criado ao div responsável pelo menu. 
 
● Dentro do div com id menu, você possui um novo div que é responsá-
vel pela margem do menu. 
 
● Utilizando o mesmo processo de composição do cabeçalho, crie a nova 
composição: 
 
● Após o fechamento do div do menu, você tem o div responsável peladefinição do corpo da página: 
 
● Crie um id com o nome "corpo", que atenda às necessidades do div 
(assim como foi feito com o cabeçalho e o menu). 
• O id deve ficar assim: 
● O próximo div é responsável pela margem do conteúdo, porém note que 
ele não é o único div dentro do conteúdo. Sendo assim, não é possível 
utilizar uma composição, pois todos os outros div seriam afetados. 
18 CSS 
 
● Crie uma classe chamada "corpo_margem", que tenha o efeito de mar-
gem utilizado no div. 
• A classe corpo_margem deverá estar assim: 
● Através do uso de composições, crie duas regras que alterem o h1 e o 
h2 como os modelos inline: 
 
● Note que ambas as tags estão dentro de dois divs, sendo assim, a com-
posição deverá seguir a idéia, id/classe do primeiro div, id/classe do 
segundo div e então a tag que deseja modificar. 
CSS 19 
• As composições ficam assim: 
● Remova o atributo style de ambas as tags (h1 e h2). 
● A tag img também precisa de uma composição para definir a margem 
da imagem. 
 
• A composição deverá ficar assim: 
● Na área relacionada ao corpo da página, resta a edição dos últimos dois 
divs, responsáveis pela duas notícias curtas na parte inferior: 
 
● A composição das duas matérias é idêntica, tanto a tag utilizada para a 
criação da caixa quanto a tag utilizada para a criação do título. 
 
20 CSS 
● Sendo assim, você poderá criar uma composição que formatará as duas 
notícias. 
● Localize o código responsável pelas notícias. 
● Deixe assim: 
 
• Crie as composições: 
● A área responsável pelo corpo do site está concluída, agora resta produ-
zir o CSS do rodapé. 
● Crie um id responsável pelo rodapé que atenda as necessidades do div. 
● Delete o atributo style do div. 
● Crie uma composição que adicione 10px de margem superior nas tags 
img que estiverem dentro do div com o id rodape. 
CSS 21 
● Deixe o CSS assim: 
 
● O código do rodapé fica assim: 
 
● Salve as alterações e abra a página no navegador (a página foi salva 
com o nome "index", na pasta css_interno, no seu local de gravação). 
● A página abriu assim: 
 
22 CSS 
● Isso aconteceu porque a pasta que contém as imagens não está junto do 
index. 
● Acesse a pasta Modelos e abra a pasta modelo_um. 
 
● Dentro da pasta modelo_um, copie a pasta imagens. 
● Abra a pasta Projetos e abra a pasta css_interno. 
● Cole a pasta imagens que foi copiada. 
● Vá para o navegador e tecle F5 para atualizar a página. 
● Veja que a página ficou exatamente igual ao modelo antigo onde ela 
possuía o CSS Inline: 
 
● Feche o Notepad++ e o navegador. 
CSS 23 
● Copie a pasta modelo_dois da pasta Modelos para a pasta Projetos. 
● Abra a pasta, e abra a página index.html no navegador. 
● A página abre sem formatação: 
 
● Abra o código fonte da página no Notepad++. 
● Entre as tags head, localize o trecho responsável por "linkar" o arquivo 
CSS ao arquivo HTML. 
 
● Como já foi visto, a tag <link> é responsável por "linkar" o arquivo CSS 
ao arquivo HTML. Ela possui três atributos responsáveis pelo funciona-
mento da tag: rel="", type="" e href="". 
● O atributo rel serve para definir a relação do arquivo que será linkado. 
No caso, o valor deverá ser "stylesheet" (folha de estilo). 
● O atributo type serve para definir o tipo do arquivo que será linkado. No 
caso, o valor deverá ser "text/css". 
● O atributo href define o nome/local do arquivo css, assim como feito 
com as imagens. Se, por exemplo, o arquivo css se chamar estilo.css e 
estiver na mesma pasta da página que o irá utilizar, o valor deverá ser 
"estilo.css", mas se o arquivo estivesse dentro de uma pasta chamada 
formatacao, o valor seria "formatacao/estilo.css". 
 
24 CSS 
● Veja que dentro da pasta copiada (modelo_dois) você tem dois arqui-
vos css: 
 
● Preencha o atributo href, com o seguinte valor: "estilo_um": 
 
● Salve a alteração e visualize-a no navegador (tecle F5 para atualizar). 
● Veja que o CSS não foi aplicado. Isso ocorreu porque não foi definida a 
extensão do arquivo. 
● Altere o valor para: "estilo_um.css" e salve as alterações. 
● Sempre que alguma alteração for feita em um arquivo HTML ou CSS, 
você deve atualizar a página no seu navegador para visualizar a altera-
ção. 
● Atualize a página e visualize a modificação. 
● A página de estilo estilo_um.css ocasionou várias modificações na pá-
gina, deixando-a assim: 
 
 
CSS 25 
● Veja a seguir as modificações que o CSS permitiu: 
 
 
26 CSS 
 
● Altere o valor do href para "estilo_dois.css". 
● Salve a alteração e atualize o navegador para visualizá-la. 
● A página ficou assim: 
 
● Feche todos os arquivos abertos no Notepad++. 
● Feche o navegador onde você está visualizando as páginas. 
● Começando Um Projeto Do Zero 
● Abra o Notepad++. 
● Crie um arquivo HTML com a estrutura padrão. 
CSS 27 
 
● Um projeto deve ser construído de forma sequencial. Você não deve, por 
exemplo, iniciar a criação do conteúdo sem antes ter definido todo o lay-
out. 
● Definindo As Características Do Corpo 
● Entre as tags de abertura e fechamento do style, crie um CSS do tipo 
tag, que seja responsável pela edição do elemento body: 
 
● A Propriedade Background 
● A propriedade background é responsável pela definição das proprieda-
des do fundo da página. Ela se divide em pequenas propriedades, como: 
color, image, repeat entre outras. 
● background-color: - Define a cor que será utilizada no fundo da página 
através do código hexadecimal (ex.: #ffffff). 
28 CSS 
● background-image: - Define a imagem que será utilizada no fundo da 
página, através do valor url(local da imagem). 
● background-repeat: - Define se a imagem aplicada no fundo da página 
irá ou não se repetir. Os valores possíveis são: 
� no-repeat (para que a imagem não seja repetida); 
� repeat (para que a imagem seja repetida em todo o fundo); 
� repeat-x (para que a imagem seja repetida apenas horizontal-
mente); 
� repeat-y (para que a imagem seja repetida apenas verticalmen-
te). 
● background-position: - Define o posicionamento da figura no fundo da 
página. Os valores possíveis são: 
� bottom (insere a imagem na área inferior da página); 
� center (insere a imagem centralizada na página); 
� left (insere a imagem na área esquerda da página); 
� right (insere a imagem na área direita da página); 
� top (insere a imagem na área superior da página). 
• Ex.: 
● A propriedade background também pode ser aplicada em DIVs, H1, 
H2, H3, tables e outras tags do HTML. Você também pode utilizá-la a-
través de classe ou id. 
● Abaixo, temos um exemplo de classe com a aplicação da propriedade 
background. 
 
 
CSS 29 
● Se a classe acima fosse aplicada a um div, esse seria o resultado dela: 
 
● Copie a pasta modelo_background da pasta Modelos para a pasta 
Projetos. 
● Volte para o Notepad++. 
● Salve o arquivo que você está criando dentro da pasta colada com o no-
me "index.html". 
● Sempre que você utilizar uma imagem de fundo, você deve definir uma 
cor contrastante com o conteúdo do site, pois se, por algum motivo, a i-
magem não carregar, o conteúdo permanecerá. 
● Entre as tags de abertura e fechamento style, insira a propriedade 
background-image: 
 
● O fundo que será utilizado é a imagem fundo_madeira.jpg, que está 
dentro da pasta imagens. 
● Sendo assim, o valor da propriedade seria url(imagens/fundo_madei-
ra.jpg); 
● Fica assim: 
 
● Salve as alterações e visualize no navegador. 
30 CSS 
● Por padrão, ao adicionar uma imagem no fundo da página, ela será re-
petida por todo fundo do site. 
 
● Adicione a propriedade background-repeat com o valor no-repeat. 
● Salve as alterações e visualize a página no navegador. 
● Ficou assim: 
 
CSS 31 
● Veja que o fundo da página ainda está branco. 
● Adicione a propriedade background-color ao CSS: 
 
● A página fica assim: 
 
● Altere o valor da propriedade que impede a repetição da imagem, para 
repeat. 
• Na parte do CSS, crie um id chamadotopo: 
● O id #topo será responsável pelo div que irá comportar o cabeçalho da 
página. 
● Através da propriedade background-image, defina a imagem lente_ 
preta.png como fundo para o id #topo. 
32 CSS 
• Fica assim: 
● Adicione a propriedade background-repeat com o valor repeat. 
● Dentro do corpo da página, insira um div que utilize o id topo. 
● Dentro do div, insira um h1 com o texto "TESTE DE CABEÇALHO. 
• O código fica assim: 
● Salve as alterações e visualize a página. 
● A Propriedade Margin 
● Veja que o div, por padrão, fica com a altura do texto e a largura da pá-
gina, porém esta ainda possui as margens de um arquivo HTML. 
 
● A maior parte dos elementos HTML possui uma margem própria. Atra-
vés do CSS você pode aumentá-la, reduzi-la e também adicionar mar-
gem aos itens que não possuem uma margem padrão. Para isso você 
deve utilizar a propriedade MARGIN. 
 
CSS 33 
● A propriedade MARGIN pode ser aplicada em todos os lados do ele-
mento. Você pode aplicar a margem na parte superior, utilizando a pro-
priedade margin-top, à direita, utilizando a propriedade margin-right, 
na parte inferior, utilizando a propriedade margin-bottom e à esquer-
da, utilizando a propriedade margin-left. 
● Para definir o mesmo valor para todos os lados, basta utilizar a proprie-
dade margin. 
• Exemplo: 
● No exemplo acima, o cabeçalho h1 terá 10px de margem superior e 
inferior e terá 20px de margem à esquerda e à direita. 
● Para aplicar 10px de margem em todos os lados, bastaria ajustar o CSS 
assim: 
 
● Existe uma maneira de aplicar uma borda com valores diferentes em a-
penas uma linha. Assim: 
 
● No CSS, adicione a propriedade margin com o valor 0px à tag body. 
● Salve a alteração e visulize a página no navegador. 
● Não existem mais margens que separem o div com o id #topo dos can-
tos da página. 
34 CSS 
 
● Altere a propriedade para margin-left e defina o valor como 50%. 
● Salve e visualize a alteração. 
● A margem de 50% foi adicionada. 
 
● Restaure a propriedade para margin e defina o valor como 0px. 
● As Propriedades Width E Height 
● O CSS permite que você ajuste a altura e a largura de um determinado 
objeto. Existe uma propriedade para cada ajuste. Para modificar a largu-
ra de um objeto, você deve utilizar a propriedade width. Já para alterar 
a altura do objeto, a propriedade a ser utilizada é a height. 
● Essas propriedades também podem ser trabalhadas com porcentagem 
(%), ou seja, você pode personalizar um div para que ele ocupe 50% 
da tela do usuário. Assim, o valor irá variar de um computador para o 
outro, pois o tamanho da tela nem sempre é o mesmo. 
● Veja abaixo alguns exemplos de utilização das propriedades width e 
height. 
 
 
CSS 35 
● Abaixo temos o resultado, caso a classe CSS acima fosse aplicado em 
um div: 
 
● Bastaria inverter o valor das propriedades width e height para que o 
retângulo criado fosse verticalmente: 
 
 
36 CSS 
● No CSS, adicione a propriedade height com valor de 400px no id #to-
po. 
● Salve a alteração e visualize a página. 
● O div topo passa a ocupar 400px da página. 
 
● Ajuste a altura do id #topo para que ele ocupe apenas 120px da pági-
na. 
 
● No CSS, adicione a propriedade width com valor de 200px no id #to-
po. 
 
CSS 37 
● O div topo passa a ocupar 200px de largura na página. 
 
● Altere o valor da propriedade width para 100%. 
● No css, crie uma composição responsável por editar todo h1 que estiver 
dentro de um item com id #topo. 
 
● Editando Textos 
● O CSS permite que você altere a formatação de textos. Você pode fazer 
isso criando uma classe que será inserida em divs e parágrafos ou edi-
tar os parágrafos e os cabeçalhos diretamente (h1, h2, h3). 
● Para a edição de textos, o CSS apresenta diversas propriedades. Veja al-
gumas delas a seguir: 
● color: define a cor do texto através do código hexadecimal (#ff00ff). 
● font-family: define a fonte que será utilizada no objeto. Fontes que te-
nham espaço no nome devem ser inseridas entre "aspas", e, após o no-
me da fonte, você poderá especificar se a fonte é ou não serifada. Para 
fontes serifadas utiliza-se o termo "serif" e para fontes não-serifadas, u-
tiliza-se o termo "sans-serif". Ex.: "Lucida Sans", sans-serif. 
● font-size: define o tamanho da fonte em px. Exemplo: 12px. 
● text-align: define o alinhamento do texto. Seu valor pode ser: center 
para centralizar o texto, left para inserir o texto à esquerda, right para 
inserir à direita ou justify para justificar. 
 
38 CSS 
● text-decoration: define o estilo de decoração do texto. Seu valor pode 
ser: line-through para que uma linha passe no meio do texto, none 
para que nenhuma decoração seja aplicada (útil para remover o subli-
nhado de links), overline para que uma linha passe acima do texto ou 
underline para o efeito sublinhado. 
● Abaixo temos um cabeçalho H1 (<h1>) padrão, sem formatação CSS. 
 
● No CSS, criamos uma regra do tipo TAG, que iria modificar todos os ca-
beçalhos do tipo H1. 
 
● Este é o resultado da formatação do CSS: 
 
● A formatação de texto também pode ser feita através de um outro 
container, não sendo aplicada apenas aos parágrafos e cabeçalhos, como 
no caso abaixo (classe div_propaganda). Todo texto inserido dentro de 
um div com esta classe irá seguir a formatação determinada, ou seja, 
fonte "Trebuchet MS", tamanho 15px e cor branca. 
 
 
CSS 39 
● Esse é o exemplo de um DIV com a classe "div_propaganda". 
 
 
● Você também pode inserir uma aparência padrão para todos os textos 
da página, através da formatação da tag body no seu CSS. Veja o e-
xemplo abaixo. 
 
● Dessa maneira, todos os textos da página que não possuíssem uma for-
matação, teriam a fonte definida como "Trebuchet MS", no tamanho 14 
px e a cor preta (#000000). 
● Defina que a cor do texto h1, que estiver dentro do #topo, será branca 
(#ffffff). 
● Defina que a margem existente no h1 é equivalente a 0px. 
● Defina que o h1 será centralizado. 
● Defina que o tamanho da fonte será 50px. 
• A composição deverá ficar assim: 
40 CSS 
● Salve e visualize as alterações. 
● Fica assim: 
 
● No CSS, insira na tag body: font-family:"Lucida Sans", sans-serif; 
● Defina também que o tamanho será 12px. 
● A tag ficaria assim: 
 
● Crie um id chamado menu. 
● Defina que o id menu terá 30px de altura (height) e 100% de largura 
(width). 
● Defina que a cor do fundo utilizada será #552b00. 
● Defina que a cor do texto utilizada será #ffffff. 
● Defina o alinhamento do texto como centralizado. 
CSS 41 
• O id fica assim: 
● Após a criação do ID responsável pela criação do menu, vamos inseri-lo 
na página. 
● Localize a tag body e deixe-a assim: 
 
● Salve as alterações e visualize a página. 
● Fica assim: 
 
● Crie um id chamado "corpo", que será responsável pela formatação do 
conteúdo da página. 
● Defina que o id corpo terá 900px de altura (height) e 80% de largura 
(width). 
42 CSS 
● Defina que a cor de fundo utilizada será branca (#ffffff). 
• O id fica assim: 
● Crie um div que utilize o id corpo. 
 
● Salve as alterações e visualize a página. 
• A página fica assim: 
● Veja que o div que irá compor o conteúdo não está centralizado. Para 
centralizar o div você deve inserir uma margem correspondente em am-
bos os lados. Pense que a página inteira possui 100% de largura e o 
div que irá comportar o conteúdo, possui 80% de largura, ou seja, res-
tam 20%. Na página, existem duas laterais, a esquerda e a direita. Di-
vida os 20% restantes entre elas, ou seja, uma margem de 10% para 
cada lado. 
CSS 43 
● Adicione 10% de margem para o lado esquerdo e 10% para o lado di-
reito. 
 
● Salve a alteração e visualize a página. 
• Fica assim: 
● Insira a imagem rodape.png como fundo no id corpo. 
● Sem a especificação, a imagem será repetida por todo o fundo, deixando 
a página assim: 
 
● Adicione a propriedade background-repeat:no-repeat; no id corpo. 
44 CSS 
● Veja quea imagem é pequena e, sem a propriedade de repetição, seu u-
so seria estranho. 
 
● Altere o valor da propriedade repeat para repeat-x; 
● O uso da propriedade background-repeat com o valor repeat-x per-
mite repetir a imagem somente no eixo x, ou seja, horizontalmente. 
● Salve as alterações e visualize a página. 
● Fica assim: 
 
● Agora você precisa alterar o posicionamento da imagem, inserindo-a na 
parte inferior do objeto. Isso é feito com a propriedade background-
position. 
● Insira a propriedade background-position com o valor bottom. 
● A imagem foi enviada para a parte inferior do div: 
 
● Ajustando O Parágrafo 
● Como você já sabe, no HTML o parágrafo é determinado através da tag 
<p>. Sendo assim, você pode ajustar todos os parágrafos do documen-
to simplesmente adicionando CSS à tag <p>. 
● Para comportar os parágrafos neste documento iremos utilizar três divs. 
CSS 45 
● No CSS, crie uma classe chamada "destaque". 
• Defina que a classe destaque terá: 
● Defina que a classe destaque utilizará a cor de fundo #ff00ff. 
● Vá para a parte que define o código HTML e deixe-o assim: 
 
● Note que foi inserido um DIV com a classe DESTAQUE, que você aca-
bou de criar. 
● Salve e visualize a página. 
● Sua página ficou assim, se visualizada no Internet Explorer: 
46 CSS 
 
• Ou assim, se visualizada no Chrome ou Firefox: 
 
● Feche os arquivos. 
 
CSS 47 
Módulo 2 - Propriedades Parte 1 
● A Propriedade Float 
● A propriedade float é a responsável por determinar a posição do objeto. 
Float quer dizer "flutuar", ou seja, ela é responsável pela "flutuação" 
do elemento. Seus valores são: 
� left (para que o objeto fique à esquerda); 
� right(para que o objeto fique à direita); 
� none (para que o objeto não flutue); 
� inherit (para que o objeto herde o float do objeto anterior). 
● Ao definir o valor da propriedade FLOAT como LEFT, o elemento ficará à 
esquerda da página. 
● Vamos continuar o projeto "index" da pasta "modelo_background", 
no seu local de gravação. 
● Abra o arquivo "index" no Notepad++. 
● Adicione a propriedade float com o valor left na classe destaque. 
● O código da classe destaque fica assim: 
 
● No Internet Explorer a página continua idêntica, porém ainda existe u-
ma pequena diferença entre os cabeçalhos nos outros navegadores. 
● Isso acontece porque cada navegador possui uma configuração padrão 
para cabeçalhos. O Internet Explorer, por exemplo, não adiciona uma 
margem superior nos cabeçalhos, já o Chrome e o Firefox o fazem. 
Sendo assim, para solucionar este "problema", basta criar uma configu-
ração CSS que defina o cabeçalho de uma forma única. 
● Crie uma composição responsável pela edição de todo h2 que estiver 
dentro de um item de classe .destaque. 
● Na composição, defina que a margem será de 0px. 
48 CSS 
● Defina que o tamanho da fonte será de 30px e que a cor utilizada no 
texto será #4d6501. 
• O código da composição deverá ser este: 
● Crie uma composição responsável pela edição de todo "p" que estiver 
dentro de um item de classe .destaque. 
● Na composição, defina que a margem esquerda será de 1%. 
● Defina que o tamanho da fonte será de 12px e que a cor utilizada no 
texto será #785f07. 
• O código da composição fica assim: 
● O div fica assim em ambos os navegadores: 
 
• Crie a classe: 
CSS 49 
● Ela será responsável por um div que ficará à direita da notícia em desta-
que, e apresentará uma propaganda. 
● Ao definir o valor da propriedade FLOAT como RIGHT o elemento, fica-
rá à esquerda da página. 
● Crie um div que utilize a classe propaganda. 
 
● A página fica assim: 
 
● Seguindo os passos anteriores, crie uma classe chamada "conteudo". 
● A classe conteudo deverá ter: 98% de largura, margem esquerda, direi-
ta e inferior de 1%, preenchimento utilizando a cor #ffff00. 
• Insira um div que utilize a classe .conteudo 
● Abra a pasta modelo_background, que você copiou para a pasta Pro-
jetos. 
● Abra o arquivo lorem.txt no bloco de notas. 
● Copie todo o conteúdo do arquivo e feche-o. 
● Cole o conteúdo dentro do div com a classe .conteudo. 
● Salve as alterações e visualize a página no navegador. 
 
50 CSS 
● No Internet Explorer (IE) a página fica assim: 
 
● A Propriedade Clear 
● Quando um objeto não for "flutuar" ao lado de nenhum outro, você deve 
"bloquear" a propriedade float. Essa é a função da propriedade Clear, 
bloquear o float no objeto em que for adicionada. 
● Os valores da classe podem ser: 
� left (para bloquear float à esquerda do objeto). 
� right(para bloquear float à direita do objeto). 
� both (ara bloquear float em ambos os lados). 
● Basta adicionar a propriedade clear ao div da direita, para indicar que 
ele não deverá ter nenhum item flutuando à esquerda, ou seja, basta in-
serir a propriedade clear:left para que ele seja criado abaixo do div da 
esquerda. 
● Localize a classe .conteudo. 
● Adicione a propriedade clear com o valor both para que ambos os lados 
sejam bloqueados. 
● Salve a alteração e visualize no navegador. 
● Remova o preenchimentos das classes .destaque, .propaganda e 
.conteudo. 
CSS 51 
● Fica assim: 
 
● Salve a alteração. 
● Feche o navegador. 
● Feche os arquivos abertos no Notepad++. 
● Acesse a pasta Modelos e copie a pasta modelo_tres. 
● Cole a pasta modelo_tres dentro da pasta Projetos. 
● Abra a pasta colada e abra o arquivo index.html no Notepad++. 
● Abra a página também no navegador. 
 
52 CSS 
• Localize o trecho: 
● Esse trecho é responsável pela inserção do conteúdo na página. 
● As duas classes são utilizadas para a definição dos divs. 
● Localize o trecho que define as duas classes no CSS e veja que elas es-
tão em branco: 
 
● Você irá criar as duas classes para depois inserir o conteúdo do site. 
● Defina que a largura do div que utiliza a classe .destaque será de 
68%. 
● A Propriedade Padding 
● A propriedade padding adiciona uma margem interna ao objeto, ou se-
ja, se você aplicar um padding em um parágrafo, o texto ficará um 
pouco menor que a caixa de texto, deixando uma "margem interna" para 
criar essa margem. O objeto onde o padding for adicionado irá aumen-
tar o tamanho de acordo com o valor inserido. Por exemplo, você tem 
um div com 50px de altura e de largura. Ao adicionar um padding de 
10px, o div ficará com 70px de altura e de largura, pois ele terá 10px 
adicionado em cada lado. 
● Adicione a propriedade padding com valor definido em 1% na classe 
.destaque. 
 
CSS 53 
● Salve as alterações e visualize a página no navegador. 
● Após definir a largura e o espaçamento (padding), o div passa a ser e-
xibido. 
 
● Note, porém, que, na classe .destaque, nós especificamos que o div o-
cuparia apenas 68%, ou seja, o div que está sendo exibido não é o que 
utiliza a classe .destaque. 
● Na classe .destaque, defina que a cor #ff00ff será utilizada no fundo 
do div, possibilitando, assim, sua visualização. 
● A propriedade utilizada para a definição da cor é a seguinte: 
 
● Salve e visulize a alteração. 
● Agora o div pode ser localizado: 
 
● Localize agora a classe .publicidade. 
● Defina que a largura desta classe será de 28% e 1% de padding. 
● Na classe .publicidade, defina que a cor #00ffff será utilizada no fundo 
do div, possibilitando, assim, sua visualização. 
● Salve e visualize a página. 
54 CSS 
● O div ficou assim: 
 
● Utilizando a propriedade float, deixe a página assim: 
 
● A propriedade float foi adicionada em ambas as classes, porém, cada u-
ma com um valor. Na classe .destaque deve-se adicionar a propriedade 
com o valor "left" e na classe .publicidade o valor deverá ser "right". 
• O CSS ficou assim: 
● Vá para a parte do código HTML e localize o div que utiliza a classe 
.destaque. 
CSS 55 
● Crie um cabeçalho do tipo h1 com o texto: "Menor PC do mundo em 
plataforma Atom ganha Wi-Fi". 
● Após o h1, crie um h2 com o texto "Equipamento com 2 GB de RAM 
e HD de 320 GB custa R$ 750."● O código div ficou assim: 
 
● Salve e visualize as alterações. 
● A página ficou assim: 
 
● Abaixo do cabeçalho h2, insira a imagem pc.jpg, que está dentro da 
pasta imagens, com o texto alternativo "CAPE7 D525". 
● Após a imagem, utilizando a tag "p", crie o parágrafo: 
 
56 CSS 
● Salve e visualize a modificação. 
● A página ficou assim: 
 
● Volte para a parte do código que define o CSS. 
● Insira uma linha em branco entre as classes .destaque e .publicidade. 
● Nessa linha em branco, crie uma composição que edite todo h1 que es-
tiver dentro da classe .destaque. 
● Defina que o tamanho da fonte utilizada será 30px e a cor #333333. 
• O CSS fica assim: 
● A Propriedade Border 
● A propriedade border é responsável por inserir borda ao conteúdo onde 
ela for aplicada. Abaixo temos um div, com 180px de largura e altura, 
com 10px de espaçamento (padding) (o que totaliza 200px de largura 
e altura), com o preenchimento vermelho (#ff0000), texto preto e 
uma borda azul (#0000ff). 
CSS 57 
 
● A propriedade border pode ser aplicada separadamente, ou seja, em a-
penas um dos lados do objeto. Para isso, você deve utilizar a proprieda-
de adequada: border-left, border-right, border-top, ou border-bot-
tom. 
● Note que a propriedade border especifica todas as propriedades da bor-
da: 1px = largura da borda solid = estilo da borda #0000ff; = cor 
da borda. 
● esse atributos também podem ser definidos individualmente, assim: 
border-width:1px; border-style:solid; border-color:#0000ff; 
● A propriedade border possui vários estilos. Veja-os abaixo: 
 
● Abaixo da composição que edita o H1 da classe .destaque, crie uma 
composição responsável por editar o H2. 
● Defina que o tamanho da fonte utilizada será 18px e a cor #999999. 
58 CSS 
• O CSS fica assim: 
● Adicione a propriedade border-bottom. 
● Ou seja, você irá adicionar uma borda na parte inferior do cabeçalho. 
● Adicione o valor 2px solid #ffffff; na propriedade. 
• O CSS fica assim: 
● Salve as alterações e visualize a página no navegador. 
● A borda foi adicionada: 
 
● Deixe a propriedade assim: 
● Salve e visualize a alteração. 
● A borda não está mais sendo exibida. Isso acontece porque você não de-
finiu a cor e o tipo da borda. 
• Deixe o CSS assim: 
● Salve e visualize a página no navegador. 
CSS 59 
● Desta maneira, a borda volta a ser exibida, pois você definiu todas as 
propriedades da borda. 
● Altere a cor de fundo da classe .destaque, alterando-a para #ffffff. 
● Desta maneira, a borda inferior no h2 não irá aparecer, pois ela está uti-
lizando a mesma cor do fundo da página. 
● Localize o trecho que é responsável pela estilo da borda. 
● Ela está utilizando o estilo sólido (border-bottom-style:solid;). 
● Altere o estilo para inset. 
● Salve e visulize a modificação no navegador. 
● Ficou assim: 
 
• Deixe o CSS assim: 
● Salve e visualize a modificação. 
● Fica assim: 
 
● Veja que a metade da borda ficou com um tom mais escuro. Isso serve 
para simbolizar uma "sombra". 
● Por fim, deixe as propriedades assim: 
● O topo da notícia ficou assim: 
 
● Crie uma composição que edite a tag img que está dentro da classe 
.destaque. 
60 CSS 
● Nessa composição, defina que a margem esquerda da imagem deverá 
ser de 10%. 
● Salve as alterações e visualize a página. 
● A figura ficou centralizada. 
 
● Agora você irá criar a coluna responsável pela publicidade no site. 
● No CSS, localize a classe .publicidade. 
● Na classe, altere o valor da propriedade background-color para 
#ffffff. 
● Na classe, adicione a propriedade text-align com o valor center. 
● Dentro desta área você irá inserir duas imagens simbolizando anúncios 
de sites parceiros. 
● Localize o div que utiliza a classe .publicidade. 
● Dentro dele insira a imagem publi1.jpg com o texto alternativo "Loja 
Parceira - Maximun PC". 
● Salve e veja a alteração. 
● Foi adicionada uma imagem no canto esquerdo da página. 
CSS 61 
 
● Esse canto serviria basicamente para exibir as lojas/sites parceiros. 
● Na linha debaixo, insira a imagem publi2.jpg, com o texto alternativo 
Site Parceiro – AssistGood. 
● A nova imagem foi inserida exatamente abaixo da imagem anterior. 
● A página fica assim: 
 
● Crie uma composição que edite todas as imagens que estiverem dentro 
do div com a classe .publicidade. 
● Defina que essas imagens devem ter 10px de margem inferior e 15px 
de margem superior. 
● Salve a alteração e visualize a página. 
62 CSS 
● Após a inserção da composição que ajusta as imagens do div .publici-
dade, a página ficou assim: 
 
● Veja que agora existe uma margem que separa as duas imagens. 
● Insira as tags fieldset: 
 
● Essa tag é responsável pela criação da pequena borda que "agrupa" as 
duas imagens. 
 
CSS 63 
● Adicione o trecho: 
 
● Salve as alterações e visualize a página. 
● A legenda foi adicionada: 
● No código, vá para o trecho responsável pelo CSS da página. 
● Crie uma composição que edite o fieldset dentro do div que usa a 
classe .publicidade. 
● Defina que a borda do fieldset deverá ser de 1px, utilizar o estilo solid 
e a cor #eaeaea. 
• O CSS fica assim: 
● Salve a página e visualize as modificações. 
• O local responsável pelos anúncios ficou assim: 
64 CSS 
● Volte para o CSS da página e crie uma nova classe chamada .foto. 
● Defina que a largura e a altura serão de 100px. 
● Defina que a borda deverá ser de 1px, utilizar o estilo solid e a cor 
#666666. 
● Defina que ele deverá flutuar à esquerda e que deverá ter 5px de mar-
gem direita. 
• O CSS fica assim: 
● No trecho HTML, localize a tag responsável pelo fechamento do parágra-
fo. 
● Insira um div utilizando a classe .foto e dentro do div, insira a imagem 
tablet_mini.jpg com o texto alternativo Dreambook. 
 
● Salve as alterações e visualize a página. 
● Veja que a imagem está com uma pequena margem à esquerda, fazendo 
com que ela fique fora das bordas determinadas para ela. 
 
CSS 65 
● Isso aconteceu porque foi definido que todas as tags img, dentro de um 
item com a class .destaque teriam 10% de margem adicionadas à es-
querda. 
 
● Sendo assim, a tag img herda a configuração anterior. Para que isso não 
ocorra basta criar uma composição que altere todas as tags img dentro 
de um item com a classe .foto. 
● Crie uma composição que defina a margem de todas as tags img que 
estiverem dentro de um item com a classe .foto. 
● Defina que a margem utilizada nas tags img será de 0px. 
● Salve as alterações e visualize a página. 
• A imagem agora está inserida corretamente no quadro: 
● Agora você irá inserir um div ao lado da imagem, para que você possa 
inserir um pequeno resumo sobre a notícia. 
● Crie uma classe chamada .resumo. 
● Defina que a largura deverá ser 150px e a altura 100px. 
● Defina que ele deverá flutuar à esquerda e que deverá ter 40px de mar-
gem direita. 
● Após o div foto, crie um div que utilize a classe .resumo e deixe assim: 
 
66 CSS 
● Salve e visualize a página. Ela deverá ficar assim: 
 
● Seguindo os passos anteriores, crie a notícia: 
 
● As notícias deverão ficar assim: 
 
● Insira uma linha horizontal para separar a notícia principal das outras 
duas pequenas. 
 
● Crie uma classe chamada .separador. 
● Defina que a altura será de 4px e a cor de fundo será #cccccc. 
● Defina que a margem inferior será de 20px. 
CSS 67 
● Fica assim: 
● Aplique a classe .separador à linha horizontal recém-criada. 
● Ficará assim: 
 
● Localize o trecho que adiciona as imagens dos sites parceiros e adicione 
a imagem publi3.jpg. 
 
 
68 CSS 
● A página deverá ficar assim: 
 
● Salve as alterações. 
● Rodapé 
● Como criar um rodapé fixo? Muitas vezes em uma página, quando ela 
não possui conteúdo suficiente, o rodapé fica grudado com o conteúdo, 
deixando um espaço vago na página. Você verá agora como construir 
um rodapé que fique fixo na parte inferior da página, independente do 
conteúdo. Paraisso, usaremos a propriedade position. 
● A Propriedade Position 
● A propriedade position serve para especificar o posicionamento de um 
objeto e possui quatro valores: 
� absolute: O posicionamento absolute utiliza como base o último 
elemento que foi posicionado através de qualquer outro valor. 
� fixed: O posicionamento fixed deixa o elemento fixo na tela, 
sempre no mesmo local, independente do scroll da página etc. 
CSS 69 
� relative: O posicionamento relative deixa o objeto posicionado 
conforme sua determinação através dos valores left, top, right e 
bottom. 
� static: O posicionamento static deixa o objeto seguir o fluxo da 
página. Esse, na verdade, é o posicionamento padrão de qualquer 
objeto, sendo assim, não se torna necessário declará-lo no CSS. 
● Vá para o trecho responsável pelo CSS da página e crie um id chamado 
"#rodape". 
● Defina que ele terá 100% de largura e 200px de altura. 
● Defina que a cor de fundo será #666666. 
● Defina que a borda superior será do tipo groove e terá 2px de largura 
● Esse é o CSS parcial do rodapé. 
● Localize a tag de fechamento do div corpo. 
 
● Após o fechamento, crie um div que utilize o id rodape. 
● Se o conteúdo não fosse suficiente, a página ficaria assim: 
 
70 CSS 
● No Chrome/Firefox, a página ficou assim: 
 
● No id rodape, adicione a propriedade clear, com o valor both. 
● Basta adicionar a propriedade clear. 
● No id rodape, adicione a propriedade padding com o valor 1%. 
● Ajuste o valor da propriedade width para 98%. 
● Adicione a propriedade color com o valor #ffffff. 
● Salve as alterações. 
● Feche os arquivos abertos no Notepad++ e feche o navegador. 
 
CSS 71 
Módulo 3 - Arquivo CSS 
● Arquivo CSS 
● Os arquivos do tipo .CSS devem ser utilizados para formatar os arquivos 
.HTML. Para isso, você deve ligar (linkar) o css ao arquivo html através 
da tag <link>. 
 
● O arquivo CSS não precisa ficar na mesma pasta do arquivo HTML. Você 
pode indicar a pasta como feito no exemplo acima. O arquivo css (esti-
los.css) está dentro da pasta css. 
● Você pode ter mais de um arquivo .css na mesma pasta, pois, apenas o 
arquivo indicado através da tag <link> será utilizado. Os arquivos .css 
servem, basicamente, para organizar o código da sua página, permitin-
do, assim, que o arquivo .html utilize apenas códigos dedicados ao 
HTML. 
● Se o arquivo CSS estivesse na mesma pasta do arquivo HTML, o código 
para "linkar" o CSS ao HTML seria assim: 
 
● A tag <link> deverá sempre indicar onde o arquivo CSS está, esteja ele 
dentro de uma pasta ou na mesma pasta do arquivo HTML. 
 
● Os atributos rel e type sempre deverão ser preenchidos como no exem-
plo acima (rel="stylesheet" type="text/css"). 
● O atributo rel indica a relação entre os dois arquivos, ou seja, o arquivo 
linkado é uma folha de estilo (stylesheet). 
● Já o atributo type indica o tipo do arquivo, no caso, texto/css. 
72 CSS 
● Você pode obter maiores detalhes sobre a tag <link> no site: http:// 
www.w3schools.com/tags/tag_link.asp. 
● Copie a pasta modelo_folha da pasta Modelos para a pasta Projetos. 
● Abra o arquivo index.html no Notepad++. 
● Tecle Ctrl+N para criar um arquivo. 
● Clique no menu Formatar e selecione a codificação UTF-8. 
 
● Clique no menu Linguagem, posicione o mouse sobre a opção C e cli-
que em CSS. 
 
● Salve o arquivo como "estilo.css" dentro da pasta modelo_folha que 
foi copiada. 
● Volte para o arquivo index.html e recorte todo o trecho CSS do arqui-
vo. 
 
CSS 73 
● O código deverá ficar assim: 
 
● Vá para o arquivo estilo.css e cole o trecho CSS recortado. 
● O arquivo deverá ficar assim: 
 
● Salve a alteração feita nos dois arquivos. 
● Abra a página no navegador. 
● Veja que o arquivo estilo.css não foi carregado e, graças à remoção dos 
estilos do arquivo html, a página foi carregada sem nenhuma formata-
ção. 
74 CSS 
 
● Deixe o código da tag head assim: 
 
● Desta maneira você irá "linkar" o arquivo CSS ao HTML. 
● Salve as alterações e visualize a página. 
● O arquivo estilo.css foi carregado, deixando a página com a formatação 
desejada. 
 
CSS 75 
● Feche todos os arquivos abertos no Notepad++ e a página aberta no 
navegador. 
● Copie a pasta layout_modelo da pasta Modelos para a pasta Proje-
tos. 
● Abra a pasta colada. Dentro dela você tem dois arquivos, o index.html 
e o main.css. Abra ambos os arquivos no Notepad++. 
● Este é apenas um dos vários layouts css gratuitos, que estão disponíveis 
na internet. O site code-sucks é um destes sites que disponibiliza lay-
outs gratuitamente. Como você pode notar, o arquivo CSS possui um 
trecho verde: 
 
● Esse trecho é chamado de comentário. Nele você pode inserir informa-
ções importantes sobre seu código, como uma explicação de quando u-
sar uma classe etc. Para inserir um comentário basta abrir a tag que in-
dica um comentário e, após o comentário, fechá-la da seguinte maneira: 
/* Inserir o Comentário */. 
● O mesmo acontece com o HTML, porém a indicação de comentário lá é 
feita assim: <!-- Inserir Comentário -->. 
• Ex.: 
● Abra a página no navegador e veja como é o layout. 
76 CSS 
 
● O rodapé da página não fica fixo na parte inferior da janela, pois o con-
teúdo da página não é suficiente para enviá-lo até a base da página. 
● No Notepad++, abra o arquivo main.css. 
● Localize o ID #column e nele adicione a propriedade background com 
o valor #969191. 
● A propriedade background é usada genericamente, ou seja, tanto para 
imagem quanto para cor: se você for utilizar para alterar a cor do fundo, 
basta adicionar a propriedade seguida do valor hexadecimal da cor: 
background:#eaeaea; 
● Se for adicionar uma imagem, basta inserir o valor url(local da ima-
gem), assim como feito quando utiliza-se a propriedade background-i-
mage: background: url(imagens/foto.png); 
● A página fica assim: 
 
CSS 77 
● Localize o ID #faux e nele substitua o valor da propriedade back-
ground para #d1dbdb. 
● A página fica assim: 
 
● Veja que existem dois divs que compõem o corpo da página. 
● Localize o ID #footer e nele adicione a propriedade position com o va-
lor absolute. 
● Bottom, Left, Top e Right 
● As propriedades bottom, left, top e right servem para especificar a 
margem que os objetos terão da borda da página. Confira cada proprie-
dade e sua ação: 
� bottom: define o distanciamento da parte inferior da página; 
� left: define o distanciamento da parte esquerda da página; 
� top: define o distanciamento da parte superior da página; 
� right: define o distanciamento da parte direita da página. 
● Os valores podem ser em px, % e cm. 
● Localize o ID #footer e nele adicione a propriedade top com o valor 
0px. 
● Salve e visualize a página. 
● Ao definir o valor de top como 0px, o rodapé ficou colado na borda su-
perior da página. 
 
78 CSS 
● Localize o ID #footer e nele substitua a propriedade top por bottom, 
mantendo o valor inalterado. 
● Salve e visualize a página. 
● O rodapé agora está colado na borda inferior da página: 
 
● Essa pequena alteração foi responsável pelo posicionamento do objeto. 
● Altere a cor de fundo utilizada nos divs com id #column #faux para 
#ffffff. 
 
 
CSS 79 
● Ajuste o css correspondente a cada área <br /><br />. 
 
● Volte para o código HTML e faça as alterações necessárias para que ele 
fique assim: 
 
80 CSS 
● Vá até o trecho responsável pelo cabeçalho da página. 
● Remova o texto e no local insira a imagem logo.png, que está na pasta 
imagens. 
● Deixe assim: 
 
● Localize o div que utiliza o id navigation. 
● Dentro dele crie uma lista não ordenada com os itens: SERVIÇOS, CLI-
ENTES e CONTATO. 
• O código do div deverá ser este: 
● Criando Um Menu Através De Uma Lista Não Ordenada 
● Por se tratar de uma lista, os itens estarão posicionados cada um em sua 
própria linha. 
 
● Vá até o arquivo CSS e crie uma composição que edite todo "li" dentro 
do id navigation. 
 
 
CSS 81 
● A PropriedadeDisplay 
● A propriedade display permite a definição da maneira que o elemento 
html será apresentado na página. Existem 4 principais valores: 
� block: faz com que o objeto seja exibido em forma de bloco. 
Assim como acontece com os parágrafos e os cabeçalhos, um blo-
co contém espaços em branco em todos os cantos e não permite 
que um outro objeto html fique ao seu lado. 
� inline: faz com que o objeto seja exibido em linha, ou seja, no 
mesmo local, podendo transformar uma lista em uma única linha. 
� none: deixa o objeto oculto, ou seja, ele não é exibido pelo na-
vegador. 
� inline-block: é uma mistura dos dois primeiros valores, ou seja, 
insere um objeto em linha, porém deixando-o se comportar como 
um bloco. 
● Na composição criada, adicione a propriedade display com o valor no-
ne. 
 
● Salve a alteração e visualize a página. 
● O menu não está sendo exibido. 
 
● Altere o valor da propriedade display para inline. 
 
82 CSS 
● A lista agora passa a ser exibida em uma única linha e sem os marca-
dores. 
 
● Transforme cada objeto da tabela em um link. 
 
● No CSS, localize o id navigation e adicione a propriedade text-align 
com o valor center. 
O menu fica assim: 
● Editando Links 
● Assim como no HTML, o CSS permite alterar os estados dos links. Cada 
um pode utilizar uma formatação própria. Por exemplo, o link será ver-
de. Quando o mouse estiver sobre ele, sua cor será azul. Quando clicado 
ficará vermelho, e assim por diante. 
● Veja como modificar os estados dos links: 
� a:link: responsável por editar o estado inicial do link; 
� a:hover: responsável por editar o link quando o mouse está posi-
cionado sobre ele; 
CSS 83 
� a:visited: responsável por editar os links já visitados; 
� a:active: responsável por editar o link quando ele estiver ativo. 
● No exemplo, os links estão dentro de um item de uma lista. Sendo as-
sim, uma composição deverá ser criada. Essa composição deverá editar 
todos os links que estiverem dentro de um "li", que por sua vez deverá 
estar dentro de um item com o id navigation. 
• Crie a composição: 
• Os links ficaram brancos: 
● Adicione a propriedade text-decoration com o valor none: 
• O texto fica assim: 
● Adicione a propriedade background-color e defina que a cor do fundo 
dos links será #123456. 
● Insira a propriedade padding com o valor 10px 20px 10px 20px; 
● Ao adicionar a propriedade padding, você cria uma caixa ao redor do 
link. 
● Ex.: 10px na parte superior, 20px na parte direita, 10px na parte infe-
rior e 20px na parte esquerda. 
 
● O menu ficou assim: 
 
84 CSS 
● Crie uma composição que edite a instância hover do link e deixe-a as-
sim: 
 
● Salve as alterações e veja a página no navegador. 
● Posicione o mouse sobre um dos botões do menu. 
 
● Crie uma composição que altere a instância visited do link e deixe-a 
assim: 
 
● Agora você irá começar a criar o corpo da página. 
● Crie um id chamado "destaque". 
● Defina a largura em 260px e a altura em 380px. 
● Defina uma borda de 1px, sólida, com a cor #999999. 
● Defina a margem esquerda em 312px. 
● Defina que o objeto irá flutuar ao centro. 
• O id ficou assim: 
● Localize o div que utiliza o id column. 
CSS 85 
● Apague a palavra "corpo" que está nele e insira um novo div que utilize 
o id destaque. 
 
● Dentro do div criado, insira a imagem empresa.jpg e use como texto 
alternativo "Nossa Empresa". 
● Fica assim: 
 
● Crie um id chamado "esq_cima". 
● Defina a largura em 260px e a altura em 180px. 
● Defina uma borda de 1px, sólida, com a cor #999999. 
● Defina que o objeto irá flutuar à esquerda. 
86 CSS 
● O id fica assim: 
● Crie um id chamado "dir". 
● Defina a largura em 260px e a altura em 380px. 
● Defina uma borda de 1px, sólida, com a cor #999999. 
● Defina que o objeto irá flutuar à direita. 
• O id fica assim: 
● Volte para o código HTML e adicione dois divs, utilizando os ids criados. 
 
● Salve as modificações e visualize no navegador. 
 
CSS 87 
● Foram adicionados dois divs: 
 
● Volte para o código CSS e copie o id #esq. 
• Cole e edite-o, deixando assim: 
● Após o div destaque, insira o div: 
 
● Salve as alterações e visualize a página. 
 
88 CSS 
● Fica assim: 
 
● Feche todos os arquivos abertos no Notepad++. 
● Feche as páginas abertas no navegador. 
● Copie a pasta modelo_cinco da pasta Modelos para a pasta Projetos. 
● Abra a pasta modelo_cinco. 
● Abra os arquivos index.html e estilo.css no Notepad++. 
● Abra a página index no navegador. 
● A página é totalmente composta por divs, e agora você irá se dedicar a 
criação de um rodapé elaborado. 
● Veja que nele definimos que o corpo da página terá 900px, ou seja, se-
rá fixo. 
● Centralização De Divs E Outros Elementos Em Caixa 
● A centralização de uma página que trabalha sua medida de forma ajus-
tável, em porcentagem (%) é feita através de uma conta simples: supo-
nha que o corpo da página ocupa 60% da janela, ou seja, 100% da ja-
nela menos 60% do corpo, restando 40%. Os 40% restantes devem 
ser divididos por 2, afinal temos duas laterais, a esquerda e a direita. 
Assim, nossa página teria 20% de margem em cada lateral. 
 
CSS 89 
● Quando estamos trabalhando com uma página de largura fixa, definida 
em pixels (px), não sabemos a porcentagem que ela ocupará da tela, 
pois ela irá variar de acordo com a resolução do computador do usuário, 
então a centralização deve ser feita através da propriedade "margin" 
com o valor "0 auto", como você pode ver no exemplo abaixo. 
• Exemplo: 
● Sabendo que a página possui 900px de largura, você deverá trabalhar 
seguindo esta medida. 
● Imagine que nosso rodapé será divido em 3 caixas. Seguindo essa linha 
de raciocínio, seria fácil criar três caixas de 300px de largura cada. Po-
rém, desta maneira, elas não teriam margem ou espaçamento entre si. 
● Crie uma classe chamada ".cont". 
● Defina que a largura e a altura do conjunto é de 250px. 
● Defina que a altura mínima e a largura mínima devem ser iguais às me-
didas normais do conjunto (utiliza-se min-width e min-height). 
● Defina que a margem superior será de 20px e que o conjunto irá flutu-
ar à esquerda. 
● Defina que o texto terá 11px de tamanho e alinhamento centralizado. 
● Defina que a cor de fundo do conjunto será #ff00ff. 
• O CSS ficou assim: 
90 CSS 
● Vá para o código HTML. 
● Localize o div que utiliza o id rodape e dentro dele insira três novos 
divs que utilizem a classe .cont. 
 
● Salve as alterações e visualize a página. 
● As três caixas foram adicionadas na parte inferior da página (rodapé), 
lado a lado, sem espaço entre elas ou a borda esquerda da página. 
 
● Volte ao CSS e crie uma classe chamada ".separador". 
● Defina que a largura do conjunto é de 1px e a altura 300px. 
● Defina que a altura mínima e a largura mínima devem ser iguais às me-
didas normais do conjunto (utiliza-se min-width e min-height). 
● Defina que a margem esquerda e a margem direita serão de 37px. 
● Defina que o conjunto irá flutuar à esquerda. 
● Defina que a cor de fundo do conjunto será #080b51. 
CSS 91 
• O CSS ficou assim: 
● Vá para o código HTML. 
● Localize o div que utiliza o id rodape e adicione dois divs que utilizem a 
classe .separador entre os três divs de classe .cont: 
 
● Salve as alterações e visualize a página. 
● O separador foi adicionado entre os divs 1 e 2, e entre os divs 1 e 3. 
 
92 CSS 
● Volte para o código CSS e crie um id com o nome "#centraliza". 
● Ele será responsável pela centralização das três caixas do rodapé. A cen-
tralização de objetos com tamanho especificado em px deve ser feita a-
través da propriedade margin com o valor 0 auto. 
● Defina que a largura do conjunto será de 900px. 
● Defina que a largura mínima do conjunto deverá ser de 900px (tam-
bém). 
● Defina que o conjunto deverá flutuar ao centro e que a margem será 0 
auto. 
• O CSS fica assim: 
● No HTML, insira, no rodapé, um div que utilize o idcentraliza. Ele de-
verá englobar os outros três div .cont. 
 
● Salve as alterações e visualize a página. 
● O rodapé fica centralizado com o conteúdo e com o restante da página. 
CSS 93 
 
● No CSS, localize a classe .cont e nela apague a propriedade back-
ground-color. 
● Insira o conteúdo no div responsável pelo quadro esquerdo do rodapé: 
 
● Salve as alterações e visualize a página. 
● O primeiro quadro do rodapé ficou assim: 
 
94 CSS 
● Utilizando as imagens pgto.png e debito.png, crie o segundo bloco do 
rodapé. 
 
● Feche todos os arquivos abertos no Notepad++. 
● Feche as páginas abertas no navegador. 
● Transição De Imagem 
● É possível fazer um menu, utilizando apenas uma imagem para se obter 
um efeito de animação. 
• Abra a pasta imagens e visualize a imagem: 
● Ela será responsável por criar um efeito de troca de cor no menu. 
● No código CSS, localize o id #menu e adicione a propriedade back-
ground-image, definindo a imagem menu.png como fundo do div. 
 
CSS 95 
● O menu fica assim: 
 
● No código CSS, localize a composição responsável por editar a instância 
hover do link. 
● Ajuste as duas propriedades que fazem a composição. 
 
● Ao posicionar o mouse sobre uma das opções do menu, ela ficará assim: 
 
● A Propriedade Background-Position 
● A propriedade background-position permite que você ajuste a posição 
da imagem de fundo, seja ela da página, de um div, ou de qualquer ou-
tro elemento HTML. 
● A propriedade background-position serve para ajustar o posiciona-
mento da imagem e pode ter os valores left top, left center, left bot-
tom, right top, right center, right bottom, center top, center cen-
ter e center bottom. 
● Se você especificar uma posição apenas com uma palavra, a segunda 
será center, ou seja, se você definir o background-position como 
left, ele na verdade será left center, se você especificar como top ele 
será top-center, e assim por diante. 
● Você também pode posicionar a imagem através de %, como no exem-
plo abaixo: 
� background-position:0% 50% - O posicionamento aqui seria 
0% na horizontal e 50% na vertical. 
● E até mesmo através de px, como no exemplo: 
� background-position:10px 25px - O posicionamento aqui seria 
10px na horizontal e 25px na vertical. 
 
96 CSS 
● A imagem bob.png será utilizada no fundo do div. 
 
● A imagem é aplicada e repetida várias vezes para preencher completa-
mente o tamanho do div. Essa é a configuração padrão do background 
no css: ele sempre é repetido. Porém, você pode modificar esse com-
portamento. 
 
● A Propriedade Background-Repeat 
● A propriedade background-repeat permite que você ajuste a repetição 
do background. Através dessa propriedade você pode limitar a repeti-
ção horizontalmente, verticalmente ou não permitir sua repetição. 
● Veja os valores da propriedade: 
� repeat: faz com que o fundo seja repetido em todo o fundo, esse 
é o valor padrão do CSS. 
� repeat-x: faz o fundo ser repetido apenas horizontalmente. 
� repeat-y: faz o fundo ser repetido apenas verticalmente. 
� no-repeat: não permite que o fundo seja repetido. 
 
CSS 97 
● Ao aplicar o background-repeat: repeat-x; o fundo ficará assim: 
 
● Ao aplicar o background-repeat: repeat-y; o fundo ficará assim: 
 
● Ao aplicar o background-repeat: no-repeat; o fundo ficará assim: 
 
98 CSS 
● Para utilizar a propriedade background-position, você precisa definir a 
propriedade background-repeat como no-repeat, para que o fundo 
seja inserido apenas uma vez e não seja repetido em todo o fundo. 
● Abaixo temos alguns resultados da aplicação do background-position 
e seus diferentes valores. 
● Background-position: center; 
 
● Background-position: top; 
 
● Background-position: top right; 
 
 
CSS 99 
● Background-position: bottom left; 
 
● Background-position: center right; 
 
● Como você pode ver nos exemplos anteriores, a primeira palavra do va-
lor indica o posicionamento vertical, já a segunda palavra, o posiciona-
mento horizontal. 
● De volta ao menu, na composição responsável pela instância, adicione a 
propriedade background-image, definindo a imagem menu.png como 
fundo do div. 
● Salve as alterações e visualize a página. 
● Ao posicionar o mouse sobre o menu, ele ficará assim: 
 
● Adicione a propriedade background-position com o valor 0px -40px. 
• O menu agora fica assim: 
100 CSS 
● Vá para o código HTML e localize o trecho "INSERIR DIV PARA O RO-
DAPÉ AQUI!" 
● No local, insira um div sem classe ou id: 
 
● Insira, entre os divs: "Todos os direitos reservados para Ouro Se-
guros - 2010/2011". 
● Vá para o código CSS e crie o id #rodape. 
● Defina que o rodapé terá 100% de largura e 80px de altura. 
● Defina que o texto será da cor #ffffff. 
● Defina que o id terá uma borda superior sólida de 1px e cor #ffffcc. 
● Salve as alterações feitas no CSS. 
● Vá até o código HTML e insira o ID no div criado para o rodapé. 
 
● Salve as alterações e visualize a página. 
● Por enquanto é possível visualizar apenas uma linha (borda superior). 
Note também que a imagem da moça está por cima do rodapé. 
 
● Volte ao código CSS e defina que a cor de fundo será #ffcc00. 
● Salve as alterações no CSS e visualize a página no navegador. 
● O rodapé agora tem uma cor definida, permitindo assim a visualização 
de seu conteúdo. 
CSS 101 
 
● Volte para o código CSS e adicione a imagem rodape.png como fundo 
do div. 
● Centralize o texto do div. 
● A Propriedade Z-INDEX 
● O CSS permite que você trabalhe com "camadas", ou seja, você pode 
sobrepor objetos. Isso pode ser feito através da propriedade z-index. O 
valor da propriedade deverá ser numérico, assim ele representará a ca-
mada em que o objeto está. Por exemplo, um objeto com o z-index de-
finido em 2 (z-index:2) ficará sobre um objeto com o z-index no valor 
1, ou seja, o objeto com o maior z-index ficará posicionado sobre o res-
tante. 
● Para utilizar a propriedade z-index você precisa definir também a pro-
priedade position. 
● Veja as imagens abaixo. Elas foram inseridas sem nenhum ajuste CSS. 
 
● O corpo fica assim: 
 
102 CSS 
● Veja as classes criadas (uma para cada imagem): 
 
● As classes foram aplicadas nas imagens e o resultado foi este: 
 
● A imagem do Lula Molusco está sobre as outras duas pois ela possui o 
z-index com o maior valor (z-index:3). 
● Basta alterar o valor do z-index da classe .bob para um número maior 
que 3 para que a imagem que utiliza essa classe fique sobre a imagem 
do Lula molusco. 
 
CSS 103 
● Ao posicionar as imagens através dos valores de top e left você pode 
obter o seguinte resultado: 
 
● De volta ao rodapé, insira a propriedade position com o valor absolute 
e a propriedade z-index com o valor 2 no id #rodape. 
● Adicione também a propriedade bottom com o valor 0px; para que a i-
magem tenha 0px de distanciamento da parte inferior da página. 
● Salve as alterações no CSS e visualize a página. 
● O rodapé agora está posicionado à frente da moça. 
 
104 CSS 
● No código CSS, insira a propriedade z-index com o valor 5 no id #ven-
dedora. 
● Salve as alterações e visualize página. 
● A moça voltou a ficar sobre o rodapé: 
 
● Salve as alterações e feche o arquivo aberto no Notepad++. 
● Feche o navegador. 
Módulo 4 - Simplificando 
● Simplificando O CSS 
● Como já foi dito, alguns códigos permitem a simplificação para que você 
possa fazer todas as alterações em uma única linha. 
• Ex.: 
● No código acima está sendo aplicada a cor #e0ddc7 de fundo e exibindo 
a imagem sombra.png, da pasta imagens, também de fundo. Ou seja, 
suprimiu as propriedades background-color e background-image e 
usou apenas a background. 
● A Propriedade Text-Transform 
● A propriedade text-transform altera a capitalização do texto. A capita-
lização do texto é a utilização de letras maiúsculas, ou seja, você poderá 
alterar a utilização de letras maiúsculas no texto, através dos seguintes 
valores: 
CSS 105� capitalize: transforma toda primeira letra em maiúscula; 
� uppercase: transforma todas as letras em maiúsculas; 
� lowercase: transforma todas as letras em minúsculas; 
� inherit: herda a configuração do item anterior. 
• Ex.: 
● A Propriedade Cursor 
● O CSS permite que você edite a aparência do cursor do mouse. A pro-
priedade responsável por isto é chamada de cursor. Você pode aplicar 
esta propriedade para modificar o cursor em toda página, ou apenas em 
um único objeto. Veja alguns dos valores que você pode utilizar para a 
propriedade. 
 
 
 
106 CSS 
● Exemplo de cursor pointer ao posicionar o cursor sobre o botão Enviar 
de um formulário: 
 
Módulo 5 - Propriedades Parte 2 
● A Propriedade Text-Indent 
● A propriedade text-indent é responsável por criar um espaçamento à 
esquerda de determinado parágrafo ou linha. 
● Ex.: Texto com 10px de indentação. 
 
• Resultado: 
● A Propriedade Overflow 
● A propriedade overflow serve para indicar como o container irá agir se 
o conteúdo ultrapassar suas medidas especificadas (altura e largura). 
 
CSS 107 
● A propriedade pode ser: 
● overflow:hidden, que esconderá o conteúdo restante: 
 
 
 
● overflow:scroll, que criará as barras de rolagem, mesmo que elas não 
sejam necessárias: 
 
 
108 CSS 
 
● overflow:auto, que criará as barras de rolagem, quando elas forem ne-
cessárias. 
 
 
 
 
FIM DA APOSTILA 
Método CGD ® - Todos os direitos reservados. 
Protegidos pela Lei 5988 de 14/12/1973. Nenhuma parte des-
ta apostila poderá ser copiada sem prévia autorização.