Untitled

 <!DOCTYPE html>
 <html>
 <head>
    <title>
    Classes e IDs
    </title>
    <meta charset="utf-8">


        <style type="text/css">
        .azul{
            color:red;
        }

        #principal{
            background: lightgray;
        }

        #topo{
            background: lightgray;
        }

        #conteudo{
            background: darkgray;
        }

        .produto{
            background: lightblue;
            margin: 10px;
        }

        #rodape{
            background: lightgreen;
        }

        #span{
            background: pink;
        }

        #span2{
            background: lightpink;
        }

        </style>
 </head>


     <body>

    <div id="topo">
        <img src="imagens/amazon.png" width="200">
        <ul>
            <li>Menu</li>
            <li>Produtos</li>
            <li>Contato</li>
        </ul>

    </div>

    <div id="conteudo">
        <div class="produto">
            Produto 1
        </div>

        <div class="produto">
            Produto 2
        </div>

        <div class="produto">
            Produto 3
        </div>
    </div>

    <div id="rodape">
        Todos os direitos reservados
    </div>

    <span id="span">
        Promoções
    </span>
    <span id="span2">
        Novidades
    </span>


     </body>


 </html>