Cascading Style Sheets (CSS)

Minicurso: Aprenda a usar folhas de estilo para controlar a aparncia de websites Escrito e ministrado por Sander Lemos Mizael 2010-2012

Sobre o autor
Sander Lemos Mizael ps-graduando pela Veris IBTA, onde cursa MBA em
Gesto da Segurana da Informao. Atualmente atua como Analista Programador em projetos relacionados Certificao Digital.

Informaes na Internet
Perfil profissional e recomendaes: http://linkedin.com/in/sanderworks Projetos desenvolvidos: http://be.net/sanderworks

Sumrio
1 Introduo ................................................................................................. 4 1.1 Antes de Comear ............................................................................... 4 2 Caractersticas bsicas do XHTML ............................................................. 5 2.1 Aninhamento ...................................................................................... 5 2.3 Feche as tags ....................................................................................... 5 2.4 Use letras minsculas ......................................................................... 6 2.5 Elementos obrigatrios do XHTML ..................................................... 6 2.6 Definio de Tipo de Documento (DTD) ............................................. 7 XHTML 1.0 Strict ................................................................................... 7 XHTML 1.0 Transitional......................................................................... 8 XHTML 1.0 Frameset............................................................................. 8 2.7 XHTML na Prtica................................................................................ 8 Observao: O atributo xmlns ........................................................... 9 3 Cascading Style Sheets .......................................................................... 10 3.1 Estilos inline ...................................................................................... 10 Observao: A propriedade color ................................................... 11 3.2 Folhas de estilo incorporadas ........................................................... 12 Parada obrigatria .............................................................................. 14 Espao para anotaes ....................................................................... 14 3.4 Folhas de estilo externas .................................................................. 16 3.5 Tipos de mdia ................................................................................... 19 4 Desenvolvimento de um site completo ................................................... 21 5 Mensagem do autor ................................................................................ 21

1 Introduo
Bem-vindo ao minicurso de CSS 1! Trabalhei muito para criar o que espero ser uma experincia de aprendizagem divertida, informativa e desafiadora. O minicurso tem 8 horas de durao. Nesta apostila voc encontrar conceitos e exemplos de cdigo baseados na indstria. Escrevi de maneira clara e direta, usando as melhores prticas. Aqui voc aprender como controlar a aparncia de websites usando a linguagem CSS. Essa linguagem permite a separao entre a apresentao e o contedo das pginas Web. Durante o minicurso utilizaremos as linguagens XHTML 2 e CSS para criar websites. Saber HTML um pr-requisito vital para uma boa compreenso do curso.

1.1 Antes de Comear

Utilizaremos no minicurso dois aplicativos gratuitos para criar e testar pginas Web: Notepad++: um editor de cdigos fonte que substitui o Bloco de Notas e tem suporte a vrias linguagens de programao. Site oficial: http://notepad-plus-plus.org/ Mozilla Firefox: um navegador de Internet conhecido por ter alto nvel de segurana e eficincia. Site oficial: http://br.mozdev.org/

Verifique se seu computador possui estes aplicativos instalados. Se voc tiver alguma dvida, sinta-se vontade para perguntar ao instrutor.

1 2

CSS (Cascading Style Sheets): Folhas de Estilo Encadeadas. XHTML (Extensible HyperText Markup Language): Linguagem Extensvel de Marcao de Hipertexto.

2 Caractersticas bsicas do XHTML

A XHTML, uma linguagem recomendada pelo W3C 3, uma verso mais restrita e limpa da HTML. Neste tpico a linguagem XHTML ser abordada rapidamente por meio de comparaes com a HTML.

2.1 Aninhamento
Em HTML, alguns elementos podem estar indevidamente aninhados uns dentro dos outros, como isto:
<b><i>Este texto est em negrito e itlico</b></i>

Em XHTML, todos os elementos devem estar devidamente aninhados uns dentro dos outros, como isto:
<b><i>Este texto est em negrito e itlico</i></b>

2.3 Feche as tags

Elementos XHTML sempre devem ser fechados. Isto errado:
<p>Pargrafo Quebra de linha: <br> Imagem: <img src="primorweb.png" alt="Logotipo da PrimorWEB"> <ul> <li>Item 1 <li>Item 2 </ul>

O Consrcio World Wide Web (W3C) uma comunidade internacional que desenvolve padres com o objetivo de garantir o crescimento da web.

