Welcome to Our Free Tutorial!

CSS - Class

CSS Class is the main thing in CSS. Firstly you must declare a CSS class by using dot(.) followed by the name of the class. You declare class name yourself but class name should be meaningful. After declare the class name you simply enter the properties and values of the class.

Syntax:

 .class-name { property: value; }
      

If you want to use same class name for multiple elements, you must before dot with the HTML element name.

Syntax:

html-element-name .class-name { property: value; }

Example of CSS Class:

<head>
<style type="text/css">
h2.css_class { color: #808000; }
p. css_class { color: #808080; }
</style>
</head>
<body>
<h2 class=" css_class ">CSS Class </h2>
<p class=" css_class ">CSS classes is very useful </p>
</body>

Display:

CSS Class

CSS classes is very useful.


CSS Code:

p.study1{ color: red; }
p.study2{ color: blue; }

HTML Code:

<html>
<body>
<p>This is a paragraph. </p>
<p class="study1">This is a paragraph uses the p.study CSS code! </p>
<p class="study2">This is a paragraph uses the p.study CSS code! </p>
</body>
</html>

Display:

This is a paragraph uses the p.study CSS code!

This is a paragraph uses the p.study CSS code!