Mas, para seus primeiros passos com CSS nao sera interessante utilizar-se de ferramentas com recursos mais sofisticados e avancados sobre os quais voce nao tenha total conhecimento e dominio.Nao use processadores de textos tais como Microsoft Word ou OpenOffice. Eles geram arquivos que os web browsers nao conseguem interpretar. Para codigos 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 preferencia), e digitar o codigo mostrado abaixo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Minha primeira pagina 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 pagina CSS</h1><p>Bem vindos a minha pagina estilizada!<p>Minha pagina nao contem imagens, mas pelomenos esta estilizada.Ela contem links, ainda que eles nao levema lugar algum...<p>Deveria haver mais textos aqui porem euainda nao decidi o que escrever.<!-- Date e assine sua pagina, isto e educado! --><address>Construida em 15 de dezembro de 2004<br> por mim mesmo.</address></body></html>Na realidade voce nao precisa digitar o codigo, simplesmente copie e cole no editor.A primeira linha do codigo HTML acima informa ao browser qual e o tipo de HTML do codigo (DOCTYPE significa DOCument TYPE - DOCumento TIPO). No nosso caso trata-se de HTML version (versao) 4.01.As palavras dentro dos sinais < e > sao chamadas de tags e, como voce pode notar, o documento esta contido dentro das tags <html> e </html>. Entre as tags <head> e </head> poderao estar contidas varias informacoes que nao sao mostradas na tela. Note que ali esta contido o titulo (title) do documento e mais adiante voce vera que nossa folha de estilos tambem sera colocada ali.A tag <body> contem o texto do documento em si. A principio tudo que esta dentro dela sera mostrado na tela exceto textos colocados entre os sinais <!-- e -->, que se destinam a abrigar comentarios no codigo. O browser ignora os comentarios.Sobre as demais tags no exemplo, <ul> e para exibir Listas nao ordenadas, isto e, uma lista na qual os seus itens nao sao numerados. A tag <li> e para cada um dos "Itens da lista". A tag <p> e para Paragrafos. E, a tag <a> e para Ancoras, e servem para criar hyperlink.O codigo HTML digitado no NotePad.Se voce quiser saber o significado dos nomes dentro dos sinais <...> (nomes das tags) um bom lugar para consulta e leitura ePrimeiros passos com HTML. Mas, a seguir alguns comentarios sobre a estrutura do HTML da nossa pagina.O elemento ul marca uma lista contendo um hiperlink por item. Esta lista com seus itens se constituira no "menu de navegacao do site", com links para outras paginas do nosso (hipotetico) Web Site. Provavelmente todas as paginas do site conterao um menu igual a este.Os elementos h1 e p marcam o conteudo da pagina e a assinatura no rodape da pagina (address) sera igual para todas as paginas do site.Observe que eu nao usei tags de fechamento para os elementos li e p. Em HTML (ao contrario de XHTML), e permitido omitir as tags de fechamento