TL;DR – CSS class refers to a selector that lets you select HTML elements according to their class attribute.
The use of classes
Class selectors get elements by
class and let you style them with CSS properties. If a class applies to several elements, then CSS styles them the same.
You need to separate multiple classes in CSS by leaving space between them. Elements with several classes get styles of both.
Adding classes to elements
You can define CSS classes with a dot (.). Before you can select which class to style, you need to assign a specific HTML class attribute to elements first:
<div class="example1">I am a div element that has a specific class attribute. Want to style me?</div>
If you have a couple of <div> elements that need to have different styling properties, you should give them individual classes:
<div class="example1">I am a div element that has a specific class attribute. Want to style me?</div> <div class="example2">I am another div and I might have other properties.</div> <div class="example3">What about me?</div> <div class="example4">Hey, and me?</div>
Then, you select each
<div> class, add the dot as a prefix and set the necessary CSS properties.
Note: the same CSS classes can apply to multiple HTML elements, meaning that they will be styled the same.
Names of CSS classes can have letters, underscores, hyphens, and numbers. However, you should not include numbers as the first or the second characters after a hyphen.
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs
- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Setting multiple classes
Elements can have multiple classes in CSS. You can assign two classes to elements by leaving space between them. As a result, CSS styling properties of both classes apply to such elements.
This example sets two
<div> classes to make sure that all elements have one identical property of background-color while setting different CSS rules for them as well:
<div class="example1">I am a div element that has a specific class attribute. Want to style me?</div> <div class="example1 example2">I am another div and I might have other properties.</div> <div class="example1 example3">What about me?</div> <div class="example1 example4">Hey, and me?</div>
CSS class: useful tips
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!