diff --git a/html/html-classes/index.html b/html/html-classes/index.html index d1cd5ee..cf3a767 100644 --- a/html/html-classes/index.html +++ b/html/html-classes/index.html @@ -843,113 +843,236 @@
-
-

HTML Classes

HTML classes allow web developers to define blueprint and create and modify all elements which are formed from a given blueprint.

Let's talk about the class attribute

The class attribute serves the purpose of linking the html element to the logic (JavaScript) and the style sheet. We can access and modify the elements by referencing the class name defined in the class attribute.

Example

In the following example we have three <div> elements with a class attribute with the value of "animal". All of the three <div> elements will be styled equally according to the .animal style:

HTML
+

HTML Classes

+
+
+ + HTML classes allow web developers to create reusable styling and behavior blueprints. By assigning a class to multiple elements, you can modify all of them at once through CSS or JavaScript, making your web pages more consistent and dynamic. + +
+
+ +

Understanding the class attribute

+

+ + The class attribute assigns a specific label to HTML elements, allowing CSS to apply the same style rules and JavaScript to access or modify them easily. It helps organize large webpages by grouping related content under a shared identifier. + +

+ +

Example

+
+
HTML
+ +
+
+ 

+<div class="animal">
+  <h2>Dog</h2>
+  <p>Dogs are loyal.</p>
+</div>
+
+<div class="animal">
+  <h2>Cat</h2>
+  <p>Cats are playful.</p>
+</div>
+
+
+
+ +
+
CSS
+ +
+
+ 

+.animal {
+  background-color: black;
+  color: yellow;
+  border: 2px solid white;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 6px;
+}
+
+
+
+ +

Syntax for Classes

+

+ + To define a class in CSS, start the selector with a period (.) followed by the class name, then specify the styles between curly braces. + +

+
+
CSS
+ +
+
+ 

+.classname {
+  property: value;
+}
+
+
+
+ +

Multiple Classes

+

+ + You can assign multiple classes to a single HTML element by separating class names with spaces. The element will receive styles from all listed classes. + +

+ +
+
HTML
+ +
+
+ 

+<p class="highlight large-text">Welcome to HTML Classes</p>
+
+
+
+ +
+
CSS
+ +
+
+ 

+.highlight {
+  color: red;
+}
+.large-text {
+  font-size: 22px;
+}
+
+
+
+ +

Same Class Reuse

+

+ + The same class name can be reused by different elements like headings, paragraphs, or divs. All of them will share identical styling. + +

+
+
HTML
+ +
+
+ 

+<h1 class="animal">Whale</h1>
+<h2 class="animal">Elephant</h2>
+<p class="animal">Fox</p>
+
+
+
+ +

Using Classes in JavaScript

+

+ + JavaScript can access and modify elements using their class name. You can use getElementsByClassName() or querySelectorAll() to select elements with a specific class. + +

+ +
+
JavaScript
+ +
+
+ 

+const boxes = document.getElementsByClassName('animal');
+for (let b of boxes) {
+  b.style.borderColor = 'orange';
+}
+
+
+
+ +

BEM Naming Convention

+

+ + BEM stands for Block Element Modifier — a structured way of naming CSS classes to make large projects more organized and readable. + +

+ +
+
HTML
+ +
+
+ 

+<div class="card card--highlight">
+  <h3 class="card__title">Welcome</h3>
+  <p class="card__desc">Reusable components make design consistent.</p>
+</div>
+
+
+
+ +

Class Naming Tips

+
    +
  • Use meaningful and descriptive names (e.g., header-title, main-container).
    • +
  • Use lowercase letters with hyphens (main-nav).
    • +
  • Avoid spaces, numbers at start, or special symbols.
    • +
  • For large projects, follow conventions like BEM for scalability.
    • +
+ +

Summary

+

+ + HTML classes connect the design (CSS) and interactivity (JavaScript) of a webpage. They allow developers to apply uniform styles, reuse patterns, and maintain cleaner, more flexible code. With conventions like BEM and careful naming, you can build large, well-structured sites easily. + +

+ +
+
+
+ +
+
+

+ + That’s all for HTML Classes — you now know how to style, organize, and even script your elements using the power of class attributes. + +

+
+
+
-
-

Cat

-

Cats are not good.

-
" copy-label="Copy to clipboard" success-label="The code is copied to clipboard">
<div class = "animal">
-    <h2>Dog</h2>
-    <p>Dogs are good.</p>
-</div>
-
-<div class = "animal">
-    <h2>Cat</h2>
-    <p>Cats are not good.</p>
-</div>
CSS
 <style>
-    .animal {
-        background-color: black;
-        color: yellow;
-        border: 2px solid white;
-        margin: 20px;
-        padding: 20px;
-    }
- </style>
Result
The class attribute can be used on any HTML element. The class name is case sensitive!

Syntax for Classes

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}

Multiple Classes

HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. << class="mammal oviparous">>. The element will be styled according to all the classes specified.

Example

In the following example, the first <

> element belongs to both the "mammal" class and also to the "oviparous" class, and will get the style from both of the classes:

HTML
<h3 class = "mammal oviparous"> 
-    Platypus 
-</h3>
-<h3 class = "mammal">
-    Dogs
-</h3>
-<h3 class = "oviparous">
-    Frogs
-</h3>
-
CSS
<style>
-    .mammal {
-       background-color: black;
-       color: yellow;
-       padding: 20px;
-     } 
-     
-     .oviparous {
-       text-align: center;
-     }
- </style>
Result:

Same class can be shared by different elements

Example
HTML
<h1 class = "animal"> 
-    Whale
-</h1>
-<h2 class = "animal">
-    Elephant
-</h2>
-<p class = "animal">
-    Fox
-</p>
-<h5 class = "animal">
-    Ant
-</h5>
CSS
 <style>
- .animal {
-    background-color: black;
-    color: yellow;
-    padding: 10px;
-  } 
- </style>
Result

That's all for this lesson, see you next one.

-