Bom, o que vou ensinar aqui é simples, é como criar um menu, que quando você por o cursor em cima, ele baixe com outros menus e outros links, um efeito muito bonito visualmente, sem contar que o menu é uma das partes mais importantes de um site, pois é nele em que o usuário terá acesso a todo o seu web site. Então, there we go now!

Básico:

Bem, estaremos criando um documento HTML do zero, e o CSS também, vou começar pelo básico, então aí vamos nós!
- HTML: O HTML é uma linguagem de marcação, não é considerada uma linguagem de programação, e sim de marcação de texto, ela faz marcações com tags, que são códigos que marcam o texto para que algum efeito ou estilo de formatação seja aplicado no texto a ser exibido na tela.
- Css: O CSS já é o tipo de linguagem que formata o HTML, é como se vc escrevesse um texto numa folha de papel, e depois saísse marcando com marca texto, só que na web, o HTML deve conter apenas informações, contendo a estrutura do site, e o CSS deverá ser o responsável para estruturar um site. Vou dar um exemplo:

Site apenas com HTML sem utilizar o CSS:

Spoiler:

Agora veja como ficaria o mesmo site, com o CSS, que iria "estilizar" o site:

Spoiler:

Essa é a diferença básica entre o HTML e o CSS.

Terminamos o básico!

---

Estrutura:

Agora irei explicar como funciona a estrutura de um documento HTML e de um documento CSS:

HTML: O HTML é constituído de Tags e propriedades que definem essas tags, ou adicionam outras propriedades, vou dar um exemplo:

Spoiler:

Agora, crie um arquivo de texto com o bloco de notas, copie e cole todo o código acima neste arquivo e salve-o com o o nome index e a extensão .html , lembrando que você precisa habilitar, em suas opções de pastas, a função de poder editar as extensões dos arquivos.

Agora execute seu arquivo em um navegador, e verá o resultado.

---

Bom, então agora explicaremos o que cada código desse representa:

Spoiler:

Sabendo o básico do HTML, veremos agora o básico do CSS!

---

Já sabemos o básico do HTML e agora veremos como estilizar essa página que criamos.
O documento CSS que utilizaremos para estilizar o nosso documento HTML ainda não foi criado, mas já especificamos no nosso documento com a tag:

Código:

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

Essa tag indica que o arquivo "folha.css" será a nossa folha de estilos CSS, lendo essa tag do começo ao fim, leriamos assim: link, diz o tipo de tag, href, dá a referência do local onde se encontra o arquivo, seu nome e seu formato, rel, diz o tipo de relação entre os documentos, que é de folha de estilos (stylesheet), type, diz o tipo de arquivo que estamos usando, um arquivo de texto em css.

Agora criaremos nosso arquivo CSS.

---

1. No mesmo local onde criou o arquivo "index.html", crie um arquivo com o nome "folha.css".
   
2. Agora entre no arquivo CSS utilizando o bloco de notas, ou o Notepad++, que é um programa igual ao notepad, só que próprio pra editar códigos.
   
3. Agora que seu arquivo existe, e está ligado ao seu documento HTML, ele irá precisar de atributos para estilizar o seu site.
   
   • Entre no arquivo "folha.css" e digite o seguinte código:
     

     Código:

     body {
background-color:#CCCCCC;
}

   • Agora se você salvar e abrir novamente seu site, verá que o fundo do seu site mudou de cor, se deu certo, você fez corretamente! Agora o fundo de cor do seu site está mais ou menos dessa cor:||||||||||||||||||||||||||||||||.
     
   • Agora vamos explicar uma coisa, lá no código falamos de uma tag chamada DIV, esta é uma das tags que mais utilizaremos em sites, e que mais tem utilidade. Uma div é uma divisão dentro do site, com ela podemos criar botões, caixas, menus, ou apenas separar atributos, textos, ou áreas específicas do nosso site. Essa tag DIV pode ser amplamente explorada e estilizada no nosso CSS, vamos agora definir um tamanho para esta div, e uma coloração pra ela, pra que nós possamos vê-la!
     
   • Adicione o seguinte código ao seu CSS:
     

     Código:

     
#meutexto {
    background-color:#ff0000;
    width:200px;
    height:54px;
    margin:auto;
    border-color:#000000;
    border-radius:8px;
    border-style:dotted;
    border-width:1px;
}


   • Agora adicione na tua propriedade body o código a seguir:
     

     Código:

     
    width:100px;
    height:800px;
    margin:auto;
    display:table;


   • Se você fez tudo corretamente, seu código estará assim:
     

     Código:

     
body {
    background-color:#CCCCCC;
    width:100px;
    height:800px;
    margin:auto;
    display:table;
}

#meutexto {
    background-color:#ff0000;
    width:200px;
    height:54px;
    margin:auto;
    border-color:#000000;
    border-radius:8px;
    border-style:dotted;
    border-width:1px;
    text-align:center;
}


   • Agora teste e veja o resultado!
     

