css id and class | what’s the difference between css id and class

Code With Random

Table of Contents

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. 

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 = “i d=” 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

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.

  simple id selector css code

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:

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:

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:

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

Save my name, email, and website in this browser for the next time I comment.