Isto certo:
<p>Pargrafo</p> Quebra de linha: <br /> Imagem: <img src="primorweb.png" alt="Logotipo da PrimorWEB" /> <ul> <li>Item 1</li> <li>Item 2</li> </ul>

2.4 Use letras minsculas

Elementos XHTML e seus atributos devem estar em letras minsculas. Isto errado:
<BODY> <P>Pargrafo</P> </BODY>

Isto certo:
<body> <p>Pargrafo</p> </body>

Todos os documentos XHTML devem ter uma declarao DOCTYPE 4. Os elementos html, head, title e body tambm devem estar presentes.

2.5 Elementos obrigatrios do XHTML

A declarao DOCTYPE no um elemento do XHTML. Voc vai aprender mais sobre o DOCTYPE no prximo tpico.

O DOCTYPE sempre deve ser inserido na primeira linha do documento:

<!DOCTYPE ...> <html> <head> <title>...<title> </head> <body></body> </html>

A DTD especifica a sintaxe de uma pgina web em SGML 5. Uma DTD do XHTML descreve, em linguagem precisa e legvel para o computador, a sintaxe de marcao XHTML permitida. Existem trs DTDs para o XHTML: STRICT TRANSATIONAL FRAMESET

2.6 Definio de Tipo de Documento (DTD)

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use a DOCTYPE 6 Strict quando voc quiser realmente uma marcao limpa, usando as tags apenas para marcar o contedo e a linguagem CSS para definir a apresentao da pgina.

SGML(Standard Generalized Markup Language): uma tecnologia utilizada para definir linguagens de marcao. 6 A declarao DOCTYPE especifica o tipo do documento por meio de uma referncia a um arquivo DTD.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use a DOCTYPE Transitional quando voc quiser poder usar os antigos recursos de formatao do HTML. XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use a DOCTYPE Frameset quando voc quiser usar frames HTML.

2.7 XHTML na Prtica

Execute o Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione H HTML. Agora digite o cdigo exibido na imagem acima.

Usaremos a DOCTYPE Strict em todas as pginas desenvolvidas durante o curso.

Crie uma pasta para salvar os documentos desenvolvidos, no se esquea de salvar e de testar as pginas no navegador Mozilla Firefox 7. Observao: O atributo xmlns Documentos XHTML so baseados em XML 8, por isso tem um X na sigla da linguagem:

HTML + XML = XHTML

Muitos tipos de documentos baseados em XML, entre eles o XHTML, precisam obrigatoriamente ter um atributo xmlns no elemento raiz:
<html xmlns="http://www.w3.org/1999/xhtml">

Verses atualizadas de outros navegadores tambm podem ser usadas para renderizar as pginas. 8 XML (Extensible Markup Language): Linguagem de Marcao Extensvel

3 Cascading Style Sheets

CSS (Cascading Style Sheets Folhas de Estilo Encadeadas) uma tecnologia do W3C que permite especificar a apresentao dos elementos em uma pgina Web (como fontes, posicionamento, cores, entre outros), separadamente da estrutura do documento. Se a aparncia de um site for determinada inteiramente por uma folha de estilo, o desenvolvedor pode simplesmente entrar com uma nova folha para modificar completamente a aparncia dele.

3.1 Estilos inline

H vrias maneiras de declarar estilos em documentos. Este tpico apresenta os estilos inline, que declaram o formato de um elemento especfico usando o atributo style da XHTML:

10

Pgina renderizada:

Os estilos inline no separam de verdade a apresentao do contedo. Para aplicar estilos em vrios elementos semelhantes, use folhas de estilo incorporadas ou folhas de estilo externas, que veremos mais frente. Observao: A propriedade color O valor da propriedade color do CSS pode ser definido de trs maneiras diferentes. Exemplo:
<!-- Trs maneiras diferentes de definir a cor vermelha --> <p style="color: red">Texto Vermelho</p> <!-- nome da cor em ingls --> <p style="color: #ff0000">Texto Vermelho</p> <!-- valor hexadecimal --> <p style="color: rgb(255,0,0)">Texto Vermelho</p> <!-- valor RGB -->

Os textos escritos em cinza no quadro acima so comentrios XHTML. Os navegadores no exibem comentrios nas pginas renderizadas, mas voc pode v-los se acessar o cdigo fonte delas. Ex.: Tecle Ctrl + U no Firefox. 11

3.2 Folhas de estilo incorporadas

