Techno

CSS Class | Multiple Classes

CSS class is an 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. CSS class is an 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 the multiple CSS class. The developers create the CSS classes according to website design. Multiples CSS class have different effects on DOM (HTML structure).

CSS calss 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 create a simple header class and use some CSS attributes and Property.
Now call the css class in HTML to see the effect .

CSS call 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 above example we have called the CSS by its class name .

CSS Multiples Classes

A website can contain Multiple CSS Classes . Multiple Classes have diffrent 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 above example we have create multiple classess . 1. header 2. footer . Also we have called the multiple classes in HTML using div block or class.