25

I have a web page with different parts which require different css stylesheets to be applied to each. What I would like to know is how to specify which css stylesheet to use for each different part of the web page. if I leave them all together, the components do not get displayed properly.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
C..
  • 6,897
  • 10
  • 30
  • 37
  • 2
    What the user means is that he has multiple **.css files being called into one web page but that page is not displaying correctly because of (obvious) conflicts. I guess the css files have divs / sections with the same names which is causing the conflict. That is what is he asking and the answer below by Ned seems to be an excellent answer. – tm_forthefuture May 05 '14 at 11:24
  • 6
    It is obvious what this question is asking, so it seems clear to me that it is a 'real question'. – Dan Nissenbaum Jun 11 '15 at 16:09
  • 4
    This question is clear and makes sense to me. I despise when the moderators close questions on here. – Lonnie Best Nov 04 '15 at 03:43
  • 1
    For example, take a look at this: https://css-tricks.com/saving-the-day-with-scoped-css/ – Lonnie Best Nov 04 '15 at 03:51
  • 1
    Exactly this is about "css scope" the current css implementation does not allow to implement style-independent MVC modules. Still valid in 2016. – Anton Lyhin Feb 01 '16 at 22:08

4 Answers4

24

You can't apply different stylesheets to different parts of a page. You have a few options:

The best is to wrap the different parts of the page in divs with class names:

<div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.

Ned Batchelder
  • 364,293
  • 75
  • 561
  • 662
6

It is called Cascading Style Sheets (CSS) for a reason ..

use the specificity rules of CSS to target each section..

ie..

#section1 a{color:red}
#section2 a{color:blue}

this will make all links inside an element with id section1 be red, and all links inside an element with id section2 be blue..

<div id="section1">
 <a href="#">i will be red</a>
</div>
<div id="section2">
 <a href="#">i will be blue</a>
</div>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 3
    That does not do help when loading bootstrap.css or any other external css – oriadam Nov 21 '16 at 17:42
  • Having to post here due to the question closure, which I also feel is in error. In my case I have conflicts between CSS libraries in different parts of a page (an angular ui embedded within a bootstrap based admin ui from django). The approach I'm about to try is embedding one in an iframe. – Chris Jan 06 '17 at 07:46
  • Newer versions of bootstrap provide .less or .scss format, which can be easily wrapped by your custom wrapper to achieve scoping. like: #section1 { } – Shawn Feb 24 '17 at 16:17
1

An external stylesheet is applied to whole html page. In order to apply different stylesheets to different portions, Firstly, the html page has to be divided into different sections using the html tag ( with each html div to be assigned a unique id or class) Secondly, the external stylesheet to be applied to each div has to be designed according to the id/class assigned to it

Example as explained above by Gaby aka G. Petrioli...

kapil
  • 851
  • 12
  • 14
0

Use different class for each part in your web page and customize the CSS code for each class.

Ahmed Aman
  • 2,373
  • 1
  • 19
  • 33