1 Reply Latest reply on Feb 26, 2010 6:49 AM by Zabeth69

    Overriding externally linked CSS

    FlashTapper Level 1

      Hi there,

       

      Hope someone has an easy solution to my problem. I need to have one externally linked stylesheet override certain style element within another (heading tags). Basically my resource has its own CSS but I have been told by the "managers" it needs to be put in a page with our resource branding applied to it (this is done via another external stylesheet).

       

      One suggested solution from http://www.yourhtmlsource.com/stylesheets/advancedcss.html whereby the last imported stylesheet overrides the elements in the previosuly imported one. This doesn't work. Even putting "!important" next to the style descrptions within the CSS does not work (i think it only works when trying to ovveride inline styles).

       

      Is there any quick solution to this other than me having to make custom classes for the heading tags (and a heck of a lot more work!)

       

       

      Regards,

      Ryan

        • 1. Re: Overriding externally linked CSS
          Zabeth69 Level 5

          Before you dismiss things like custom classes, here's another take on the topic: Put some kind of contextual id (if it's the Contact Us page, make the body ID "contactuspage", for example) on the body (or other enclosing container) of the page in question. Then you can make specific adjustments to the heading tags in question.

           

          Say you have styled h1 for your entire site this way:

          h1 {color: green; line-space: 1.5em;}

          In use, you don't have to add anything at all to the h1 tag, anywhere and everywhere h1 will be green with line-space 1.5em.

           

          On the "Contact Us" page, you want to style h1 in red with line-space 1em:

          add an ID to the Contact Us page: <body id="contactuspage">

           

          make a style:

          #contactuspage h1 {color: red; line-space: 1em;}

          Because this selector is more specific...it specifies that all h1 tags within the #contactuspage have this new style...it should work no matter where it is defined. Even if you redefined plain old h1 to blue, #contactuspage h1 will keep its red styling.

           

          This will require you to add some kind of contextual id to some containing element on the pages you want to affect, but that's it...just create the styles in the style sheet, and you don't have to mess up the rest of your page markup.

           

          Beth