solutions/css/selectors/exercise1.html

<!DOCTYPE html>
<html>
<head>
    <title>Exercise #1: Boxes and spacing</title>
    <style>
        body {
            background-color: #f0f8ff;
        }

        div {
            width: 75%;
            min-width: 500px;
            border: 1px solid #333333;
            margin-top: 1em;
            padding: 0.5em;
            background-color: white;
        }

        span {
            font-weight: bold;
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
    </style>
</head>
<body>

<h1>News</h1>

<div>
    <h2>News heading 1</h2>

    <p>
        Lorem <span style="background-color: #fdca96;">ipsum</span> dolor sit amet, consectetur adipiscing elit. Proin
        lacinia lorem eu porttitor luctus. Sed ac mauris vitae arcu consectetur tempor sed congue felis. Vivamus posuere
        scelerisque dapibus. Nam ultricies laoreet augue id semper. Sed eu lacus ac dolor volutpat ullamcorper at sed
        risus. Nunc sollicitudin bibendum varius. Donec laoreet gravida metus. Fusce porta consequat augue, eget
        fermentum lectus molestie ultrices. Etiam sit amet sem sed massa maximus eleifend. Etiam eu maximus <span
            style="background-color: #fdca96;">ipsum</span>. Morbi ut venenatis mauris. Etiam vehicula nisl neque,
        fringilla pellentesque dui consequat <span style="background-color: #fdfd96;">quis</span>. Nunc feugiat, massa
        non dapibus blandit, tellus diam gravida nisl, eu varius leo quam nec leo. Nunc fermentum mauris viverra purus
        elementum, at bibendum dui fringilla. Nam ac lacus a leo iaculis pellentesque rhoncus sed quam.
    </p>
</div>

<div style="border: 1px dashed red;color: red;">
    <h2>News heading 2</h2>

    <p>
        Etiam in ex <span style="background-color: #fdfd96;">quis</span> eros hendrerit sollicitudin vitae iaculis
        neque. Vestibulum ornare nibh lectus, nec blandit justo efficitur in. Morbi et porta erat, <span
            style="background-color: #fdfd96;">quis</span> tristique lorem. Nunc mollis egestas ligula, id iaculis
        mauris dapibus sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Phasellus vestibulum non augue scelerisque tincidunt. Vivamus dictum luctus neque, sed scelerisque quam
        faucibus vitae.
    </p>
</div>

<div>
    <h2>News heading 3</h2>

    <p>
        Donec nec lacus et felis scelerisque iaculis a vitae nibh. Nullam in sapien condimentum erat interdum pretium
        eget sit amet ex. Duis sed enim nisl. Cras ut lacus vitae metus posuere vestibulum. Proin posuere tincidunt
        <span style="background-color: #fdca96;">ipsum</span> ut aliquam. Aenean lacinia urna mauris, <span
            style="background-color: #fdfd96;">quis</span> volutpat nulla blandit et. Nam placerat porta ornare. Nunc
        pretium elit et leo blandit, consectetur pretium sapien porttitor. Aenean consectetur malesuada enim, eget
        fringilla dolor efficitur id. Curabitur ut pulvinar nulla. Sed mollis felis eget blandit venenatis. Pellentesque
        eu nisi pharetra felis aliquam scelerisque. Aliquam ac mattis neque. Ut fermentum feugiat dolor.
    </p>
</div>

</body>
</html>