Selectively apply stylesheets to div

Question

I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.

My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?

Current Solution:
External CSS:

div.test1 {
    color: purple;
    background-color: #d8da3d
}

.test2 {
    color: red;
    background-color: #d8da3d
}

#test3{
    color: green;
    background-color: #d8da3d
}

HTML body code:

<div class="test1">
    <p> Style1
</div>

<div class="test2">
    <p> Style2
</div>

<div id="test3">
    <p> Style3
</div>

My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html

Can't you just have each div tag have one or more CSS Classes to get your desired results? — DeadZone, Aug 07 '14 at 17:46

score 1 · Answer 1 · answered Aug 07 '14 at 17:48

1

Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?

From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class

answered Aug 07 '14 at 17:48

Will

1,299
9
9

I think this is on the right track, I'm having trouble applying it though. The example code has been updated – Alter Aug 07 '14 at 17:59

score 1 · Answer 2 · answered Aug 07 '14 at 17:59

1

When you use the css styling:

body{
 color:purple;
 background-color: #d8da3d
}

You are saying that you want to style the entire body of the document with the styling you have set.

In order to target specific elements you should give those elements an id or class.

For example:

<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>

Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:

#test1{
  color:blue;
  background-color:black;
}
.testing{
  color:red;
  background-color:white;
}

Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.

answered Aug 07 '14 at 17:59

Brian

199
6

Would it be better practice to use classes rather than id? Or are both in use – Alter Aug 07 '14 at 18:12
1

In general I have found that classes are a good way to go for css styling as you have the option to apply that styling to as many elements as you desire. So you can do something like have a class called 'pull-left' and give it the styling: 'float:left'. And then for all elements you want to float left, you just simply give it the class 'pull-left'. – Brian Aug 08 '14 at 18:12
Ids are good for styling one element in a particular way if it is different from all the other elements you are styling. Ids also have benefits outside of css -- for example referencing an element in javascript, but that is outside the scope of this question. – Brian Aug 08 '14 at 18:14

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

- 1

Take a look at this: https://stackoverflow.com/a/17668004/1552518

- 2

Or just add a class to each div:

<div id="container">
    <div class='div1'>
        style1
    </div>
    <div class='div2'>
        Style2
    </div>
</div>

And in your external css:

.div1 {
    // Style applied only to the first div
}


.div2 {
    // Style applied only to the second div
}

- 3

Or if you can't add a class to the divs use this in css:

#container > div:first-child {
    // Style applied only to the first div
}


#container > div:last-child {
    // Style applied only to the second div
}

edited May 23 '17 at 12:05

Community

1
1

answered Aug 07 '14 at 18:00

Haimrich

61
3

Out of curiosity, in what cases would you not be able to add a class to a div? – Alter Aug 07 '14 at 18:09
In case you can't edit the html code, but you only have access to the css – Haimrich Aug 07 '14 at 18:18
is there a risk to using .testing instead of div.testing? – Alter Aug 07 '14 at 18:19
1

No, if you use **.testing**, all elements with _class="testing"_ will be affected by that code. If you use **div.testing** only div elements with _class="testing"_ will be affected. It's only a flexibility question. – Haimrich Aug 07 '14 at 18:31

Selectively apply stylesheets to div

3 Answers3

- 1

- 2

- 3