CSS Classes Fully explained in an easy way!

CSS Classes Fully explained in an easy way!

Jul 19, 2023ยท

6 min read

Play this article

Heyy all! ๐Ÿ‘‹

So, as you all know that today we're gonna be learning about CSS Classes!

Getting started!

Look at that! ๐Ÿ‘‡

Explained with Code ๐Ÿ‘ฉโ€๐Ÿ’ป

Let's understand CSS classes by taking a small example! ๐Ÿ‘‡

<h1>Code Arena</h1>                                        <!--1st h1 tag -->
<h1>Max Programming</h1>                                   <!--2nd h1 tag -->
<p>Max Programming is a Wonderful youtube channel!</p>     <!--1st p tag -->
<p>Subscribe to Max Programming!</p>                       <!--2nd p tag -->
  • So here we have a normal HTML code...And there are two h1 tags & two p tags!

OUTPUT:

You have to press CTRL + S to save it, Without pressing CTRL + S for saving It's not gonna work!

  • Now what if I wanna style the 1st H1 tag with a Red heading but I wanna keep the 2nd H1 tag as it is?

  • What if I do like this? ๐Ÿ‘‡

COPY

h1{
    color: red;
}
  • The output would be: ๐Ÿ‘‡

  • Here ๐Ÿ‘† we have a problem it is applying to both the h1 tags...Because it doesn't know whether I want to style the 1st heading or the 2nd one!

  • I have a Solution for it! ๐Ÿ’ก

  • Here we can use the CSS classes!

  • How to use it?

  • Here is an example of an HTML code...Try to understand it! ๐Ÿ‘‡

COPY

<h1 class="code-arena">Code Arena</h1>              <!--1st h1 tag -->                              
<h1 class="max-programming">Max Programming</h1>    <!--2nd h1 tag -->                               
<p class="wonderful">Max Programming is a Wonderful youtube channel!</p> <!--1st p tag -->
<p class="subscribe-channel">Subscribe to Max Programming!</p> <!--2nd p tag -->
  • You can give any name you want in the CSS classes...

  • Here ๐Ÿ‘† I have written <h1 class="code-arena"> ---This is a CSS class...

  • To style CSS classes it is a must to put a . dot before the class name...

  • Now If I'll target like this in CSS ---> .code-arena{color: red;}

  • Then guess what will be the outputโ“

  • Let's try it by doing it by code! ๐Ÿ‘‡

COPY

.code-arena{
    color: red;
}

Output:

Yayy! you guessed it correctly! We did it! ๐ŸŽ‰

EXPLANATION

  • So, first & foremost we have applied some CSS classes to all the tags in our HTML file by just writing like this... <h1 class="code-arena">

  • But why we are doing this?

  • Just Imagine that we're giving a name to a newborn baby so that everyone could identify it very easily!

  • Similarly, CSS classes are there I have given some unique names to my h1 tag so that the HTML and the CSS could easily identify whether I wanna style the first heading to the second one!

CSS Classes by Image! ๐Ÿ–ผ

See this Image it will be easy for you to understand this concept! ๐Ÿ˜‰

Multiple Classes! ๐Ÿคฏ

Okay! Now we're gonna learn about CSS Multiple classes...

  • Down here ๐Ÿ‘‡ We have four buttons with the **same Background-color and with the same text color...OfCourse with four button tags!

  • But the difference is that the text font, text weight and text size are not the same!

  • Now, let's make these ๐Ÿ‘† buttons with the same background color, the same text color and different Fonts, Weights and sizes...

Long cut code! ๐Ÿช˜

First I am gonna show you the Long cut and then the Short cut by using Multiple classes!

HTML Code! ๐Ÿ‘‡

COPY

<button class="html">HTML</button>          <!--Button-1 class/name - html-->
<button class="css">CSS</button>            <!--Button-2 class/name - css-->
<button class="code">Code</button>          <!--Button-3 class/name - code-->
<button class="coding">Coding</button>      <!--Button-4 class/name - coding-->

  • So, I have made 4 buttons up here ๐Ÿ‘†๐Ÿป and given CSS classes to all of them, to style them...

CSS code here! ๐Ÿ‘‡๐Ÿป

COPY

.html{
    background-color: black;
    color: pink;
    font-weight: bold;
}

