css id and class | what's the difference between css id and class
Welcome🎉 to Code With Random blog. In this blog, we learn What is id and class selector in HTML css, it's the most used word in frontend web development. I'd and class is basically used for targeting HTML element and they have their unique use like class always use for multiple Html elements for same design UI and I'd means unique only for 1 element. So let's understand all these differences in this blog post. Hope you enjoy our blog so let's start with the id selector.
css id selector
In HTML,
every element on your web page is assigned to be a unique Id attribute. This
can be a text that has to be unique (only one item can have this label).
It’s that good to assign labels that describe the element of it. Let’s take a
quick example like a <ul> tag is there and that used to mark up a
navigation menu and that might have id= “navigation” or else id = “menu”
You’d assign
that id attribute to an HTML element:
1. If you want to style that specific
element differently than other elements of the same type.
2. Or You want to be able to link to a
particular element within a web page. In fact, you’d already added id = “id=" main" to
one of the div elements out here.
In this unit, we’re just going to work with ID Selectors. We want to be able to style the specific elements using CSS. For
example, let’s say you have a paragraph that serves as a page. You’d want it to
look like all the other paragraphs on the page. You want it to stand out so
people are to notice it right? How does the ID work like this:
simple HTML code
<p id="main">Learn with codewithrandom.</p>
 |
| Output |
So as you can see here main is an ID selector, and that’s what we’re
going to learn for how to use it and how to style it let’s see how.
To add style to an element with an id we use a symbol # in your CSS. For example, here’s how the p id selector has been used in CSS.
Javascript project ideas with complete source code
simple id selector css code
p#main {
Color: red;
Font-size: 30px;
Background: #fff;
Border: 1px solid black;
}
 |
| Output |
Note here that we’ve used specifying type of element in CSS and that is
optional where the element is having an ID. In the above example, you can see
we’ve used p#main as an ID selector.
It’s generally good practice though to include and as It helps you to
remember which elements have certain ID’s, Sometimes you want to know that just
by looking at the CSS file, without having to refer back to its original HTML
file.
Now, Let’s see what is class and I hope you’ve cleared your concepts of
CSS ID selectors:
css class selector
What are Class Selectors?
Sometimes you may see that there might be a group of elements that you want to style. For example, let’s say you’re creating a basic web page. So let’s say you’ve created a <div> class called = “review” to each. And then you might have created another div class called “summary”. Something like this:
<div class="review"
<p>Codewithrandom is the best</p>
<p class="summary">Codewithrandom is best for learning tech related blogs, and project and that also with source code. Share it with others and follow him on Instagram for more such contents.</p>
 |
| Output |
To add this style to your element that is part of the class, then we use (.) in CSS. When we’re working with CSS class-based selectors. Here’s how it looks like:
div.review { background-color: #fff; border: 1px solid #ccc; font-size: 25px; } p.summary { font-size: 45px; font-style: italic; padding: 10px; }
Check it more
I hope you found this article helpful, if yes like my content and follow codeiwithrandom on Instagram, and share this article with anybody who may found this content helpful. Thanks and Stay tuned for another tech-related article.
Darshan
Team codewithrandom
Post a Comment