Using The class Attribute: is used to define equal styles for elements with the same class name. all HTML elements with the same class attribute will get the same style.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: red;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="fruits">
<h2>Apple</h2>
<p>An apple a day keeps doctor away.</p>
</div>
<div class="fruits">
<h2>Orange</h2>
<p>Orange is juicy puply fruit.</p>
</div>
<div class="Mango">
<h2>Tokyo</h2>
<p>Mango is king of fruits.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: red;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="fruits">
<h2>Apple</h2>
<p>An apple a day keeps doctor away.</p>
</div>
<div class="fruits">
<h2>Orange</h2>
<p>Orange is juicy puply fruit.</p>
</div>
<div class="Mango">
<h2>Tokyo</h2>
<p>Mango is king of fruits.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: red;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="fruits">
<h2>Apple</h2>
<p>An apple a day keeps doctor away.</p>
</div>
<div class="fruits">
<h2>Orange</h2>
<p>Orange is juicy puply fruit.</p>
</div>
<div class="Mango">
<h2>Tokyo</h2>
<p>Mango is king of fruits.</p>
</div>
</body>
</html>
Using The class Attribute on Inline: The HTML class attribute can also be used on inline elements
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 90%;
color: blue;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 90%;
color: blue;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 90%;
color: blue;
}
</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>
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: red;
color: white;
padding: 10px;
}
</style>
<h2 class="fruits">Apple</h2>
<p>An apple a day keeps doctor away.</p>
<h2 class="fruits">Orange</h2>
<p>Orange is a juicy and puply fruit.</p>
<h2 class="fruits">Mango</h2>
<p>Mango is king of fruits.</p>
<style>
.city {
background-color: red;
color: white;
padding: 10px;
}
</style>
<h2 class="fruits">Apple</h2>
<p>An apple a day keeps doctor away.</p>
<h2 class="fruits">Orange</h2>
<p>Orange is a juicy and puply fruit.</p>
<h2 class="fruits">Mango</h2>
<p>Mango is king of fruits.</p>
<style>
.city {
background-color: red;
color: white;
padding: 10px;
}
</style>
<h2 class="fruits">Apple</h2>
<p>An apple a day keeps doctor away.</p>
<h2 class="fruits">Orange</h2>
<p>Orange is a juicy and puply fruit.</p>
<h2 class="fruits">Mango</h2>
<p>Mango is king of fruits.</p>
Multiple Classes: HTML elements can have more than one class name, each class name must be separated by a space.
<h2 class="fruit">Apple</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Mango</h2>
<h2 class="fruit">Apple</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Mango</h2>
<h2 class="fruit">Apple</h2> <h2 class="fruit">Orange</h2> <h2 class="fruit">Mango</h2>
One thought on “HTML CLASSES”
Comments are closed.