ID and CLASS in Css

What Is ID and CLASS in CSS? Difference Between Id and Class in CSS

What Is ID and CLASS in CSS? Difference Between Id and Class in CSS

 

 
 
ID and CLASS in CSS
ID and CLASS in CSS

 

 

Welcome to the Codewithrandom blog. In this blog, we learn What is Id and Class selectors in Html and Css. it’s the most used word in frontend web development.

ID and Class are basically used for targeting HTML Elements and they have their unique use class always used for Multiple Html elements for the same design UI and ID 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 a <ul> tag is there that is 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

ID and CLASS in CSS
Output

 

So as you can see here main is an ID selector, and that’s what we’re going to learn 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.

50+ HTML, CSS & JavaScript Projects With Source Code

Simple ID Selector in Css Code

p#main {
    color: red;
    font-size: 30px;
    background: #fff;
    border: 1px solid black;
}

Output

ID and CLASS in CSS
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 IDs, Sometimes you want to know that just by looking at the CSS file, without having to refer back to its original HTML file.

5+ HTML CSS Projects With Source Code

Now, Let’s see what is class and I hope you’ve cleared your concepts of CSS ID selectors:

Css Class Selector

ADVERTISEMENT

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:

ADVERTISEMENT

Simple HTML code

ADVERTISEMENT

<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

ADVERTISEMENT

ID and CLASS in CSS
Output

 

ADVERTISEMENT

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 what it looks like:

Simple Class Selector in 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

 
ID and CLASS in CSS

 

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.

10+ Javascript Projects For Beginners With Source Code

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 codewithrandom on Instagram, and share this article with anybody who may find this content helpful. Thanks and Stay tuned for another tech-related article.

Darshan
Team codewithrandom



Tags: ,

Leave a Reply