How to Create Classes using CSS ?

Last Updated : 10 Apr, 2025

A class in CSS is a group of CSS property like font-style, height, width, color, etc. which is when used as an attribute in an HTML tag, the CSS styling is applied to that tag.

Syntax:

.class_name {
    CSS attributes;
}

A period character or symbol “.” is used which is followed by the class name. Then opening and a closing parenthesis “{ }” is given within which CSS styling is declared.

Explanation: <style/> tag is used to define CSS styling within a .HTML file. A period character “.” is used to declare a class which is followed by the class name which is “green-text” in our example. Then we give opening and closing parenthesis “{ }” within which we define CSS properties.

HTML

<style>
  
.green-text { 
  /* CSS properties*/
  color: green;
  font-size:250%;
}
  
</style>

Assigning our CSS class to an HTML tag:

Explanation: In the below implementation we have assigned our “green-text” CSS class to the </p> tag, which will apply our CSS styling to the contents of that </p> tag.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
/*CSS class*/
.green-text { 
  color: green;
  font-size:250%;
}
</style>
</head>
<body>
  
  <!-- class "green-text" is assigned to the </p>
 tag -->
<p class="green-text">Welcome to GeeksforGeeks</p>


</body>
</html>

Output:

As you can see we have successfully created a class using CSS and assigned it to an HTML element. For further knowledge about CSS, selectors go through this article.

How to create a slideshow with HTML and CSS ?

sudhanshublaze

Improve

Article Tags :

How to Create Classes using CSS ?

Syntax:

Similar Reads

Basics Questions

Properties Based Questions

Selectors Questions

Functions Questions

Miscellaneous Questions

Thank You!

What kind of Experience do you want to share?