Use CSS Class for Styling Elements With Matching Class Attributes

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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

• Other options for selecting which elements to style include finding elements by their attributes, and IDs.
• You can use combinations of ID, attribute and class selectors to target elements even more accurately.