CSS Class | Multiple Classes

The CSS class is a unique name of the block of code. You can call a CSS block code via the CSS class. Without CSS class you can't call the CSS in HTML. Every block of code has a different CSS class name. CSS class name is not similar to other CSS class . There is multiples class name available in CSS. Every class name has different properties. The CSS class is a unique identifier of the CSS block. If you don't want to use class then you can use CSS ID . CSS ID is similar to the class but there is a small difference in Id and Class.
A website can contain multiple CSS classes. The developers create the CSS classes according to website design. Multiples CSS class have different effects on DOM (HTML structure).

CSS class syntax


.class-name{

}

CSS class name is written with .(dot) and class-name . The class name may be anything. You can choose according to your need. If you are working on Header then you can take CSS class name as .header. if you are working on the body then you can take as .body etc.

Create a Simple CSS class

Creating a class according to your need . The following example will show you, how to create CSS class using CSS attributes and Property


.header{
height:200px; 
width:800px; 
background-color:grey; 
color:white ; 

}

We have created a simple header class and use some CSS attributes and Property.
Now call the CSS class in HTML to see the effect .

Calling CSS in HTML

Calling CSS class is very simple you have to use div element and simple class .

CSS class in HTML


<!DOCTYPE>
<html>
<head>
<title>Internal CSS in HTML   </title>

<head>

A simple CSS class effects

CSS header |CSS header |CSS header |CSS header

</body> </head> </html>
Run

In the above example, we have called the CSS by its class name .

CSS Multiples Classes

A website can contain Multiple CSS Classes . Multiple Classes have different properties .

Multiple classes in HTML


<!DOCTYPE>
<html>
<head>
<title>CSS Multiple classes in HTML  </title>

<head>

A simple CSS class effects

CSS header |CSS header |CSS header |CSS header

</body> </head> </html>
Run

In the above example, we have created multiple classes . 1. header 2. footer . Also, we have called the multiple classes in HTML using div block or class.