Agora explicaremos para o que cada código serviu!

Spoiler:

---

• Agora, estaremos adicionando o menu e tirando o texto de dentro da div, já que já mostramos como o código funciona, não estarei explicando todo o resto do código que adicionaremos agora pois é uma parte um pouco mais avançada, mas basicamente, estaremos adicionando gradiente compatível com a maioria dos navegadores atuais, adicionando uma lista, que será nosso menu, e estilizando tal para que vire um menu horizontal com drop down, utilizando classes ao invés de IDs que são representadas por #, as classes são representadas por "." no CSS.
  
  Vá no código HTML na parte:
  

  Código:

  
<div id="meutexto">
<p>Nosso primeiro parágrafo.</p>
</div>


  Exclua esse código e adicione o código a seguir:
  

  Código:

  
<nav>
  <ul class="menu">
      <li><a href="#">Início</a></li>
      <li><a href="#">Notícias</a></li>
           <li><a href="#">Downloads</a>
              <ul>
                     <li><a href="#">Baixar Library Files</a></li>
                     <li><a href="#">Baixar Eclipse</a></li>
                     <li><a href="#">Baixar Vídeos</a></li>                   
               </ul>
         </li>
      <li><a href="#">Fotos</a></li>
      <li><a href="#">Contato</a></li>               
</ul>
</nav>


• Agora delete todo o código no arquivo CSS e cole o código a seguir:
  

  Código:

  
body {
    width:400px;
    height:800px;
    margin:auto;
}

*{margin: 0; padding: 0;}

.menu{
   list-style:none;
   border:1px solid #c0c0c0;
   float:left;
}

.menu li{
   position:relative;
   float:left;
   border-right:1px solid #c0c0c0;
}

.menu li a{
   color:#333;
   text-decoration:none;
   padding:5px 10px;
   display:block;
}

.menu li a:hover{
   background:#333;
   color:#fff;
   -moz-box-shadow:0 3px 10px 0 #CCC;
   -webkit-box-shadow:0 3px 10px 0 #ccc;
   text-shadow:0px 0px 5px #fff;
   }

.menu li ul{
   position:absolute;
   top:25px;
   left:0;
   background-color:#fff;
   display:none;
}

.menu li:hover ul, .menu li.over ul{
   display:block;
}

.menu li ul li{
   border:1px solid #c0c0c0;
   display:block;
   width:150px;
}


• Isso já irá bastar pra que seu menu fique muito legal! Mas existe um problema, utilizamos formas no CSS que o nosso grande vilão, o navegador (se é que pode ser chamado assim ) Internet Explorer, não irá ler, então adicionaremos alguns outros códigos pra que se alguma pessoa tentar acessar nosso site de um "navegador" como esse ou mais antigo, ela ainda consiga utilizar o nosso site!
  - Então vamos lá, no HTML, após o código a seguir:
  

  Código:

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


  Adicione o código:
  

  Código:

  
    <!--[if lte IE 8]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]--> 


  Esse código é uma variante, "se" acaso alguém tentar utilizar seu site de um navegador mais antigo, ou do Internet Explorer, ela ainda sim terá uma exibição agradável!
  

Fim!

Por enquanto é só pessoal! Talvez tenha sido cansativo para alguns, mas esse tutorial alarga bem o seu passo em rumo a sites profissionais em seus projetos!

Pra quem gosta de estudar (como eu ) aí vai também o link de um dos sites mais legais pra quem quer ficar por dentro destes códigos: Site do Maujor, esse cara é uma das mentes da web do Brasil! Você encontrará muita coisa e muito conteúdo além deste que lhes passei aqui no tópico!

---

Códigos Completos:

Eu não iria adicionar os códigos completos, já que ensinei como fazê-lo, imagino que as pessoas teriam que fazer elas mesmas, pra pelo menos conseguir aprender algo do que estão utilizando, mas sinceramente, fica a cargo de cada um!

Códigos:
HTML:

Spoiler:

CSS:

Spoiler:

---

Próxima aula:
A próxima dependerá da repercussão dessa, e das dúvidas que aqui, imagino eu, serão postadas, então se tem dúvidas ou pedidos a hora de fazer é agora! Pergunte, opine, sugira, e tudo será anotado e adicionado na pauta para a próxima aula.

Créditos:

---

---

Valeu! Tudo vai depender das dúvidas e dos pedidos!

Uma observação, no HTML5 não é necessário isso na tag do CSS:

Código:

type="text/css"

Porque não existe nenhum outro stylesheet sem ser CSS.
Ficando assim:

Código:

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

+1 Crédito pelo tutorial ^^

Sim, correto amigo, mas levando em consideração que alguns navegadores ainda não implantaram completamente o html5, temos que utilizar sim para evitar erros de syntax desnecessários.

O [type="text/css"] é tão necessário quanto o erro de utilizar /> no HTML5, os dois serão ignorados por navegadores mais modernos, mas serão utilizados por navegadores mais antigos e pelo querido Internet Explorer.