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>
One thought on “HTML CLASSES”
Comments are closed.