Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Basic

CSS .class Selector

Posted in CSS Tutorial
Updated on Sep 21, 2024
By Mari Selvan
👁️ 8 - Views
⏳ 4 mins
💬 0
CSS .class Selector

Photo Credit to CodeToFun

🙋 Introduction

The .class selector in CSS is one of the most commonly used selectors. It allows you to apply styles to HTML elements that share a specific class attribute.

This selector is particularly useful for targeting multiple elements with the same class, making it an essential tool for creating consistent styles across a webpage.

💡 Syntax

The signature of the .class Selector is as follows:

Syntax
Copied
Copy To Clipboard
.class {
    /* CSS properties */
}

In the syntax above, replace .class with the actual class name you wish to target.

📝 Example

Here is an example of how to use the .class selector in CSS:

☠️ HTML

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS .class Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="title">Welcome to My Blog</h1>
    <p class="content">This is an example paragraph with a class.</p>
    <p class="content">Another paragraph sharing the same class.</p>
    <button class="button">Click Me</button>
</body>
</html>

🎨 CSS

CSS
Copied
Copy To Clipboard
/* Style for elements with class "title" */
.title {
    color: blue;
    font-size: 2em;
}

/* Style for elements with class "content" */
.content {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

/* Style for elements with class "button" */
.button {
    background-color: green;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

In this example:

  • The heading with the class title is styled with blue text and larger font size.
  • Paragraphs with the class content have a specific font and line height.
  • The button with the class button has a green background and white text.

💬 Usage Tips

  • Use meaningful class names that describe the purpose or content of the elements for better readability and maintainability.
  • You can apply multiple classes to an element by separating them with spaces. For example, <div class="class1 class2">.
  • Combine the .class selector with other selectors for more specific targeting, such as div.class to style only <div> elements with the specified class.

⚠️ Common Pitfalls

  • Avoid using generic class names like red or big, as they can be misleading when styling multiple elements.
  • Remember that class names are case-sensitive; .MyClass and .myclass are treated as different classes.

🎉 Conclusion

The .class selector is a powerful feature in CSS that enhances your ability to style elements consistently across your web pages.

By using classes effectively, you can create a well-structured and visually appealing design, making it easier to maintain and update your styles as your project evolves.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy