Esta é a tradução do tutorial "Starting with HTML + CSS " de autoria de Bert Bos publicado no site do W3C.
1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/Style/Examples/011/firstcss e os seus direitos são conforme:
Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software
2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.
3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
Este documento foi traduzido em 12 de dezembro de 2004 e atualizado em 27 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.
Este breve tutorial destina-se àqueles que ainda não escreveram sua primeira folha de estilos e desejam começar a projetar com CSS.
Aqui você não encontrará explicações avançadas sobre CSS. Este tutoriaI explica como criar um arquivo HTML, um arquivo CSS e como integrá-los de maneira a que funcionem juntos. Após estas noções básicas você poderá ler outros tutoriais e então incrementar os arquivos HTML e CSS aqui criados. Ou ainda, poderá passar a usar um editor adequado para HTML ou CSS, que vai auxiliá-lo a construir sites mais complexos.
Abaixo uma visão da página web que construiremos ao longo deste tutorial:
A página web pronta, com seu layout e cores definidas por CSS.
Reconheço que não se trata de uma bela página. ☺
Adotei como convenção ao longo do tutorial um sinal de "perigo" como este ao lado esquerdo e uma fonte menor, para indicar um texto opcional contendo uma explicação extra sobre os códigos HTML e CSS do exemplo. O sinal de "perigo" indica um texto contendo técnicas mais avançadas.
Para acompanhar os passos deste tutorial sugiro que você use a mais simples das ferramentas disponíveis isto é, o Notepad (Windows), TextEdit ( Mac) ou KEdit (KDE) pois servirão perfeitamente aos nossos propósitos. Depois que você tiver dominado os fundamentos básicos, talvez queira utilizar ferramentas mais avançadas ou mesmo programas comerciais tais como, Style Master, Dreamweaver ou GoLive. Mas, para seus primeiros passos com CSS não será interessante utilizar-se de ferramentas com recursos mais sofisticados e avançados sobre os quais você não tenha total conhecimento e domínio.
Não use processadores de textos tais como Microsoft Word ou OpenOffice. Eles geram arquivos que os web browsers não conseguem interpretar. Para códigos HTML e CSS, precisamos de arquivos de texto simples.
O passo 1 consiste em abrir seu editor de texto (Notepad, TextEdit, KEdit, ou outro de sua preferência), e digitar o código mostrado abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Minha primeira página CSS</title> </head> <body> <!-- Menu de navegacao do site --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="pensamentos.html">Pensamentos</a> <li><a href="cidade.html">Minha cidade</a> <li><a href="links.html">Links</a> </ul> <!-- Conteudo --> <h1>Minha primeira página CSS</h1> <p>Bem vindos à minha página estilizada! <p>Minha página não contém imagens, mas pelo menos está estilizada. Ela contém links, ainda que eles não levem a lugar algum… <p>Deveria haver mais textos aqui porém eu ainda não decidi o que escrever. <!-- Date e assine sua página, isto é educado! --> <address>Construida em 15 de dezembro de 2004<br> por mim mesmo.</address> </body> </html>
Na realidade você não precisa digitar o código, simplesmente copie e cole no editor.
A primeira linha do código HTML acima informa ao browser qual é o tipo de HTML do código
(DOCTYPE significa DOCument TYPE - DOCumento TIPO). No nosso caso trata-se de HTML
version (versão) 4.01.
As palavras dentro dos sinais < e > são chamadas de tags e, como você pode notar, o documento está contido dentro das tags <html> e </html>. Entre as tags <head> e </head> poderão estar contidas várias informações que não são mostradas na tela. Note que ali está contido o título (title) do documento e mais adiante você verá que nossa folha de estilos também será colocada ali.
A tag <body> contém o texto do documento em si. A princípio tudo que está dentro dela será mostrado na tela exceto textos colocados entre os sinais <!-- e -->, que se destinam a abrigar comentários no código. O browser ignora os comentários.
Sobre as demais tags no exemplo, <ul> é para exibir “Listas não ordenadas”, isto é, uma lista na qual os seus itens não são numerados. A tag <li> é para cada um dos "Itens da lista". A tag <p> é para “Parágrafos.” E, a tag <a> é para “Âncoras”, e servem para criar hyperlink.
O código HTML digitado no NotePad.
Se você quiser saber o significado dos nomes dentro dos sinais <…> (nomes das tags) um bom lugar para consulta e leitura é Primeiros passos com
HTML. Mas, a seguir alguns comentários sobre a estrutura do HTML da nossa página.
Observe que eu não usei tags de fechamento para os elementos “li” e “p”. Em HTML (ao contrário de XHTML), é permitido omitir as tags de fechamento </li> e </p> e eu as omiti com a finalidade de tornar o texto do código mais legível. Contudo você pode usar as tags de fechamento se assim preferir.
Vamos admitir que este será um layout de página que se repetirá várias vezes no Web site. Como é bastante comum em Web sites as páginas se repetem com um mesmo menu de navegação e assinatura e uma área de conteúdo.
Agora selecione, no menu "Arquivo" ("File") "Salvar como..." (“Save As…”), escolha um diretório e pasta (salvar no Desktop é bem apropriado neste caso) e grave ("salve") o arquivo com o nome de “minhapagina.html”. Não feche o editor, pois iremos precisar dele mais adiante.
(Se você estiver usando o TextEdit para Mac, você deverá informar ao TextEdit que o texto a gravar é do tipo "plain text", para isto vá ao menu Format e selecione “Make plain text”. A seguir ao salvar o texto e o TextEdit propor adicionar a extensão “.txt” ao arquivo, escolha “Don't append.” Algumas vezes o Mac dá uma de inteligente…)
A seguir abra o arquivo que você salvou em um browser. Você pode fazer isto da seguinte maneira: procure o arquivo com o gerenciador de arquivos (Windows Explorer, Finder ou Konqueror) e dê um ou dois cliques de mouse sobre o arquivo “minhapagina.html”. Esta ação deverá fazer com que o arquivo seja aberto no browser default do seu sistema. (Se isto não acontecer abra o seu browser e arraste o arquivo para dentro dele.)
Você constatará tratar-se de uma página visualmente inexpressiva...
Você muito provavelmente viu algum texto na cor preta sobre um fundo branco, mas isto vai depender de como seu browser está configurado. Uma maneira bem fácil de acresentar estilização à página é adicionar algumas cores a ela. (Mantenha seu browser aberto, vamos usá-lo novamente mais adiante.)
Comecemos com uma folha de estilos incorporada ao arquivo HTML. Mais a frente, separaremos os arquivos HTML e CSS. Separar os arquivos é uma boa técnica, pois isto permite usar a mesma folha de estilos para vários arquivos HTML: você precisará escrever uma só folha de estilos. Por ora vamos colocar nossa CSS no mesmo arquivo HTML.
Vamos precisar inicialmente do elemento <style> no nosso arquivo HTML. A folha de estilos será colocada dentro deste elemento. Então mãos a obra! volte ao seu editor e acresente mais cinco linhas de código dentro da tag "head" do seu arquivo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
As linhas a acresentar estão destacadas acima na cor vermelha. A primeira linha informa que trata-se de uma folha de estilos escrita para CSS (“text/css”). A segunda linha diz que as regras de estilo a seguir, aplicam-se ao elemento “body”. A terceira determina que os textos serão em cor purple (púrpura) e a linha a seguir coloca a cor #d8da3d (amarela esverdeada) para o fundo da página.
Em
CSS as folhas de estilos são constituidas de regras. Cada regra compõe-se de três partes:
No exemplo nota-se que as regras podem ser combinadas. Ali estão escritas duas propriedades. Poderíamos ter escrito duas regras separadamente sem combiná-las:
body { color: purple }
body { background-color: #d8da3d }
mas, como as duas regras valem para o elemento body, escrevemos uma só vez o elemento e colocamos as propriedades com seus valores, juntas. Para saber mais sobre seletores consulte capítulo 2 do Lie & Bos.
A cor de fundo (background-color) do elemento body valerá para todo o documento. Nós não escrevemos nenhuma regra adicional colocando fundo de outra cor para os outros elementos da página (p, li, address…) então por 'default' eles não terão cor de fundo (ou seja: serão transparentes). A propriedade 'color' determina a cor dos textos para o elemento body e todos os elementos contidos em body herdarão esta cor, a menos que uma outra regra CSS determine uma cor diferente para qualquer elemento na página. (Mais adiante nós escreveremos uma regra assim.)
Agora, salve seu arquivo (use “Save” no menu File ) e volte à janela do seu browser. Dê um "Reload" (Atualizar) na página e seu aspecto mudará, mostrando as cores adicionadas pelas regras CSS escritas. À exceção da lista de links na parte superior, o texto deverá estar na cor púrpura sobre um fundo amarelo esverdeado.
A página com cores adicionadas, renderizada em um browser.
Cores podem ser escritas em CSS de variadas maneira. Neste exemplo mostrei duas delas: pelo nome da cor (“purple”) e por seu código hexadecimal
(“#d8da3d”). Existem cerca de 140 nomes para cores e o código hexadecimal permite especificar mais de 16 milhões de cores. Mais explicações sobre cores em Adicionando um toque de estilo.
Outra coisa bem fácil de se estilizar são as fontes para os elementos da página. Vamos escolher fonte “Georgia” para os textos, exceto para o cabeçalho h1 ao qual atribuiremos a fonte “Helvetica.”
Você nunca terá como saber quais são as fontes que os visitantes do seu site têm instaladas em suas máquinas, por isso é de boa técnica sempre especificarmos fontes alternativas nas folhas de estilos: se a fonte Georgia não estiver disponível as fontes Times New Roman ou Times irá substituí-la sem grandes prejuízos e ainda mais, se ambas também estiverem indisponíveis o browser do visitante usará uma fonte (with serif) com serifas. Se a fonte Helvetica não estiver instalada, as fontes Geneva, Arial e SunSans-Regular são similares e se nenhuma delas estiver disponível o browser usará uma fonte sem serifas.
No seu editor de textos acresente mais estas linhas:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
Salve o arquivo, abra novamente o browser e dê um "Reload" (Atualizar) na página para visualizar as fontes diferentes para o cabeçalho h1 e o restante do texto.
Agora cabeçalho e texto estão com fontes diferentes.
A lista no topo da página destina-se a se constituir no menu de navegação. Web sites em geral tem uma barra de navegação disposta horizontalmente no topo ou um menu na lateral da página e nossa página também terá seu menu de navegação. Usaremos um menu na lateral esquerda, por considerarmos mais interessante que uma barra no topo...
Nosso menu já esta no código HTML da página. Ele é a lista <ul> no topo. Os links ali inseridos não levam a lugar algum pois nosso “Web site” tem uma só página, mas isto não é importante agora. Em um Web site real, é óbvio, não devemos ter nenhum link "quebrado".
Agora precisamos mover a lista para a esquerda e o restante do texto para a direita com a finalidade de abrir espaço para a lista. As propriedades CSS que usaremos para isto são 'padding-left' (para mover o texto para a direita) e 'position', 'left' e 'top' (para posicionar o menu).
Existem outras maneiras de se fazer isto. Se você der uma olhada em “column” ou “layout” na página Aprendendo CSS , vai encontrar vários templates para layout. Mas para o nosso exemplo as propriedades citadas acima são adequadas.
No editor de texto adicione mais estas linhas no arquivo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
Salve o arquivo e dê "Reload" (Atualizar) no browser para ver o menu a esquerda do texto. Agora nossa página já esta mais interessante, não é mesmo?
O texto principal à direita e a lista de links à esquerda.
A regra 'position:
absolute' determina que o elemento ul seja posicionado na página independentemente de qualquer texto que venha antes ou depois no código HTML e as propriedades 'left' e 'top' indicam qual a posição a ocupar. No nosso caso, 2em abaixo do topo e 1em para a direita do lado esquerdo da janela do browser.
'2em' significa 2 vezes o tamanho da fonte adotada. Por exemplo: se o menu está com fonte de 12 points, 2em equivalem a 24 points. A unidade 'em' é muito usada em CSS, pois ela permite que as medidas se adaptem automaticamente ao tamanho de fonte que os usuários costumam utilizar em suas preferências pessoais. A maioria dos browsers possuem a facilidade de permitir que o usuário aumente ou diminua o tamanho de fonte ao visualizar uma página web: faça você mesmo uma experiência em seu browser aumentando e diminuindo o tamanho da fonte e observe como o tamanho do nosso menu acompanha o aumento e diminuição da fonte. Isto não aconteceria se tivessemos usado um tamanho para o menu em pixel.
O menu de navegação mais se parece com uma lista do que com um menu. Vamos estilizá-lo. Comecemos removendo os marcadores de lista e deslocando o menu mais para a esquerda, para o lugar agora ocupado pelos marcadores. Vamos acresentar um fundo branco para os itens da lista e também um quadradro preto. (Por que fazer isto? Simplesmente porque isto é possível, sem qualquer motivo adicional.)
Até agora ainda não definimos as cores para os links, então esta é a hora: azul para links não visitados e púrpura para links já visitados:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
Tradicionalmente os
browsers renderizam os hyperlinks com um sublinhado e com cores. Usualmente as cores adotadas pelos browsers são as mesmas que adotamos no nosso exemplo: azul para links não visitados (ou visitados há muito tempo) e púrpura para links já visitados.
Em HTML, criamos hyperlinks com o elemento <a>, assim para especificar cores para links estabelecemos regras CSS para "a". Para fazermos diferenciação entre links visitados e não visitados estão previstas duas "pseudo-classes" CSS (:link e :visited). Elas são chamadas de "pseudo-classes" para diferenciá-las das classe de atributos, que são usadas nos código HTML, por exemplo a class="navbar" do nosso exemplo.
A última regra para estilização que escreveremos em nosso exemplo será para adicionar uma linha horizontal separando o texto principal da assinatura ao pé da página. Usaremos a propriedade 'border-top' para colocar uma linha horizontal pontilhada acima do elemento <address>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[etc.]
Aqui completamos a folha de estilos. A seguir vamos ver como colocar a folha de estilos em um arquivo separado e com isto usar uma folha para várias páginas.
Temos agora um arquivo HTML com uma folha de estilos incorporada. Quando nosso site crescer, provavelmente muitas páginas deverão compartilhar a mesma folha de estilos. Existe uma maneira bem mais racional do que sair copiando a folha de estilos em cada uma das páginas do Web site: se colocarmos a folha de estilos em um arquivo separado, todas as páginas do site poderão conter um link apontando para este arquivo.
Para nosso arquivo de folha de estilo precisaremos criar um outro arquivo de texto. Escolha “New” no menu File do seu editor de texto (Se estiver usando o TextEdit, não se esqueça do plain text usando o Format menu.)
A seguir, no editor, copie tudo o que estiver dentro do elemento <style> no HTML e cole no arquivo novo que você acabou de criar. Não copie as tags <style> e </style>. Elas são do HTML e não pertencem ao arquivo CSS. Agora na nova janela do editor que você abriu deverá estar com esta folha de estilos:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Escolha “Save As…” no menu File, e salve com o nome “meuestilo.css” no mesmo diretório/pasta onde está o arquivo minhapagina.html.
Agora volte para o arquivo HTML. Apague tudo que estiver dentro do elemento <style> incluindo <style> e </style> e coloque no lugar um elemento <link> como mostrado abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Minha primeira página CSS</title> <link rel="stylesheet" href="meuestilo.css"> </head> <body> [etc.]
Este link informa ao browser que que a folha de estilos para a página está em um arquivo chamado “meuestilo.css” e como nenhum diretório está indicado no caminho do link o browser procurará no mesmo diretório do arquivo HTML.
Se você salvar o arquivo HTML e der um "Reload" (Atualizar) na página, nenhuma mudança ocorrerá: a página continua estilizada da mesma maneira mas agora as regras de estilo estão em um arquivo externo.
O resultado final
O próximo passo agora é carregar os arquivos criados, minhapagina.html e meuestilo.css para seu Web site. (Bem, talvez você queira fazer algumas mudanças antes...) Agora, como fazer isto vai depender do seu provedor Internet.
Para uma Introdução às CSS ver capítulo 2 de Lie & Bos, ou Dave Raggett's introdução às CSS.
Outras informações e tutoriais encontram-se na página aprendendo CSS .
Bert Bos CSS Contact
Criado em 05 Abr 2004. Atualizado $Data: 2004/12/25 11:53:18 $ GMT
