EX1 Workshop CSS3

<!DOCTYPE html>
<html>
    <head>
        <title> Els borders fins avui eren una punyeta </title>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                font-family: sans-serif;
            }
            div {
                box-sizing:border-box;
                width: 150px;
                height: 150px;
                background: green;
                padding:20px;
                border: 10px solid black;
            }
            #marro {
                background: Chocolate;
            }
        </style>
    </head>
    <body>
        <h1> Exercici: borderlands! </h1>
        <p> Part 1: Afegeix un border negre de 10px a tots els elements </p>
        <p> Part 2: Redueix el tamany dels elements perque tornin a fer 120*120 sense treure el border </p>
        <p> Part 3: Dona 20 de padding a tots els elements. </p>
        <p> Part 4: Redueix el tamany dels elements perque tornin a fer 120*120 sense treure el padding </p>
        <p> Part 5: Deixa't il·luminar per la magia de CSS3</p>
        <div> Oye, ¿son invisibles o es que están detrás? </div>
        <div id="marro"> Detrás</div>
        <div> ¡Ya me han oído!</div>
    </body>
</html>