Vous êtes sur la page 1sur 15

Telecentro Jardim Niteri

Introduo ao CSS

Sugesto de Aula

I ntrod uo ao C S S

Welton Matos da Cruz Orientador I


Telecentro Jardim Niteri

Carga Horria: 20h

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

ndice
Apresentao
Quais Software usar
O que CSS?
A diferena entre CSS e HTML
Quais os benefcios do uso de CSS
Como funciona CSS
A sintaxe bsica das CSS
Aplicando CSS a um documento HTML
Mtodo I : In-line
Mtodo II : Interno
Mtodo III : Externo
Exerccio
Cores e fundo
Propriedade 'Color'
Propriedade 'background-color'
Propriedade 'background-image'
Fontes
Famlia de fontes [font-family]
Estilo da fonte [font-Style]
Tamanho da fonte [font-size]

3
3
3
3
4
4
4
4
5
5
5
6
7
7
7
7
8
8
9
9

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Alinhamento de texto [text-align]


Pseudo Classes
Sintaxe
Seletores: pseudo Classe de links
Margin e Padding
Definindo margin de um elemento
Definindo padding de um elemento
Posicionando elementos
Posicionamento absoluto
Posicionamento relativo
Agrupando com <div>
Parmetros de DIV
Doctype
Doctype transicional
Atividade final
Referncias

9
9
10
10
10
10
11
12
12
12
13
13
13
13
13
15

Telecentro Jardim Niteri

Introduo ao CSS

Apresentao

O que CSS?

CSS a abreviatura para Cascading Style Sheets. Folha de Estilos em


Folhas de estilos em cascata Cascading Style Sheets (CSS) uma Cascata
ferramenta fantstica para construo do layout dos seus websites.Permite que
CSS uma linguagem para estilos que define o layout de documentos
voc projete websites com uma tcnica completamente diferente da HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas,
convencional e possibilita uma considervel reduo de tempo de trabalho. larguras,imagens de fundo,posicionamentos e muito mais.
Conhecer CSS uma necessidade para qualquer um envolvido com o projeto
HT ML pode ser (in)devidamente usado para definir o layout de
web.
websites.Contudo CSS proporciona mais opes e mais preciso e sofisticado.
Para usar CSS necessrio um conhecimento bsico de H T ML. CSS suportado por todos os navegadores atuais.
Se voc no est familiarizado com HT ML,sugiro que faa o curso Introduo
ao H T ML,tamb m oferecido pelo Programa Telecentros.

A diferena entre CSS e HTML

Quais softwares usar ?

HT ML usado para estruturar contedos. CSS usado para formatar


contedos estruturados.

Tudo o que voc precisa de um simples e gratuito editor de texto.Ou


Quando Tim Berners Lee inventou a W orld Wide Web, a linguagem
tamb m o programa chamado Notepad. No Microsoft Windows, pode ser HTML era usada somente para estruturar textos.U m autor podia marcar seus
substitudo
pelo Bloco de Notas.
textos definindo "isto um cabealho " ou "isto um pargrafo" usando tags
U m editor de texto simples o idealpara o aprendizado de HT ML e de HTML taiscomo <h1> e <p>.
CSS porque eles no afetam e nem modificam o cdigo que voc digita.Assim
medida que a Web ganhava popularidade, os designers comeavam a
os acertos e erros de codificao devem-se exclusivamente a voc no ao sentir a necessidade de encontrar meios de construir layout para os
software que voc utiliza.
documentos online. Para suprir estas necessidades os fabricantes de
Voc pode usar qualquer navegador parta acompanhar este tutorial. navegadores (quela poca a Netscape e a Microsoft) inventaram novas tags
aconselhvel manter o navegador sempre atualizado e utilize a ltima verso HTML tais como, por exemplo a tag <font> que se diferenciava das tags
originaisdo HT ML pelo fato de destinar-se layout e no estrutura.
disponve
l.
Isto adicionalmente teve o efeito de disvirtuar o emprego de tags
Um navegador e um editor de textos simples tudo o que voc
inicialmente projetadas para estrutura como por exemplo a tag <table> que
precisa.
passaram a ser empregadas para layout. Muitas destas novas tags para layout
como a tag <blink> eram suportadas somente por um determinado tipo de
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

