How to Create a CSS Class in HTML - How CSS Classes Work - Beginner Tutorial

In this video, we look at how to create classes in HTML and then style them using CSS.

Classes can be re-used on multiple HTML elements, allowing us to quickly and easily style multiple elements all at once. They also allow for very simple updates—if you want to change a style on multiple elements, you only need to update the CSS once and all elements will be affected.

Classes are created by adding the "class" attribute to an HTML element. The "class" attribute is then given a value, which is the "class name".

You then target this class name in your CSS by using the CSS class selector, which is a dot or period " . " followed by the class name, e.g. .class-name

You can apply multiple CSS properties to a single class, and can also apply multiple classes to a single HTML element.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:11 What is a class?
00:39 Why use classes? Inline styling vs. CSS classes
02:38 How to create a CSS class in HTML
04:14 How to target & manipulate HTML classes in CSS
05:37 How to re-use classes on multiple HTML elements
07:44 Using multiple CSS properties on a single class
08:41 How to combine multiple CSS classes
10:59 Summary

WATCH NEXT:

[taniaaguilar]

Hi, I am learning HTML and CSS and was stuck on classes. This video was very helpful. Please keep making more. Thank you very much!

[Anthony_Francis]

This is the clearest tutorial on classes I have come across so far! Thank you. I really appreciated that you also illustrated this while using separate files for your HTML and CSS code. Keeping files separate is so important! You clearly know what you are doing. We need to get you content more Thank you so much! 😃

[andrewm]

This video really helped me out, thanks for making it!

[eaglekraft]

In the opening tag, you had the attribute class and you used that value to change the style in CSS. Can we use the Id of a element like <p> and use it for classes in CSS.