SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict smcausland's Avatar
    Join Date
    Jul 1999
    Location
    Victoria, BC, Canada
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using inline style sheets to override a linked style sheet

    I am using a universal style sheet to make rollovers work for links on my site but I now have links that because of background colors where I want them to ignore the universal sytle sheet. I tried using an inline style sheet to treat the links diffrently but to no avail. Is what I want to do possible or am I just spinning my wheels?

    TIA,
    www.treelinestudio.com
    Online Showcase of works by Canadian Watercolour artist David Brougham.

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about giving them a different class name? That should override the main CSS. :-)

    ~~Ian

  3. #3
    SitePoint Addict smcausland's Avatar
    Join Date
    Jul 1999
    Location
    Victoria, BC, Canada
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was thinking that and fought with it for a bit and thought maybe I was missing something. Apparently I was on the right track and just have to keep pushing along.

    Thanks.
    www.treelinestudio.com
    Online Showcase of works by Canadian Watercolour artist David Brougham.

  4. #4
    SitePoint Addict smcausland's Avatar
    Join Date
    Jul 1999
    Location
    Victoria, BC, Canada
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is driving me nuts!!

    Here is the style external style sheet I am using

    .tester { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; text-decoration: none; color: white}
    a:active { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; text-decoration: none; color: white}
    a:link { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; text-decoration: none; color: white}
    a {font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: white
    }
    a:hover {font-size: 12px; font-weight: bold; color: yellow}

    So I tried creating another set called .gr where all the links were blue and putting the links I want in blue within a div tag with class="gr" and I still can't get the damn thing to work.
    www.treelinestudio.com
    Online Showcase of works by Canadian Watercolour artist David Brougham.

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Be sure to place your anchor/link pseudo-classes in the correct order.

    Code:
    a:link {...}
    
    a:visited {...}
    
    a:hover {...}
    
    a:active {...}
    You don't need to include all the pseudo-classes, but just make sure those that are included run in the correct order.

    Putting them in the wrong order is the most common reason why they don't work.

    The CSS file in your post becomes...

    Code:
    .tester {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: white
    }
    
    a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: white
    }
    
    a:hover {
    font-size: 12px;
    font-weight: bold;
    color: yellow
    }
    Incidentally, when specifying pseudo-classes for text links, you only need to specify those aspects that differ from the default a:link attributes.

    Also a {... is the same as a:link {... so there is no need to specify both.

    See the W3Schools pseudo-classes page for more info on how to use them on their own and how to use pseudo-classes in conjunction with 'proper' classes.

    e.g.
    Code:
    a.gr:link {...}
    ...
    p.s.
    It's not generally a good idea to change the font-size in a text link during rollover.
    Not only does it tend to 'throw' the user's eye, but it can also create layout problems as surrounding text/links is pushed around to make space for the larger font size.

    Changing the font-weight for rollover links also creates the same problem with throwing the eye and can also cause surrounding text to shift.

    It is better to stick to affecting just those attributes that are less disruptive to the space/layout such as the text-decoration and color.


    Anywho, hope all this helps.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Addict smcausland's Avatar
    Join Date
    Jul 1999
    Location
    Victoria, BC, Canada
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly what I was looking for.

    I had been at the W3's page and several others for the past couple hours and just wasn't getting it but now it finally clicked, Thanks.

    I know it's a bad idea to up the font size but I did finally get it by keeping my text to small lengths and forcing it into a table. I like the way it catches the eye and I figure you should do one thing crazy that scares you and that was mine last week!!

    Thanks again I can now start glueing my hair back in.
    www.treelinestudio.com
    Online Showcase of works by Canadian Watercolour artist David Brougham.


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
  •