Simple CSS Question

Question

Here's the CSS

.box {
    background-color: #CCCCCC;
}
.box-title {
    font-size: small;
    font-weight: bold;
    color: #000000;
    background-image: url(/icons/bg.png);
    background-repeat: repeat-x;
}
.box-content-container {
    background-color: #FFFFFF;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
color: #000000;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
} 

a.tag18:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
a.tag18:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: underline;
}
a.tag18:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
a.tag18:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

And the HTML

<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="1" class="box">
  <tr>
    <th class="box-title-header" scope="col">Categories </th>
  </tr>
  <tr>
    <td class="box-content-container">
        <div align="center">
        <a class="tag18" href="http://www.site.com">Category 1</a>    
        </div>
        <p>&nbsp;</p>
    </td>
  </tr>
</table>

Q. Why does the font size not appear as 18px high, as defined in the CSS?

EDIT:

I'd like to create one CSS style for most hyperlinks. I believe this is achieved with a:link

For additional styles you can create .style1 ...

Question
Can a:link exist with a:style1? It seems a:link overrides the style.

Answer
a:link overrides any a.pseudo-class. For multiple styles use a:link, then additional hyperlink styles require ' .classname a:link ' This can be achieved in HTML with [ span class = 'classname' ] .

No need for a:link... just use 'a'. If you want a certain link to look a certain way just use a class. a {} will override anything unless you specify a class .className {} — st4ck0v3rfl0w
– st4ck0v3rfl0w, Commented Jul 21, 2010 at 4:43

msw · Accepted Answer · 2010-07-20 22:58:11Z

3

Have you tried

.tag18 {font-size:18px;}

It is best to not repeat CSS directives, let them cascade. Meaning, if .tag18 is going to be a certain family font and size, just set it within .tag18 and do your hovers with text-decoration, color, etc

edited Jul 20, 2010 at 22:58

msw

43.7k9 gold badges92 silver badges117 bronze badges

answered Jul 20, 2010 at 22:49

st4ck0v3rfl0w

6,76516 gold badges47 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

st4ck0v3rfl0w Over a year ago

Btw, try not to repeat CSS lines. Meaning, if .tag18 is going to be a certain family font and size, just set it within .tag18 and do your hovers with text-decoration, color, etc

rrrfusco Over a year ago

I have a:link etc... defined also.

msw Over a year ago

@st4ck0v3rfl0w - well said. Generally it is best to edit your answer rather than comment on it. I took the liberty on your behalf.

R. Hill Over a year ago

@rrrfusco: :link etc. will inherit properties of the normal state, no need to repeat. So as suggested, just assign font size and family to the normal state, and derived state (pseudoclasses) will inherit theses. The pseudoclasses are there just to have special visuals for when they are triggered.

rrrfusco Over a year ago

@st4ck, I re-phrased my question at the end.

|

Jimmy · Accepted Answer · 2010-07-20 22:52:34Z

1

The :link and :visited pseudo-classes must be defined before you define the :hover and :active

http://www.w3schools.com/CSS/css_pseudo_classes.asp

Just move your style declarations around and you'll be good

answered Jul 20, 2010 at 22:52

Jimmy

5554 silver badges15 bronze badges

1 Comment

rrrfusco Over a year ago

I re-phrased my question at the end.

Shawn D. · Accepted Answer · 2010-07-21 03:37:37Z

0

Have you tried testing it with Firebug?

http://getfirebug.com/

Once installed, you can inspect the element, and it will show you the CSS selectors that apply to it, including which ones override parent declarations. I've found it helps A LOT.

answered Jul 21, 2010 at 3:37

Shawn D.

8,1458 gold badges38 silver badges49 bronze badges

Collectives™ on Stack Overflow

Simple CSS Question

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related