css CSS ID Class Help

[kman1985]

I have an ID called 'self' that makes the link of the current viewing page bold and a different color. But i use this twice, so it probably should be a class. But when I make it a class, it makes the link bold, but does not change the color. Am i doing somehting wrong? or should i just make it 2 classes. Its just going to be used twice for my header and footer. I could create 2 IDs for head and foot, but I want to try to work this out. Thanks

HTML:

<ul>
<li><a href="index.html" id="self">Home</a></li>
...
...
...
</ul>
[/CODE]

CSS:

[CODE]
.self {
color: #996633;
font-weight: bold;
}
[/CODE]

[the better twin]

In your example your link is an id but your css a class?

<ul>
<li><a href="index.html" class="self">Home</a></li>
.........
</ul>
[/CODE]

[CODE]
a.self{
color:#996633;
font-weight:bold;
}
[/CODE]

That should work as the css targets the anchor tag with a class of self.

[mollick2]

In the CSS your targeting a class called self.

You need to use a hashtag to target IDs.

#self {

}

[kman1985]

@the better twin, it still does not work. I mean it makes it bold, but does not change color. Does same as if i left it as .self{}.

[winlonghorn]

@the better twin, it still does not work. I mean it makes it bold, but does not change color. Does same as if i left it as .self{}.

In your css, try the following (just in case the link has been clicked already and is in a visited state):

a.self:visited {
   color:#996633;
   font-weight:bold;
}
[/CODE]

EDIT: Nevermind, I just noticed that you mentioned that it does bold the text. Sorry about that.

[Kpssst]

Change to the following:

HTML:

<ul>
  <li><a href="index.html" class="self">Home</a></li>
  ...
</ul>
[/CODE]

CSS:

[CODE]
li a.self {
color: #996633;
font-weight: bold;
}
[/CODE]

Edited April 25, 2012 by geeman89

[winlonghorn]

Change to the following:

HTML:

<ul>
  <li><a href="index.html" class="self">Home</a></li>
  ...
</ul>
[/CODE]

CSS:

[CODE]
li.self {
color: #996633;
font-weight: bold;
}
[/CODE]

The following would work too right?:

[CODE]
li a.self {
color: #996633;
font-weight: bold;
}
[/CODE]

[Kpssst]

The following would work too right?:

li a.self {
  color: #996633;
  font-weight: bold;
}
[/CODE]

Right sorry. Left out the [font=courier new,courier,monospace]a[/font].

[winlonghorn]

Right sorry. Left out the a.

No problem. I was just making sure that I wasn't misunderstanding. Thank you! :)

[kman1985]

I think i'm jus gonna add style to the html. Since i'm only using this twice.

HTML:

<ul>
<li><a href="index.html" style="color: #996633; font-weight: bold;">Home</a></li>

...
...
...
</ul>
[/CODE]

[winlonghorn]

I think i'm jus gonna add style to the html. Since i'm only using this twice.

HTML:

<ul>
<li><a href="index.html" style="color: #996633; font-weight: bold;">Home</a></li>

...
...
...
</ul>
[/CODE]

Honestly, I wouldn't recommend that because it makes it harder to read the code and it doesn't maintain the idea of seperating the content from the presentation. To each their own though! :)

[LaP]

a.self:link, a.self:visited, a.self:hover, a.self:active{some css}

[winlonghorn]

a<span class="kwd"><span style="font-family: monospace;">.</span>self</span>:link, a.<span class="kwd">self</span>:visited, a.<span class="kwd">self</span>:hover, a.<span class="kwd">self</span>:active{some css}

lol, wow! :s