HTML Classes

Categorize HTML (set class) so that we can define CSS styles for the class of the element.

Set the same style for the same class, or set different styles for different classes.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>伦敦</h2>
<p>
伦敦是英格兰的首都。 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

Try It Yourself

Categorized as block-level elements

The HTML <div> element isBlock-level elements。它可以作为其他 HTML 元素的容器。

Set the class of the <div> element so that we can set the same class for the same <div> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。 
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,</p>
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>

Try It Yourself

Classified Inline Elements

The HTML <span> element is an inline element that can be used as a container for text.

Setting the class of a <span> element allows you to apply the same style to the same <span> elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

Try It Yourself