Open In App

How to Create Classes using CSS ?

Last Updated : 31 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads