lugar agora ocupado pelos marcadores. Vamos acresentar um fundo branco para os itens da lista e tambem um quadradro preto. (Por que fazer isto? Simplesmente porque isto e possivel, sem qualquer motivo adicional.)Ate agora ainda nao definimos as cores para os links, entao esta e a hora: azul para links nao visitados e purpura para links ja visitados:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Minha primeira pagina 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 sao as mesmas que adotamos no nosso exemplo: azul para links nao visitados (ou visitados ha muito tempo) e purpura para links ja visitados.Em HTML, criamos hyperlinks com o elemento <a>, assim para especificar cores para links estabelecemos regras CSS para "a". Para fazermos diferenciacao entre links visitados e nao visitados estao previstas duas "pseudo-classes" CSS (:link e :visited). Elas sao chamadas de "pseudo-classes" para diferencia-las das classe de atributos, que sao usadas nos codigo HTML, por exemplo a class="navbar" do nosso exemplo.PASSO 6: ADICIONANDO UMA LINHA HORIZONTALA ultima regra para estilizacao que escreveremos em nosso exemplo sera para adicionar uma linha horizontal separando o texto principal da assinatura ao pe da pagina. 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 pagina 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 varias paginas.PASSO 7: COLOCANDO A FOLHA DE ESTILOS EM UM ARQUIVO SEPARADOTemos agora um arquivo HTML com uma folha de estilos incorporada. Quando nosso site crescer, provavelmente muitas paginas deverao compartilhar a mesma folha de estilos. Existe uma maneira bem mais racional do que sair copiando a folha de estilos em cada uma das paginas do Web site: se colocarmos a folha de estilos em um arquivo separado, todas as paginas do site poderao 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