How to work with classes and ids in HTML and CSS
HTML provides two attributes, class and id, that can be used to identify and style elements on a web page using CSS. The class and id attributes are used to apply styling to specific elements on a web page, and can be used in combination with CSS code to create a coherent and aesthetically pleasing layout.
Usage examples:
1. Using id to style a specific element:
<div id="header">
<h1>Welcome to my website!</h1>
</div>
#header {
background-color: #333;
color: white;
padding: 20px;
}
2. Using class for multiple elements to apply the same style:
<p class="important">This is an important message.</p>
<p class="important">Please pay attention!</p>
.important {
font-weight: bold;
color: red;
}
3. Using class and id together:
<div id="container">
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>Welcome to my website!</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
#container {
display: flex;
}
.sidebar {
width: 25%;
background-color: lightblue;
}
.content {
width: 75%;
background-color: white;
}
<strong>Note:
This code would create a layout with a sidebar and main content area, where the sidebar takes up 25% of the page width and the content takes up 75%.
Here’s a link… for some more information on CSS selectors and how to use them.
Written by: Steven Iversen 29-05-2023 Written in: HTML tutorials
7 Comments
Leave a Reply
You must be logged in to post a comment.
This tutorial was extremely helpful in explaining the difference between classes and IDs in HTML and CSS . I’ve always been confused about when to use which one, but now I feel confident in my understanding. The examples provided were clear and easy to follow, making it even easier to grasp the concepts. Thanks for the great explanation!
Wow, this tutorial was super helpful! 🙌 I’ve always been a bit confused about how to work with classes and IDs in HTML and CSS, but this article really cleared things up for me . The examples were easy to understand and the explanations were really clear. 👍 Now I feel confident in using classes and IDs to style my web pages. Thanks a bunch! 😊
Wow, this article on working with classes and IDs in HTML and CSS is incredibly helpful! As someone who’s just starting out in web development, it can be quite confusing to understand how to effectively use these concepts . But thanks to this tutorial, I feel like I now have a clear understanding of the differences between classes and IDs, and how to use them efficiently in my code. The explanations are straightforward and easy to follow, which really helped solidify my understanding. I also appreciate the practical examples provided, as they allowed me to see how classes and IDs can be used in real-life scenarios. Overall, this article has been a game-changer for me, and I can’t wait to put my newfound knowledge into practice. Thank you, BeginnerTuts, for creating such a valuable resource!
Hey, this article was super helpful! I always confuse classes and ids, but now I feel like I understand them better . Thank you for explaining it in a simple way. I’ll definitely be using this knowledge in my next web project. Keep up the good work!
This tutorial was super helpful! I’ve always been confused about how to use classes and IDs in HTML and CSS, but this article explained it in a way that made sense to me . The examples were clear and easy to follow, and I feel more confident now in applying these concepts to my own web projects. Thanks for breaking it down step-by-step!
This tutorial really helped me understand how to work with classes and IDs in HTML and CSS . I used to get confused about when to use each one, but now it makes so much more sense. The examples provided were clear and really illustrated the concepts well. Thank you for breaking it down in such a user-friendly way!
This tutorial was super helpful in clarifying the differences between classes and IDs in HTML and CSS . I always found it a bit confusing but now I feel much more confident in using them correctly. Thank you for breaking it down in such a clear way!