Class: Style Block-level Elements

When defined in the <style> element, the HTML class attribute makes it possible to define the same styles for "equal" block-level elements, such as <div>:

HTML file: Displayed by browser:
<style>
div.cities {
    background-color:black;
    color:white;
    margin:15px;
    padding:15px;
}

</style>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</body>

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.


Back button Table of Contents Next button