www.webdeveloper.com
Results 1 to 7 of 7

Thread: 2 css style sheets. how to remedy conflicting styles?

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356

    2 css style sheets. how to remedy conflicting styles?

    I have 2 stylesheets (say style1.css and style2.css).

    style1.css has
    Code:
    a {color:#333; text-decoration:underline;}
    style2.css has
    Code:
    a {color:#fff; text-decoration:none;}
    For some reason style2.css overrides style1.css (even though style1.css is called before style2.css in the code), and I want the links on the pages to be white with no underline.

    So, I did this to solve the issue:

    style1.css
    Code:
    a {color:#fff !important; text-decoration:none !important;}
    Using the !important worked. Is that an acceptable solution? Thoughts?
    Last edited by Captainkewl; 02-25-2014 at 03:24 PM.

  2. #2
    Join Date
    Oct 2013
    Posts
    486
    Just for your information: CSS stands for Cascading Style Sheets. Part of the "Cascade" is that the last style seen, or the closest style to the element is the one used. So style2.css was closer than style1.css, therefore it claimed precedence for the styles for the "a" tag. !important overrides everything which is why it worked for you.

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    In the header I have:

    <link href="style2.css" rel="stylesheet" type="text/css" />
    <link href="style1.css" rel="stylesheet" type="text/css" />

    I also tried reversing the 2, but style2.css always overrides the "a" tag in style1.css

    Am I missing something here?

  4. #4
    Join Date
    Oct 2013
    Posts
    486
    You could add class="white" to the a tags you want to be white, then in the appropriate css file change the a selector to a.white.

  5. #5
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks for the input. Basically another developer had to add additional functionality to the site and required his own css file. His "a" styles overwrote mine. I think using "classes" as you suggested would be the appropriate resolution. Thanks

  6. #6
    Join Date
    Mar 2012
    Posts
    1,514
    This illustrates the conceptual weakness of cascading style sheets. They can become a maintenance nightmare, particularly in a multi-developer environment. You really need a protocol over making changes to shared resources such as style sheets.

  7. #7
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    There is a few ways to override styles with CSS.

    Specifity - for example body a { } would override just a { }
    Cascading - a { } then an a { } further down the stylesheet would override the previous a.
    Then finally using !important which is rarely needed unless dealing with third party styles added to the page, like facebook or pinterest widgets.

    Good luck with your CSS!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles