Chapter 3 - What are CSS Classes?

Every selector in CSS is a class but you can create your classes as per your requirements in style sheet coding.

So we can say that there are two types of CSS classes:-

1. Pre-defined classes of CSS
2. User defined classes of CSS

Pre-Defined Class

The class selector allows you to style items within the same HTML element differently. Similar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an HTML file.

CSS Coding for Pre-Defined CSS Class

 h1
 {
   font-size:extra-large;
   background-color:yellow;
 }

HTML Coding

 <h1>H1 Tag with yellow background</h1>

Output
H1 Tag with yellow Background

 

User Defined Class

In user defined classes of css, you can use any name of your choice for your class.

CSS Coding for User-Defined CSS Class

 .mycssclass
 {
   font-size:extra-large;
   color:red;
   background-color:yellow;
 }

HTML Coding

 <h1 class="mycssclass">H1 Tag with User Defined Class in CSS</h1>

Output
H1 Tag with User Defined Class in CSS

 

Please note that the user defined class selector begins with the (.) period but predefined class selector begins with the predefined HTML Tag. This is the basic difference between.

I hope you understand the basics of Predefined and User Defined Classes in CSS.

Now you can share your thoughts in below comment box, if you like this post.