CODEWITHSUNDEEP
htmlcss
Charlie
Charlie

Reputation: 1

CSS: about div id and div class

Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.

HTML:

<div id="body">
    <div id="box1" class="style"></div>
    <div id="box2" class="style"></div>
    <div id="box3" class="style"></div>
    //(and so on)//
</div>

CSS:

.style {
    //(put elements here)//
}

Upvotes: 0

Views: 835

Answers (7)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

You can use this

<div id="demo">
    <div  class="box test"></div>
    <div  class="box test"></div>
    <div  class="box test"></div>

</div>

CSS:

#demo
 {
 margin:0;
 padding:0;
 }
 .box
 {
 Width:100px;
 height:50px;
 background:red;

 }
 .test
 {
 color:white;
 }

you can apply two class.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

There is not really a right thing to do as everything depends on the situation and circumstances.

Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?

You can also use the IDs you have to override styles for the <div>s individually:

.style {
    color: red;
}
#body1 {
    color: blue;
}

Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).

I would also follow the W3C's advice when picking class names for elements and using them in your HTML:

...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Upvotes: 2

Sudip
Sudip

Reputation: 2051

You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.

<div id="body">
    <div class="mystyle"></div>
    <div class="mystyle"></div>
    <div class="mystyle"></div>
    //(and so on)//
</div>

<style>
.mystyle{color:#000;}
<style>

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.

HTML

<div id="body">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#body div {
    background:red;
    width:100px;
    height:100px;
    display:inline-block
}

DEMO

Upvotes: 0

Timothy Radzikowski
Timothy Radzikowski

Reputation: 1278

ID's are unique:

-Each element can have only one ID

-Each page can have only one element with that ID

Classes are NOT unique:

-You can use the same class on multiple elements.

-You can use multiple classes on the same element.

Upvotes: 1

Sanober Malik
Sanober Malik

Reputation: 2805

Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.

Upvotes: 0

Philip Kirkbride
Philip Kirkbride

Reputation: 22859

Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.

http://www.w3schools.com/tags/att_global_id.asp

http://www.w3schools.com/tags/att_global_class.asp

Upvotes: 0

Related Questions