Jump to content

The most scalable way to use two styles?


Recommended Posts

The 10-second explanation of my problem:

  • I run a Wordpress CMS with a stylesheet that looks great
  • I installed a forum plugin that has dull styling
  • There are CSS stylesheets specific to this plugin that look great, but when they are installed they change the entire Wordpress theme

Can I run two stylesheets at once pointing at the same page? One would control the mother Wordpress theme and the other would control the elements specific to the forum plugin. If so, what happens when there is a "#content" class on each sheet? Can't they both just get along??


My code structure looks like this:


<div id="container">
<div id="content">
                      <div id="box">
                           <div id="containingdivfortheforum">
                                  [FORUM PLUGIN CODE]

<div id="sidebar">





Link to comment
Share on other sites

You can have multiple styles and stylesheets with no problem. The priority goes like this:


inline styles > on page (in the <head>) styles > external stylesheets.


So an inline style will override a style declared in the head of the document, and a style in the head of the document will override an external stylesheet.


If you have multiple selectors in the same area (i.e. both in an external stylesheet), then the one with higher specificity will take precedence.


If you have two selectors in the same area that have the same specificity, then the one that comes last will take precedence.

Link to comment
Share on other sites

Haku's answer is, of course, literally correct, one can always use inline styles to over-ride a previous style or stylesheet.  However, it is not recommended since the whole point of stylesheets is to get the styling OUT of the markup in the first place.  Also, it is way too involved and unwieldy to use inline styles in a CMS template without knowing basic PHP.


To answer your question, for your purposes (and intent),  you cannot apply the same select name, like "#content", with different attributes from two different stylesheets. The page willl only use the set of attributes for #content  from the last css file or stylesheet it read. This is the "cascade" in cascading style sheets (and what Haku meant by "specificity").


What most of us would do is to change any duplicate select name in the forum plugin's css file from "#content" to say "#forumcontent".


Then in the WP template:


<div id="forumcontent">




It is strange that a WP plugin would use the same select ID as a known standard WP select ID.


Good luck,



Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.