SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Boston
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overiding External Style Sheets

    Hello everyone,

    I'm having an issue where I need to overide my external style sheet later on in the page.

    I assign a:link, a:hover, etc certain colors, but those colors only work with a dark background. I have a portion of my site on a light background, and those css assignments don't work. I'm trying to apply the style locally, but I can't get the syntax right.

    Any ideas? Thanks

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Likely the easiest way to do it would be to use descendant selectors in your stylesheet to assign different colors to any links located in the lighter portion of the site. For example if the lighter area is a <div> with a class of "pale" you could match your anchors in css via:
    HTML Code:
    div.pale a:link {
      property: value;
    }
    div.pale a:hover {
      foo: bar;
    }
    etc.

    This could go in either the external stylesheet or in the <style> element in the <head> section of your page.

  3. #3
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use an embedded stylesheet on the pages where u need to change the link colours...

    AFTER you use the link tag, in your head tag, for your external stylesheet, place the following code..

    <style type="text/css">
    <!--
    a { color: blue; text-decoration: none; }
    //->
    </style>

    just add any styles you want to the code above, and it should override the external stylesheet's rules..
    Daniel Balsdon
    My Site

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Also, if you use !important after your rule, it will take higher priority, unless of course some other stylesheet also uses !important.
    Code:
    a {
      color: red !important;
    }

  5. #5
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Boston
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick replies everyone. I used the descendant selector method in the external style sheet, and it worked like a charm.


Bookmarks

Posting Permissions

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