Basic-Html-Css-/classes.html at main · Manish4Kumar/Basic-Html-Css- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.

A class attribute can be defined within <style> tag or in separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

Defining an HTML class
To create an HTML class, firstly define style for HTML class using <style> tag within <head> section as following example:

Keep Watching


Example:
<head>
    <style>
        .headings{
            color: lightgreen;
            font-family: cursive;
            background-color: black; }
    </style>
</head>
We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to provide such styling. We just need to follow the following syntax to use it.

<tag class="ghf"> content </tag>
Example 1:
<!DOCTYPE html>
<html>
<head>
    <style>
        .headings{
            color: lightgreen;
            font-family: cursive;
            background-color: black; }
    </style>
</head>
<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>
Test it Now
Another Example with different class name
Example:
Let's use a class name "Fruit" with CSS to style all elements.

<style>
.fruit {
    background-color: orange;
    color: white;
    padding: 10px;
}
</style>

<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>

<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>

<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
Test it Now
Here you can see that we have used the class name "fruit" with (.) to use all its elements.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.
Class Attribute in JavaScript
You can use JavaScript access elements with a specified class name by using the getElementsByClassName() method.

Example:
Let's hide all the elements with class name "fruit" when the user click on the button.

<!DOCTYPE html>
<html>
<body>

<h2>Class Attribute with JavaScript</h2>
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>

<button onclick="myFunction()">Hide elements</button>


<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>

<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>

<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("fruit");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>
Test it Now
Note: You will learn more about JavaScript in our JavaScript tutorial.
Multiple Classes
You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.

Example:
Let's style elements with class name "fruit" and also with a class name "center".

<!DOCTYPE html>
<html>
<style>
.fruit {
    background-color: orange;
    color: white;
    padding: 10px;
}

.center {
    text-align: center;
}
</style>
<body>

<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>

<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>

</body>
</html>
Test it Now
You can see that the first element <h2> belongs to both the "fruit" class and the "center" class.


Same class with Different Tag
You can use the same class name with different tags like <h2> and <p> etc. to share the same style.

Example:
<!DOCTYPE html>
<html>
<style>
.fruit {
  background-color: orange;
  color: white;
  padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>