.css{
    background-color: black;
    color: pink;
    font-family: cursive;
}

.code{
    background-color: black;
    color: pink;
    font-size: 25px;
}

.coding{
    background-color: black;
    color: pink;
    font-size: 10px;
}

EXPLANATION

  • FIRST BUTTON ๐Ÿ”ณ

  • First and foremost I have targeted the First Class which is .html After that, I kept the background-color: black; and color: pink; ...Filling colors is done!...

  • Now the text is bold than others...Let's understand it ๐Ÿ‘‡๐Ÿป

  • So, I have kept the font-weight: bold; --- Basically, In CSS we can keep many of the font-weights like BOLD, BOLDER, LIGHT, LIGHTER and many more...

๐Ÿ‘‡๐Ÿป

  • SECOND BUTTON ๐Ÿ”ณ

  • In the second button, I have targeted the Second Class which is .css After that, I kept the background-color: black; and color: pink; ...Coz we have to make it the same...Filling colors is done!...

  • Now the text font is different from others...Let's understand it ๐Ÿ‘‡๐Ÿป

  • As you all know we use font-family to change the font...Easy ๐Ÿฅณ

๐Ÿ‘‡๐Ÿป

  • THIRD BUTTON ๐Ÿ”ณ

  • In the third button, I have targeted the Third Class which is .code After that, I kept the background-color: black; and color: pink; ...Coz we have to make it the same...Filling colors is done!...

  • Now the text size is Bigger than others...Let's understand it ๐Ÿ‘‡๐Ÿป

  • To increase the text size we use font size and I kept it for 25px...Easy! ๐Ÿ™Œ๐Ÿป

๐Ÿ‘‡๐Ÿป

  • FOURTH BUTTON ๐Ÿ”ณ

  • In the fourth button, I have targeted the Fourth Class which is .coding After that, I kept the background-color: black; and color: pink; ...Coz we have to make it the same...Filling colors is done!...

  • Now the text size is Smaller than others...Let's understand it ๐Ÿ‘‡๐Ÿป

  • To decrease the text size we use font size and I kept it for 10px...Easy! ๐Ÿค˜๐Ÿป

This is the LONG code...we haven't used Multiple classes yet...But now we'll use them!

Short-cut Code! ๐Ÿฐ

Now, we are gonna use MULTIPLE CLASSES to make the code short and sweet...๐Ÿฉ

HTML code by using Multiple classes! ๐Ÿ‘‡๐Ÿป

COPY

<button class="btn html">HTML</button>
<button class="btn css">CSS</button>
<button class="btn code">Code</button>
<button class="btn coding">Coding</button>

  • First and foremost, I have made here 4 buttons...And then I have been given the same classes in all four of them and that is btn ...These are the Multiple classes!

  • But Why do we do this?

  • Basically, in the long-cut formula, we have to set the background: black; and the color: pink; in all four classes in the CSS file! Which takes lots of code and lines!

  • To make it short and sweet we have taken here btn you can take any name...

  • We'll just target btn class in CSS and then will set thee background: black; and the color: pink; only once and it'll automatically be settled in all the buttons!

Let me show you how to style them! ๐Ÿ™Œ๐Ÿป

Common class --- btn code here! ๐Ÿ‘‡๐Ÿป

COPY

.btn{
    background-color: black;
    color: pink;
}

The output of this code...๐Ÿ‘‡๐Ÿป

  • Yayy! Every button got the same color! With just one common class! ๐Ÿฅณ

Let's move ahead and style the Fonts, Weights and Sizes!

CSS full code here! ๐Ÿ‘‡๐Ÿป

COPY

 .btn{
    background-color: black;
    color: pink;
}

 .html{
    font-weight: bold;
}

.css{
    font-family: cursive;
}

.code{
    font-size: 25px;
}

.coding{
    font-size: 10px;
}

Output: ๐Ÿ‘‡๐Ÿป

  • And the rest you understood well! ๐Ÿค˜๐Ÿป

Classes vs IDs

The main difference between CSS classes and CSS IDs is that a class can be used on multiple elements on a webpage, while an ID can only be used on a single element.

If you want an article on CSS IDs too! Comment below and like!

Thank you so much, everyone! If you like this article then HIT ALL 10 LIKES NOW! ๐Ÿ”ฅ

ย