navegador.A frase "Voc precisa do navegador X para visualizar esta pgina" Suponha que desejamos uma cor de fundo vermelha para a pgina web:
tornou-se comum nos websites.
Usando HT ML podemos fazer assim:
CSS foi inventada para solucionar esta situao, colocando disposio
dos web designers meios sofisticados de projetar layouts suportados por todos <body bgcolor="#FF0000">
os navegadores.E ao mesmo tempo a separao dos estilos de apresentao da
marcao dos contedos torna a manuteno dos sites bem mais fc
il.
Com CSS o mesmo resultado ser obtido assim:

Quais so os benefcios do uso de CSS?

body {background-color:#FF0000;}

CSS uma revoluo no mundo do web design. Os benefc


ios
concretos do uso de CSS incluem:

Como voc pode notar os cdigos HT ML e CSS so mais ou menos


controle do layout de vrios documentos a partir de uma simples folha parecidos.O exemplo acima serve tamb m para demonstrar o fundamento do
de estilos;
modelo CSS:
maior preciso no controle do layout;

aplicao de diferentes layouts para servirdiferentes m dias;

emprego de variadas, sofisticadas e


desenvolvimento.

avanadas tcnicas de

Como funciona CSS?


Vamos desenvolver a sua primeira folha de estilos.Ver o bsico sobre o
modelo CSS e como usar ele no HTML.
Muitas das propriedades usadas em CSS so semelhantes quelas do HT ML.
Assim, se voc est acostumado a usar HTML ir reconhecer muitos dos
cdigos que usaremos.

A sintaxe bsica das CSS


Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Aplicando CSS a um documento HTML


possve
l aplicar CSS a um documento de trs maneiras. Os trs
m todos de aplicao esto exemplificados a seguir.Recomendamos que voc
foque no terceiro m todo,ou seja o m todo externo.
4

Telecentro Jardim Niteri

Introduo ao CSS

Mtodo 1: In-line (o atributo style)

U ma maneira de aplicar CSS pelo uso do atributo style do HT ML.


Tomando como base o exemplo mostrado anteriormente a cor vermelha para
o fundo da pgina pode ser aplicada conforme mostrado a seguir:

</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>

<html>
<head>

</html>

<title>Exemplo</title>
</head>

Mtodo 3: Externo (link para uma folha de estilos)

<body style="background-color:#FF0000;">

O m todo recomendado o de lincar para uma folha de estilos


externa.

<p>Esta uma pgina com fundo vermelho</p>

U ma folha de estilos externa um simples arquivo de texto com a


extenso .css.Talcomo com qualquer outro tipo de arquivo voc pode colocar
uma folha de estilos tanto no servidor como no disco rg
ido.

</body>
</html>

Mtodo 2: Interno (a tag style)

Vamos supor,por exemplo,que sua folha de estilos tenha sido nomeada


de style.css e est localizada no diretrio style.Tal situao est mostrada a
seguir:

U ma outra maneira de aplicar CSS e pelo uso da tag <style> do HT ML.


Como mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color:#FF0000;}
</style>
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

O "truque" criar um link no documento HTML (default.htm) para a


folha de estilos (style.css). O link criado em uma simples linha de cdigo
HTML como mostrado a seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Notar que o caminho para a folha de estilos indicado no atributo href.
Esta linha de cdigo deve ser inserida na seo header do documento
5

Telecentro Jardim Niteri

Introduo ao CSS

HTML,isto ,entre as tags <head> e </head>.Conforme mostrado abaixo:

Esta tcnica pode economizar uma grande quantidade de trabalho.

Exerccio
<html>

Digitar o cdigo a seguir no programa editor de texto escolhido:

<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />

<html>
<head>

</head>

<title>Meu documento</title>

<body>

<link rel="stylesheet" type="text/css" href="style.css" />

.....

</head>

Este link informa ao navegador para usar o arquivo CSS na renderizao


e apresentao do layout do documento HT ML.

<body>

<h1>Minha primeira folha de estilos</h1>


A coisa realmente inteligente disto que vrios documentos HT ML
podem lincar para uma mesma folha de estilos.Em outras palavras isto significa </body>
que um simples arquivo ser capaz de controlar a apresentao de muitos </html>
documentos HTML.
Salvar como default.htm
E em uma nova folha do editor de texto digitar o seguinte cdigo:
body {
background-color:#FF0000;
}
Salve como style.css
Salve os dois arquivos no mesmo diretrio com a extenso apropriada (".css" e
".htm").
Abra default.htm no seu navegador e veja uma pgina com o fundo.
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

Cores e fundos

}
h1 {
color:#990000;

Como aplicar cores de primeiro plano e cores de fundo no seu website.

background-color:#FC9804;

Propriedade 'color'
A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabealhos de
primeiro nve
l no documento sejam na cor vermelha. O elemento HTML que
marca tais cabealhos o elemento <h1>. O cdigo a seguir define todos os
<h1> na cor vermelha.
h1 {
color:#ff0000;
}

Propriedade 'background-color'
A propriedade background-color define a cor do fundo de um
elemento.

Notar que foram aplicadas duas propriedades ao elemento <h1> separadas


por um ponto e vrgula.

Propriedade 'background-image'

A propriedade CSS background-image usada para definir uma imagem


de fundo. Para inserir uma imagem de fundo na pgina basta aplicar a
propriedade background-image ao elemento <body> e especificar o caminho
para onde est gravada a imagem.
Veja:
body {
background-color:#FFCC66;
background-image:url("fundo.jpg");
}

O elemento <body> contm todo o contedo de um documento


HTML.Assim,para mudar a cor de fundo da pgina,devemos aplicar a

h1 {

propriedade background-color ao elemento <body>.

color:#990000;

Voc pode aplicar cores de fundo para outros elementos,inclusive para


cabealhos e textos.No exemplo abaixo foram aplicadas diferentes

background-color:#FC9804;

cores de fundo para os elementos <body> e <h1>.

body {
background-color:#FFCC66;
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

Fontes
Estudaremos as fontes e como aplic-lasusando CSS.

Famlia de fontes [ font-family]


A propriedade font-family usada para definir uma lista de fontes e sua
prioridade para apresentao de um elemento em uma pgina. Se a primeira
fonte da lista no estiver instalada na mquina do usurio, dever ser usada a
segunda e assim por diante at ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes:nomes para faml
ias de
fontes e nomes para faml
ias genricas.Os dois so explicados a seguir:
nome para faml
ias de fontes
Exemplos para este tipo (normalmente conhecidas como "font") so
"Arial","Times New Roman" ou "Tahoma".
nome para faml
ias genricas
Faml
ias genricas so fontes que pertencem a um grupo com aparncia
uniforme. U m exemplo so as fontes sans-serif que englobam a coleo de
fontes que "no tm p".
A diferena est mostrada na figura:

A seguir mostramos um exemplo de listagem de fontes:


h1 {font-family:arial,verdana,sans-serif;}
h2 {font-family:"Times New Roman",serif;}
Cabealhos <h1> sero renderizados com fonte "Arial". Se o usurio
no tiver a font Arial instalada, ser usada a fonte "Verdana". Se ambas
estiverem indisponve
is na mquina do usurio ser usada uma fonte da faml
ia
sans-serif.
Notar que para especificar a fonte "Times New Roman" foram usadas
aspas.Isto necessrio para fontes com nomes compostos e que contenham
espaos entre os nomes.

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

Estilo da fonte [font-style]


A propriedade font-style define a escolha da fonte em normal,italic ou
oblique.No exemplo a seguir todos as cabealhos <h2> sero em
itl
ico.
h1 {font-family:arial,verdana,sans-serif;}
h2 {font-family:"Times New Roman",serif;font-style:italic;}

Tamanho da fonte [font-size]


On tamanho da fonte definido pela propriedade font-size.
Existem muitas unidades (p.ex.:.pixels e percentagens) que podem ser usadas
para definir o tamanho da fonte. N s usaremos as unidades mais comuns e
apropriadas.Veja:
h1 {font-size:30px;}

alinhado direita e os contidos nas clulas de dados <td> so centrados.E,os


textos normais em pargrafos so justificados:
th {
text-align:right;
}
td {
text-align:center;
}
p{
text-align:justify;
}

Pseudo classes

h2 {font-size:12pt;}
h3 {font-size:120%;}
p {font-size:1em;}

Alinhamento de textos [text-align]

Os efeitos em links so possve


is atravs de declaraes de regras de
estilo para as pseudo classes do elemento <a> do HT ML.
As pseudo classes so usadas em CSS, para adicionar efeitos diferentes
a alguns seletores,ou a uma instncia de alguns seletores.

Textos podem ser alinhados esquerda (left), direita (right) ou


centrados (centrer).E temos ainda o valor justify que faz com o texto contido
em uma linha se estenda tocando as margens esquerda e direita.Este tipo de
alinhamento usado em jornaise revistas.
No exemplo a seguir o texto contido na clula de cabealho <th>
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

Telecentro Jardim Niteri

Introduo ao CSS

Sintaxe

<style type="text/css">

A sintaxe das pseudo classes:

a:link {text-decoration:none}

seletor:pseudo classe {propriedade:valor}

a:visited {text-decoration:none}

<!--

a:hover {text-decoration:underline;
As classes em CSS podem tamb m ser usadas com pseudo classes.

color:#FF0000;

seletor.class:pseudo-class {propriedade:valor}

}
a:active {text-decoration:none}

Seletores:pseudo classe de links


So quatro as pseudo classes dos links:

-->
</style>

Margin e padding

a:link........define o estilo do link no estado inicial;


a:visited...define o estilo do link visitado;
a:hover.....define o estilo do link quando passa-se o mouse sobre ele;

Controle a apresentao de um elemento definindo as propriedades


margin e padding.

a:active....define o estilo do link ativo (o que foi"clicado").


Tipicamente,por defaultos links so sublinhados e na cor azul.

Definindo margin de um elemento

U m elemento tem quatro lados: right, left, top e bottom (direito,


U m efeito muito comum em pginas web o de se retirar o sublinhado esquerdo, superior e inferior). A margin a distncia entre os lados de
do link normal,mudar a cor e fazer "aparecer" o sublinhado,quando o mouse elementos vizinhos (ou s bordas do documento).
passado sobre ele.
Esse efeito obtm-se facilmente com CSS.A seguir a regra para esse simples
efeito:

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

10

Telecentro Jardim Niteri

Introduo ao CSS

body {
margin:100px 40px 10px 70px;
}
As margens para a maioria dos elementos pode ser definida conforme o
exemplo acima. Podemos ento, por exemplo, definir margens para todos os
pargrafos <p>:
body {
margin:100px 40px 10px 70px;
}
p{
margin:5px 50px 5px 50px;
}
As CSS so mostradas assim:

Definindo padding de um elemento


body {
margin-top:100px;
margin-right:40px;
margin-bottom: 10px;
margin-left:70px;
}

Padding pode tamb m ser entendido como "enchimento". Isto faz


sentido, porque padding no computado na distncia entre elementos,
padding define simplesmente a distncia entre a borda e o contedo do
elemento.
Ilustramos o uso de padding atravs de um exemplo onde todos os
cabealhos tm uma cor de fundo definida:

Ou, adotando uma sintaxe mais elegante:

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

11

Telecentro Jardim Niteri

Introduo ao CSS

h1 {
background:yellow;
}
h2 {
background:orange;
}
Definindo padding para os cabealhos, alteramos a quantidade de
enchimento existente ao redor de cada um deles:

U m elemento posicionado absolutamente no cria nenhum espao no


documento. Isto significa que no deixa nenhum espao vazio aps ser
posicionado.
Para posicionar um elemento de forma absoluta a propriedade position
deve ser definida para absolute.Voc pode ento usar as propriedades left,
right,top,e bottom para definiras coordenadas e posicionar o elemento.
Neste caso,escreva o CSS desta forma:
#box1 {

h1 {

position:absolute;

background:yellow;

top:50px;

padding:20px 20px 20px 80px;

left:50px;

h2 {
background:orange;
padding-left:120px;
}

Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma
posio exata na pgina. O princp
io de posicionamento CSS estabelece que
voc pode posicionar um elemento em qualquer lugar na tela usando um
sistema de coordenadas.

Posicionamento absoluto

Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position
deve ser definida para relative. A diferena entre os dois tipos de
posicionamento a maneira como o posicionamento calculado.
O posicionamento para posio relativa calculado com base na
posio original do elemento no documento. Isto significa uma movimentao
do elemento para a esquerda, para a direita, para cima ou para baixo.Assim
fazendo o elemento ocupa um espao aps ser posicionado.
Neste caso,escreva o CSS desta forma:
#dog1 {
position:relative;
left:350px;
bottom: 150px;

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

}
12

Telecentro Jardim Niteri

Introduo ao CSS

DIV na verdade no causa nenhuma diferena visual no cdigo. Ele


considerado um "container", ou seja, uma espcie de "caixa" no visual que
voc pode, atravs de script, alterar o contedo dele, alterando o cdigo
HTML dinamicamente.Ou ento usado para aplicar um estilo (class/style) em
todo o bloco HT ML contido dentro do DIV.

De acordo com as especificaes do W 3 C, um D O CTYPE informa ao


validador qual a vers do HT ML, ou XHT ML, que est sendo usada, e deve
constar no topo de cada pgina. Eles so elementos essenciais na construo
de uma pgina dentro dos padres.O (x)HTML e o CSS do seu site no ser
vlido sem eles.Eles tamb m so essenciais para uma correta renderizao da
sua pgina. e voc omitir o D O CTYPE, ou usar um invl
ido, o browser vai
renderiz-lo em "Quirks Mode\u201d, onde o Browser pensa que voc
escreveu seu HTML de forma antiquada e invl
ida.Vamos dizer que os padres
do fim da dcada de 90. Mas se voc escolher um D O CTYPE vlido, ele ira
funcionar em "Standards Compliance Mode", ou seja, modo de concordncia
com os padres.

Parmetros de DIV

DOCTYPE Transitional

Agrupando com <div>


<div> usado para agrupar um ou mais elementos nve
lde bloco.

Escolhendo um D O CTYPE Transitional quer dizer que seu cdigo


um pouco mais flexvel e permite escrever algum mais antigo e para algumas
* ID: Nomeia o DIV para ser referenciado pelos scripts (Javascript por peculiaridades prprias de navegadores.
exemplo).
*ALIGN:Alinhamento do contedo do DIV (center,left,right);

O CSS
#rodape a {color:#FFF;}

Atividade final

O HT ML
<div id="rodape"> Contedo </div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"lang="pt-BR">


<head>
<title></title>
<meta
charset=UTF-8" />

http-equiv="Content-Type"

content="text/html;

13

Telecentro Jardim Niteri

Introduo ao CSS

<style type="text/css">

}
#direita {

*{

width:197px;
margin:0;

background:purple;

padding:0;

padding:3px;

float:right;
}

#geral{

#conteudo {

width:800px; /** Colocando-a novamente,voltamos a ter

background:lightgray;

um layout fixo! **/

margin:0 205px;
border:1px solid gray;

margin:0 auto;

#rodape {

background:green;/*esse design vaificar show! :D */


padding:10px;

#cabecalho h1 {

color:#FFF;

background:green;/*esse design vaificar show! :D */

text-align:center;

padding:10px;

color:#FFF;

#rodape a {color:#FFF;}

}
</style>
#esquerda {
width:197px;

</head>

background:purple;

<body>

padding:3px;
float:left;
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

<div id="geral">
14

Telecentro Jardim Niteri

Introduo ao CSS

<div id="cabecalho">
<h1>CABECALH O</h1>

<strong><a
Web</a></strong><br />

href="http://visie.com.br">Visie

Padres

Alameda dos Ubiatans,257<br />

</div>

</address>

<div id="esquerda">
</div>

<p>Esquerda</p>
</div>

</div>

<div id="direita">

</body>

<p>Direita</p>

</html>

</div>

Referncias

<div id="conteudo">
<h2>Ttu
lo</h2>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed


Esta apostilafoimontada a partirde contedo retirado dos sites abaixo.
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Sites com padres web.
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat http://www.maujor.com (frum)
non proident,sunt inculpa quiofficiadeserunt mollitanim id est laborum.</p> http://www.tableless.com.br (site)
<h3>Ttu
lo</h3>
http://www.bluevertigo.com.ar/(site)
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed http://www.google.com ( site de busca)
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident,sunt inculpa quiofficiadeserunt mollitanim id est laborum.</p>
</div>
<div id="rodape">
<address>
Introduo ao CSS Telecentro Jardim Niteri Welton Matos da Cruz

15