examples/css/selectors/element_id_class_selectors.html

<!DOCTYPE html>
<html>
<head>
    <title>Example: Element, ID, class selectors</title>
    <style>
        h1, h2, h3, p {
            font-family: Verdana, Arial, sans-serif;
        }

        p {
            width: 500px;
            border: 1px solid black;
            margin: 1em;
            padding: 0.5em;
        }

        #firstpar {
            font-weight: bold;
        }

        .red {
            color: red;
        }

        .justified {
            text-align: justify;
        }
    </style>
</head>
<body>
<h1>Head1</h1>

<h2>Head2</h2>

<h3>Head3</h3>

<p id="firstpar">
    Lorem ipsum 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 ipsum. Morbi ut venenatis mauris. Etiam vehicula nisl neque, fringilla
    pellentesque dui consequat quis. 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>

<p class="red justified">
    Etiam in ex quis eros hendrerit sollicitudin vitae iaculis neque. Vestibulum ornare nibh lectus, nec blandit justo
    efficitur in. Morbi et porta erat, quis 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>

<p class="justified">
    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 ipsum ut
    aliquam. Aenean lacinia urna mauris, quis 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>
</body>
</html>