What is a HTML class ?
HTML class attribute is used to specify a class for an HTML element.
HTML class attribute can specify a single or multiple class names for an HTML element.
Inside HTML documents, we can use the same class attribute name with different elements.
So multiple HTML elements can have the same class names.
HTML class attribute is case-sensitive.
Note :
Web developers are encouraged to use names which should describe the semantic purpose of the element.
What are the naming rules for HTML class?
There are some rules to be followed while declaring the class names, listed below
1. Class name must begin with a letter A-Z or a-z
2. Class name can be followed by letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”)
HTML course free !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<tagname class="className">Some content</tagname>
tagname – Defines the HTML tag.
class – Defines the className.
Where the class attribute is used?
Class attribute is mostly used inside,
1. HTML documents
2. CSS files.
3. Javascript and other client-side scripting files.
1. HTML documents.
Class can be directly accessed inside HTML documents inside <style> tag with (.) dot className format.
2. CSS files.
Class can be accessed inside the HTML document(inline style) and also in a separate CSS file with (.) dot className format.
3. Javascript
Class can be accessed via the class selectors or functions like the DOM method document.getElementsByClassName.
Declaring Class name in HTML document.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
</head>
<body>
<h1 class="heading1">Heading 1</h1>
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h3>
<h4 class="heading4">Heading 4</h4>
<h5 class="heading5">Heading 5</h5>
<h6 class="heading6">Heading 6</h6>
</body>
</html>
Output :
Want to Learn More About – HTML Id
Let Us Discover More About – HTML Id
Class name inside CSS <style> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style>
.heading1{
color:black;
}
.heading2{
color:green;
}
.heading3{
color:blue;
}
.heading4{
color:yellow;
}
.heading5{
color:green;
}
.heading6{
color:brown;
}
</style>
</head>
<body>
<h1 class="heading1">Heading 1</h1>
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h3>
<h4 class="heading4">Heading 4</h4>
<h5 class="heading5">Heading 5</h5>
<h6 class="heading6">Heading 6</h6>
</body>
</html>
Output :
Want to Learn More About – HTML Formatting
Let Us Discover More About – HTML Formatting
Class name inside Javascript <script> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementByClassName() Method</title>
<style>
h1 {
color: green;
}
body {
text-align: left;
}
.example {
padding: 10px;
margin: auto;
margin-top: 10px;
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1 class="heading1">Heading 1</h1>
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h2>
<h4 class="heading4">Heading 4</h2>
<h5 class="heading5">Heading 5</h2>
<h6 class="heading6">Heading 6</h2>
<script>
document.getElementsByClassName('heading1')[0].style.border="5px solid green";
document.getElementsByClassName('heading2')[0].style.border="5px solid blue";
document.getElementsByClassName('heading3')[0].style.border="5px solid yellow";
document.getElementsByClassName('heading4')[0].style.border="5px solid brown";
document.getElementsByClassName('heading5')[0].style.border="5px solid red";
document.getElementsByClassName('heading6')[0].style.border="5px solid black";
</script>
</body>
</html>
Output :
Free online html course !!!
Click to Learn More about – HTML5 Tutorial for beginners
Video Tutorial – Watch on Youtube
Want to Learn More About – HTML Headings
Let Us Discover More About – HTML Headings