DONATE  
MENU
JSON
HTML
JAVASCRIPT
AJAX

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Attributes » Elements' Class
Share Tweet WhatsApp

Elements' Class

The HTML class attribute is used in grouping elements together so as to help us access them at the same time. Such grouping are mainly done for styling purposes and sometimes, scripting purposes. For example, you may desire for all buttons in your website or webpage to have same styling, you therefore group them under same class name. EXAMPLE
<button class='mybtn'>SUBMIT</button>
<button class='mybtn'>LOGIN</button>
<button class='mybtn'>RECOVER PASSWORD</button>
<button id='btn' class='mybtn'>HIDE BTNs</button>

<style>
.mybtn{
outline:none;
border:1px solid red;
color:red;
padding: 6px;
border-radius:5px;
background-color:white;
margin:1%;
}
</style>

<script>
var mybtns = document.getElementsByClassName("mybtn");

var btn = document.getElementById("btn");

btn.addEventListener("click", hidebtns);

function hidebtns (){
var len = mybtns.length;
for (var i = 0; i < len; i++){
mybtns[i].style.display = "none";
}
}
</script>

Copy PRACTICE IT

Above, we created four button elements having same class name and via that class name, we were able to access them for styling and scripting.
NOTE:
  • Each of the buttons can also have their unique id or identity attribute which can be use to perform further styling and scripting on each.
    <button id='submit_btn' class='mybtn'>SUBMIT</button>
    <button id='login_btn' class='mybtn'>LOGIN</button>
    <button id='recpas_btn' class='mybtn'>RECOVER PASSWORD</button>
An element can belong to more than one class. You simply separate each individual class name from the other with a space (non-breaking space).
<p class='bold paragraph'>Hello World</p>
<p class='big paragraph'>Hello World</p>

<style>
.paragraph{
color:red;
}

.big{
font-size: 30px;
}

.bold{
font-weight:bold;
}
</style>

Copy PRACTICE IT

In the above, the first paragraph element belong to two classes (paragraph and bold) while the second had two classes as well (paragraph and big). SUMMARY
  1. The class attribute can be use in grouping elements together.
  2. To achieve this, all the elements that are to have same class should have that class name in their respective class attribute value.
  3. An element can belong to more than one class by simply separating the individual class names with a non - breaking space. For example,
    <p class='className1 className2 className3'></p>
  4. With this classes, we can style or have script affect elements group together.
Take a short quiz on Elements' Class.
Ask a question or tell us if Elements' Class is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode