Como no plano anterior usamos as tags para montar a estrutura da página:

A tag: "" dentro do head .**

Para que a página do navegador identifique nosso idioma usamos a tag:

<meta charset="UTF-8">.

Criamos um arquivo CSS que é a folha de estilo da página e fazemos a ligação no HTML dentro do

, dessa forma:

  <link rel="stylesheet" href="reset.css"> = Usamos essa tag para limpar o estilo da página própio.
<link rel="stylesheet" href="style.css">

"href" Significa endereço, ou onde queremos ter ligação com o css.
<head> é onde queremos passar as informações para o navegador. 
    E <header> é o cabeçalho da página, ou seja o  topo.

Tag para fazer listas ordenadas e não ordenadas:

    Não ordenadas : <ul></ul>.
    Ordenadas: <ol><ol>.
    Usamos <li></li> para fazer um link dentro das listas.
    Usamos a tag <nav></nav> para envolver toda lista de navegação para mexer no css.

    No css usamos a tag: display: inline; para deixar os itens do lado um do outro e display: block; para abaixo um do outro.

    Usamos a tag da <div></div> para limitar um conteúdo no CSS. E colocamos uma class com nome para referenciar no css através do:   .(nome)

    Usamos a tag <main></main> quando queremos destacar um item da página como mais importante.
    No arquivo produtos.css, adicione uma borda aos itens da lista de produtos:

border: 2px solid #000000; border-radius: 10px; para arredondar todas bordas.

    Usamos hover: Para quando passarmos o mouse ter aquele efeito, isso usamos no css
    Usamos active: Para ter efeito quando clicarmos no elemento.

    Para fazermos o rodapé da página usamos a tag <footer></footer>.

Usamos o site da Unicode.com para pegar códigos de símbolos que queremos.