solutions/css/selectors/exercise3.html

<!DOCTYPE html>
<html>
<head>
    <title>Exercise #3: Styling boxes</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            margin: 5px;
            float: left; /* float divs next to each other */
            font-family: Verdana, sans-serif;
            font-weight: bold;
            line-height: 50px; /* align text vertically (this works only for a single line of text) */
            text-align: center;
        }

        .even {
            background-color: #0033cc;
        }

        .odd {
            background-color: #ff3333;
        }

        .smallnum {
            font-size: 0.7em;
        }

        .largenum {
            font-size: 1.3em;
        }

        #lucky7 {
            color: white;
        }
    </style>
</head>
<body>
<div class="odd smallnum">1</div>
<div class="even smallnum">2</div>
<div class="odd smallnum">3</div>
<div class="even">4</div>
<div class="odd">5</div>
<div class="even">6</div>
<div class="odd" id="lucky7">7</div>
<div class="even largenum">8</div>
<div class="odd largenum">9</div>
<div class="even largenum">10</div>
</body>
</html>