Home > Article > Web Front-end > How can we use different CSS classes in HTML?
How can we use different CSS classes in HTML?
- 王林forward
- 2023-09-15 15:41:121452browse
We use the class attribute to specify a class for an HTML element.
Multiple HTML elements can share the same class. Using various properties of the class such as changing color, font, etc. we can define style rules for these HTML elements. Elements with this class will be formatted according to the defined rules. This is called a class selector.
To select elements with a specific class, you need to write a period (.) character followed by the name of the class, for example, let's look at the ".black" class,
.black {
color: #000000;
}
For each element in our document whose class attribute is set to black, render the content in black. For example, only
elements whose class attribute is set to black render content in black.
h3.black {
color: #000000;
}
We use the class attribute to point to the class name in the style sheet. JavaScript can also use it to access elements with specific class names.
Example 1
Given below is an example where we have two elements with the same value for their class attribute. All elements will be styled identically based on the style definition in the head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
</body>
</html>
The following is the output of the above example program.
The Chinese translation ofExample 2
is:Example 2
Given below is an example where we have two elements with different values for their class attribute. Both elements will be styled based on the style definition in the head tag.
To define multiple classes, separate the class names with spaces. The element will be styled according to the specified class.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.room {
font-family: monospace;
font-size: 200%;
color: tomato;
text-align: center;
}
.two{
font-family: cursive;
color: lawngreen;
text-align: center;
}
</style>
</head>
<body>
<p class="room">Meta tag contents are not visible on your browser.</p>
<p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>
To define multiple classes, separate the class names with spaces or specify different values. The element will be styled according to the specified class.
The Chinese translation ofExample 3
is:Example 3
Given the following example, where we have three elements with different values of class attribute. Two elements will be styled equally based on the style definition in the head tag, while the other element will be styled based on the style definition in the head tag<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.computerscience,ul {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: brown;
}
ul{
background-color: tomato;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
<div class="computerscience">
<h2>Satya</h2>
<ul>
<li>Bachelor's of Engineering</li>
<li>Cse stream</li>
<li>section -A</li>
</ul>
</div>
</body>
</html>
The following is the output of the above example program.
The Chinese translation ofExample 4
is:Example 4
Another example could include styling the
tag. Style all
elements with class="device" in the following way
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>
Example 5
The styling of tags can be done through multiple classes, namely equipment and accessories here -
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>
The above is the detailed content of How can we use different CSS classes in HTML?. For more information, please follow other related articles on the PHP Chinese website!