CSS Devtools Walkthrough

<!doctype html>
<link href="http://fonts.cdnfonts.com/css/harry-potter" rel="stylesheet">
<html>
    <head>
        <title>Devtools walkthrough</title>
            <style>
                @import url('http://fonts.cdnfonts.com/css/harry-potter');
                    .personale {
                        border-top: 2px palegreen dotted;
                        border-bottom: 2px palegreen dotted;
                        border-right: 3px palegreen dashed;
                        border-left: 3px palegreen dashed;
                        width:300px;
                        padding: 2em;}

                    .gialloso {
                        background-color: #ff0;
                        color:maroon
                    }

                    span:hover {
                        font-style: italic;
                        text-decoration: underline;
                        text-decoration-color: black;
                    }

                    .harry {
                        font-family: 'Harry Potter', sans-serif;
                    }
            </style>
    </head>
<body>
    <h1 class="harry">Hogwarts CSS School</h1>
    <aside>
        <ul>
            <li>
                <div class="personale">
                <span>Trovami!</span>
                </div>
            </li>

        </ul>
    </aside>
</body>
</html>