Outra tcnica para usar folhas de estilo com folhas de estilo incorporadas, as quais permitem que se incorpore um documento CSS inteiro na seo head de um documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Minicurso de CSS - Folha de estilo incorporada</title> <!-- isto inicia a seo da folha de estilo --> <style type="text/css"> h1 { font-family: verdana, tahoma, sans-serif } em { font-weight: bold; /* isto um comentrio no CSS */ color: #000000; } p { font-size:13px; font-family: arial, sans-serif } .especial { color: green } </style> </head> <body> <!-- este atributo class especifica o estilo especial --> <h1 class="especial">Minicurso de CSS</h1> <p>Descrio do minicurso.</p> <h1>Outro ttulo</h1> <p class="especial"> Texto de <em>exemplo</em> bla bla bla bla bla bla bla bla bla bla... </p> </body> </html>

12

Copie o cdigo fonte da pgina e teste no navegador. O documento renderizado deve ficar assim:

A seo style define a folha de estilo incorporada. Os estilos colocados no head so aplicados a elementos correspondentes no documento inteiro, onde quer que apaream. O atributo type do elemento style especifica o tipo MIME 9, que descreve o contedo de um arquivo.

MIME (Multipurpose Internet Mail Extensions): Documentos CSS usam o tipo MIME text/css. Outros tipos MIME so image/gif, para imagens GIF; text/javascript, para linguagens de criao de scripts JavaScript; e outros.

13

Parada obrigatria Estamos em um momento crtico do curso, visando fortalecer ao mximo alguns conceitos e eliminar as dvidas, o resto deste tpico ser explicado oralmente pelo instrutor e exemplificado com algumas prticas. Alguns dos conceitos que devem ser bem compreendidos: Como usar os atributos id e class dos elementos; Como funciona a herana no CSS.

Aproveite o momento e faa muitas perguntas sobre os conceitos j vistos. Espao para anotaes _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________

14

_____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________

15

3.4 Folhas de estilo externas

As folhas de estilo externas so documentos separados que contm apenas regras CSS, com elas voc pode oferecer uma aparncia uniforme a todas as pginas de um site.

Execute o Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione C CSS. Agora digite o cdigo exibido na imagem acima e salve o arquivo com o nome estilos. O tamanho de fonte em (altura-M) normalmente definido como a altura da letra M maiscula. Para definir um elemento que exiba o texto em 150 por cento do tamanho padro do texto, o desenvolvedor poderia usar a sintaxe:
font-size: 1.5em /* alternativamente poderia usar font-size:150% */

A prxima figura contm um documento XHTML que referencia a folha de estilo externa que ns acabamos de criar: 16

No Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione H HTML. Agora digite o cdigo exibido na imagem acima e salve o arquivo com o nome externo. 17

Pgina renderizada:

Mouse sobre o link:

18

Todas as pginas de um website podem usar a mesma folha de estilo. Sempre use folhas de estilo externas quanto for desenvolver um site com mltiplas pginas. No documento XHTML, o elemento link usa o atributo rel para especificar um relacionamento entre o documento atual e outro documento. Nesse caso, declaramos que o documento vinculado uma stylesheet (folha de estilo) para esse documento.

3.5 Tipos de mdia

Modifique o arquivo estilos.css de modo que ele fique assim:

19

Os tipos de mdia CSS permitem que um programador decida a aparncia que um pgina deve ter, dependendo da mdia que for usada para exibi-la. Leiaute de impresso:

O tipo de mdia mais comum para um site screen (tela de computador). Outros tipos de mdia nas CSS so handheld (computadores de mo), braile (mquinas que podem ler ou imprimir pginas em braille), aural (para navegadores com sintetizador de voz), print (aparncia da pgina para impresso) e all (padro, se aplica a todos os tipos de mdia).

20

4 Desenvolvimento de um site completo

Agora que j entendemos como funciona o CSS, hora de bot-lo em prtica no desenvolvimento de um site completo (com documentos XHTML, folhas de estilo externas e imagens):

Aprenderemos e utilizaremos vrias propriedades do CSS, no abordadas na apostila, durante o desenvolvimento do site 10.

5 Mensagem do autor
Chegamos ao final do minicurso, se voc gostou, siga-me no Twitter: http://twitter.com/primorweb Sander L. M. ()

10

Voc pode efetuar o download do http://primorweb.com/templ/download/001.zip

site

pronto,

neste

link:

21