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

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





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
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
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:


simple HTML code

 <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

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:


 simple class selector css code

 div.review {  
 background-color: #fff;  
 border: 1px solid #ccc;  
   font-size: 25px;  
 }  
 p.summary {  
  font-size: 45px;  
 font-style: italic;  
 padding: 10px;  
 }  
Output




This is how your class-based selectors work when you’ve created a div class or a paragraph class you’ve to also design that and to design that in CSS, we use . to work with it as you can see in the above example that we’ve used class selectors and given the font-styles and padding, borders and all then only your CSS Class-based selector is gonna work. 

ID selectors are based on their specific ID like let’s say you’ve created a paragraph ID and you’ve to design that specific paragraph and for that, we use CSS id selectors and then we style that by using # symbol and then we give font-color, background-color, to it.



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

Previous Post Next Post