#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Houston, TX, US
    Posts
    75
    Rep Power
    13

    CSS > Inheriting Style


    I'm struggling to understand how styles are inherited. My problem is this... I want to have more than one style for anchor tags, but am not successful in doing so. Here is what is in my stlye sheet...

    Code:
    A:link {
    		font-family: Tahoma, Verdana, sans-serif;
    		font-size: 11px;
    		color: #336699;
    		}
    
    A:visited {
    		font-family: Tahoma, Verdana, sans-serif;
    		font-size: 11px;
    		color: #6699CC;
    		}
    
    A:hover {
    		font-family: Tahoma, Verdana, sans-serif;
    		font-size: 11px;
    		color: #003366;
    		}
    
    .second_style {	
    		font-family: Tahoma, Verdana, sans-serif;
    		font-size: 15px;
    		color: #0000FF;
    		font-weight: bold;
    		text-decoration: none;
    		}
    This causes EVERY linkable text have these attributes. However, when I want to have a different style, and assign it a different CLASS, it no workee. Like this:

    Code:
    <A HREF="yada.htm" CLASS="second_style">Text Here</A>
    Still, the style has the global anchor style. What am I doing wrong? I've even tried an inline SPAN style inside the anchor tag, without success.

    Thanks in advance!
    Last edited by bamaster; January 7th, 2002 at 03:18 PM.
    Tony Melendez
    tony dizat amerigo dizot com
    http://www.amerigo.com
  2. #2
  3. No Profile Picture
    Bringer of the Bling
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    Orlando, FL
    Posts
    68
    Rep Power
    14
    Psuedo classes have a higher precedence than regular classes.

    In your case,

    a:link is a psuedoclass and .second_style is a regular class.
    so a:link overrides .second_style.


    You can fix this by using a generic anchor style like:

    A {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    color: #336699;
    }
    (this is basically the same thing as A:link anyway so I would do it this way)
    or by making the second_style class apply solely to the anchor element with

    A.second_style {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 15px;
    color: #0000FF;
    font-weight: bold;
    text-decoration: none;
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Houston, TX, US
    Posts
    75
    Rep Power
    13
    Thank you. I was not aware of Pseudo Classes. Good to know. I will make those edits.

    Followup question:
    within "A.second_style{}", is it possible to assign Hover and Visited attributes?

    Thanks again!
    Tony Melendez
    tony dizat amerigo dizot com
    http://www.amerigo.com
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Houston, TX, US
    Posts
    75
    Rep Power
    13
    I've kinda answered my own question, heh. I just kept the Pseudo Class but only with the hover properties...

    Code:
    A:link {
    		color: #336699;
    		}
    
    A:visited {
    		color: #6699CC;
    		}
    
    A:hover {
    		color: #003366;
    		}
    	
    .second_style {	
    		font-family: Tahoma, Verdana, sans-serif;
    		font-size: 13px;
    		color: #336699;
    		font-weight: bold;
    		text-decoration: none;
    		}
    Works like a charm!

IMN logo majestic logo threadwatch logo seochat tools logo