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>

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>

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>

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>

HTML CLASSES

One thought on “HTML CLASSES”