CSS Basic
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:
.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
<!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
/* 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 asdiv.class
to style only<div>
elements with the specified class.
⚠️ Common Pitfalls
- Avoid using generic class names like
red
orbig
, 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:
Author
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