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

Published: 08 January 2022
on channel: Front End Beginners
4,105
42

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:
• How to Add a Favicon to Your HTML Website -    • How to Add a Favicon (Logo Icon) to Y...  
• How to Use Free Font Awesome Icons -    • How to Add Free Font Awesome Icons to...  
• How to Create a CSS Flexbox Sidebar & Content Layout -    • How to Create a CSS Flexbox Sidebar a...  


Watch video How to Create a CSS Class in HTML - How CSS Classes Work - Beginner Tutorial online without registration, duration hours minute second in high quality. This video was added by user Front End Beginners 08 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,10 once and liked it 4 people.