Applying CSS styles using Classes and IDs

When building a website, it’s important to style your HTML elements to make them visually appealing and easy to read. In CSS, you can apply styles to elements using classes and IDs. In this article, we will explore how to apply styles using these two methods.

Using Classes to Apply Styles

A class is a selector that applies a specific style to a group of elements. To create a class in CSS, you use a period (.) followed by the class name. For example, if you want to create a class for all the headings in your HTML document, you would write:

.heading {
  font-size: 2em;
  color: #333;
}

In the above code, we have created a class called .heading and applied two styles to it: font-size and color. Now, any HTML element with the class="heading" attribute will inherit these styles.

To apply a class to an HTML element, you need to add the class attribute to the element and set its value to the name of the class you want to apply. For example:

<h1 class="heading">This is a heading</h1>

In the above code, we have applied the .heading class to the h1 element.

Using IDs to Apply Styles

An ID is a selector that applies a specific style to a single element. To create an ID in CSS, you use a pound (#) followed by the ID name. For example, if you want to create an ID for a specific section in your HTML document, you would write:

#section1 {
  background-color: #f0f0f0;
}

In the above code, we have created an ID called #section1 and applied a background color to it. Now, only the HTML element with the id="section1" attribute will inherit this style.

To apply an ID to an HTML element, you need to add the id attribute to the element and set its value to the name of the ID you want to apply. For example:

<section id="section1">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dapibus turpis.</p>
</section>

In the above code, we have applied the #section1 ID to the section element.

When to Use Classes vs. IDs

In general, you should use classes to apply styles to groups of elements that share common attributes, and IDs to apply styles to individual elements that require specific styles. While you can technically use IDs to style groups of elements, it’s generally considered bad practice and can lead to styling conflicts and difficulties with maintainability.

Combining Classes and IDs

You can also combine classes and IDs to create more specific styles. For example, if you have a section with the ID #section1 and a class called .content, you can apply styles to only the p elements within that section by using the following selector:

#section1 .content p {
  font-size: 1.2em;
  color: #666;
}

In the above code, we have combined the ID #section1, the class .content, and the p element to create a more specific selector that only applies the styles to the p elements within the #section1 section that have the .content class.

Conclusion

Applying styles to HTML elements using classes and IDs is an essential part of web development. By using these methods, you can create visually appealing and well-organized web pages.

What’s next?

In the coming article, we will be covering how to style text, headings, paragraphs and links in depth. Don’t forget to follow and share this with your friends that are just starting their web development journey