HOW TO AVOID CSS STYLES CONFLIT USING DIFFERENTS UI COMPOTENT IN SAME WEB PAGE

Bootstrap Studio Help
1

I have a web page with different parts which require different css stylesheets to be applied to each. I create these parts seperaly in BBS. 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. Who can help me?

2

I'd suggest wrapping each of the elements in a DIV with an id. This will give you the possibility to target in the CSS.

Example:

<div id="item1">
  <div class="component">...</div>
</div>
....
<div id="item2">
  <div class="component">...</div>
</div>

Then in the CSS selector you can use:

#item1 .component {
    CSS for component 1
}

#item2 .component {
    CSS for component 2
}
3

To bet Frank, you shouldn't have built your site that way. You should have shared the main CSS between on builds so that you wouldn't have ran into something like that.

Any who, if you built your site something like the following

Page #1 CSS

.component1 {
    CSS for component 1
    background: red;
}
.component2 {
    CSS for component 2
    background: blue;
}

Page #1 HTML

<div class="component1">
    ...
</div>
<div class="component2">
    ...
</div>

And then Page 2 as

Page #2 CSS

.component1 {
    CSS for component 1
    background: green;
}
.component2 {
    CSS for component 2
    background: orange;
}

Page #2 HTML

<div class="component1">
    ...
</div>
<div class="component2">
    ...
</div>

You can simply add a class to page 1 like page1 to the body element and on page 2 add class page2

So they look like

Page #1 HTML

<body class="page1">
    ...
    <div class="component1">
        ...
    </div>
    <div class="component2">
        ...
    </div>
</body>

Page #2 HTML

<body class="page2">
    ...
    <div class="component1">
        ...
    </div>
    <div class="component2">
        ...
    </div>
</body>

Then you can update your CSS for both page 1 and 2 as Page #1 CSS

.page1 .component1 {
    CSS for component 1
    background: red;
}
.page1 .component2 {
    CSS for component 2
    background: blue;
}

Page #2 CSS

.page2 .component1 {
    CSS for component 1
    background: green;
}
.page2 .component2 {
    CSS for component 2
    background: orange;
}

This is easy to do without possibly drastically changing your HTML markup. Has less specificity than using an ID and it probably more semantic as well. And usable for all elements that are in conflict.

Saj

EDIT: updated CSS and HTML so they weren't overriding each other

4

Yes you'll need to do as Ruprect suggests because at this time you cannot set up specific style sheets per page at all. What you "Can" do is set your pages to have a page ID and set up specific ID's within your CSS to apply to them accordingly. Here's a link to help with that setup:

https://www.cvwdesign.com/blog/creating-specific-page-styles-with-css

5

A good read on CSS Specificity. Probably sound reasoning to not use ID's for styling unless you absolutely need it.

Personally have stopped using ID's recently for styling and mainly only use them for JS targeting.

Saj

6

rather than just saying "you should't have set up your page this way" it's important to remember that people (me!) don't want to re-invent the wheel ;-D a very common situation where this occurs is where one uses a builder program to set up most of a site (that program providing an initial stylesheet) but one wishes the site to have a feature not available in that builder (say a blog -- for which one finds a template, with its own CSS) -- hence, one is left with two, conflicting, stylesheets -- but the one for the blog might have much better typography than the former, which won't be available if the conflicts aren't resolved -- sadly, I fear my understanding of CSS is not yet sufficient to understand this solution yet -- incidentally I think I found this discussed in "a post" (discussion) on StackOverflow (StackExchange?) and the "prevailing wisdom" favoured Saj's approach, at that time (couple of years ago)

7

any further comments (put this in to get email notification of responses -- new here -- how does one edit after posting -- get further notifications otherwise?