Classes in html is used to give the same style for set of html elements, so we will learn how to define classes and how to assign styles to them.
Here is Visual Classes explain:
Using The class Attribute
The HTML class attribute is used to define equal styles for elements with the same class name. So, all HTML elements with the same class attribute will have the same format and style. Here we have three <div> elements that point to the same class name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html> Using The class Attribute on Inline Elements
The HTML class attribute can also be used on inline elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html> Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Select Elements With a Specific Class
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class.
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a space.
Example:
<h2 class="city main">London</h2>
<h3 class="city">Paris</h3>
<p class="city">Tokyo</p>This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.
In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.
We hope that we could give the best for you and for the deep and easy understanding.
You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.
Finally we hope every thing is works as you suspect.
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instegram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone:967772223681
