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
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.

CSS 7
● 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++):

8 CSS
● 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.

CSS 9
● 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:

10 CSS
● 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:

CSS 11
● 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.

12 CSS
● 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>:

CSS 13
● 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".

14 CSS
● 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:

CSS 15
● 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:

16 CSS
● 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 pela

definiçã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.

CSS 17
● 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.

18 CSS
• 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.

CSS 19
● 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.

20 CSS
● 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:

CSS 21
● 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.

22 CSS
● 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".

CSS 23
● 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:

24 CSS
● Veja a seguir as modificações que o CSS permitiu:

CSS 25
● 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.

26 CSS
● 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).

CSS 27
● 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.

28 CSS
● 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.

CSS 29
● 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:

30 CSS
● 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 chamado topo:

● 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.

CSS 31
• 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.

32 CSS
● 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.

CSS 33
● 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.

34 CSS
● 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:

CSS 35
● 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.

36 CSS
● 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.

CSS 37
● 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.

38 CSS
● 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:

CSS 39
● 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.

40 CSS
• 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).
CSS 41
● 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.
42 CSS
● 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.

CSS 43
● Veja que a 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.

44 CSS
● 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:

CSS 45
• Ou assim, se visualizada no Chrome ou Firefox:

● Feche os arquivos.

46 CSS
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.
CSS 47
● 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:

48 CSS
● 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.

CSS 49
● 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.

50 CSS
● 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.

CSS 51
• 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.

52 CSS
● 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.

CSS 53
● 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.

54 CSS
● 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:

CSS 55
● 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).
56 CSS
● 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.

CSS 57
• 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.

58 CSS
● 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.

CSS 59
● 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.

60 CSS
● 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.

CSS 61
● 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.

62 CSS
● 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:

CSS 63
● 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.

64 CSS
● 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:

CSS 65
● 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.

66 CSS
● 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.

CSS 67
● 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. Para isso, 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.
68 CSS
 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:

CSS 69
● 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.

70 CSS
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.

CSS 71
● 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.

72 CSS
● 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.

CSS 73
● 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.

74 CSS
● 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.

CSS 75
● 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:

76 CSS
● 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.

CSS 77
● 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.

78 CSS
● 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:

CSS 79
● 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.

80 CSS
● A Propriedade Display

● 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.

CSS 81
● 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;

82 CSS
 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:

CSS 83
● 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.

84 CSS
● 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.

CSS 85
● 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.

86 CSS
● 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.

CSS 87
● 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.

88 CSS
● 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:

CSS 89
● 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.

90 CSS
• 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.

CSS 91
● 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 id centraliza. 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.

92 CSS
● 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:

CSS 93
● 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.

94 CSS
● 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.

CSS 95
● 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.

96 CSS
● 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:

CSS 97
● 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;

98 CSS
● 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:

CSS 99
● 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.

100 CSS
● 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:

CSS 101
● 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.

102 CSS
● 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.

CSS 103
● 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:

104 CSS
 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.

CSS 105
● 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).

106 CSS
● 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:

CSS 107
● 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.

108 CSS