CSS Classes and IDs

1. What are CSS Classes?

CSS classes allow you to apply styles to multiple elements on a page. A class is defined in CSS with a period (.) followed by the class name.

Edit Copy

.classname {
    color: blue;
    font-size: 20px;
}

You can assign a class to an HTML element like this:

Edit Copy

<p class="classname">This is a paragraph.</p>

2. What are CSS IDs?

CSS IDs are used to style a single unique element. An ID is defined in CSS with a hash (#) followed by the ID name.

Edit Copy

#idname {
    background-color: yellow;
    padding: 10px;
}

To assign an ID to an HTML element:

Edit Copy

<div id="idname">This is a unique div.</div>

3. Differences between Classes and IDs

• Uniqueness: IDs must be unique within a page, while classes can be reused across multiple elements.
• Specificity: IDs have a higher specificity than classes. If both are applied to an element, the ID style will take precedence.
• Syntax: Classes are defined with a period (.), while IDs use a hash (#).

4. Using Classes and IDs Together

It's common to use both classes and IDs in your styles. For example, you can use a class for common styles and an ID for unique adjustments:

Edit Copy

.common-style {
    font-family: Arial, sans-serif;
}

#unique-style {
    font-weight: bold;
}

Example HTML:

Edit Copy

<p class="common-style" id="unique-style">This paragraph has both a class and an ID.</p>

5. Example of CSS Classes and IDs

Here’s a practical example demonstrating how to use classes and IDs:

Edit Copy

<style>
.button {
    background-color: blue;
    color: white;
    padding: 10px;
}

#special-button {
    background-color: red;
    border: 2px solid black;
}
</style>

<button class="button" id="special-button">Click Me!</button>

In this example, the button will inherit styles from both the class and the ID.

6. Best Practices

• Use classes for styling multiple elements and IDs for unique styles.
• Avoid using IDs in CSS for styling unless necessary, as they have higher specificity.
• Keep class and ID names descriptive and relevant to their purpose.

7. Conclusion

Understanding how to use CSS classes and IDs effectively is crucial for styling web pages. By applying these concepts, you can create visually appealing and well-structured designs.