CSS Question - templates

[MrMaster]

Yes, my html skills need help but this problem is really bugging me.

I have a template that I use on every page. In that template, a CSS style for ALL is set that every link is white.

Well, in the body, which is a white background, means you can't see any of my links.

I can't seem to use a new style sheet or edit the color to something else? Is there a simple answer to this?

1. i want white links on black background in template.
2. i want black links on white background in body.

Thanks.

 

[Titan]

Where is your style sheet? In a separate file, in the head, or inline? You have 3 options here, each one overrides the previous.

The body is the whole visible page. So how is your "template" defined? If it is contained within the body, you need a CSS selector that overrides the body.

 

[Aluvus]

The cleanest way to do this is to give the parent element in your navigation section (or whatever it is that is repeated on every page) a class, so that you can specifically target that section and its children. You may want to do the same for the section containing the content. For instance:

In the CSS (in the document head or preferably in an external file:

.nav a
{
color: white;
}

.content a
{
color: black;
}

And then in the HTML:

<div class="nav">Stuff goes here</div>

<div class="content">More stuff goes here</div>

Also, it is not generally a good idea to make links black unless the body text is some other, clearly different color. Links should always be easy to find at a glance.

 

[Woosta]

Originally posted by: Aluvus
The cleanest way to do this is to give the parent element in your navigation section (or whatever it is that is repeated on every page) a class, so that you can specifically target that section and its children. You may want to do the same for the section containing the content. For instance:

In the CSS (in the document head or preferably in an external file:

.nav a
{
color: white;
}

.content a
{
color: black;
}

And then in the HTML:

<div class="nav">Stuff goes here</div>

<div class="content">More stuff goes here</div>

Also, it is not generally a good idea to make links black unless the body text is some other, clearly different color. Links should always be easy to find at a glance.

Though, you should be using IDs for unique sections of the page so the nav and content should not be class attribute values/classes.

 

[MrMaster]

Thanks for the suggestions.

 

[pubicenemy]

Along with what others have posted, organization of your content is key. You can set a base color that will be inherited by all links in the document, say if the body background is white you can set the default anchor color by declaring

a:link{color:black;}

and then if you have specific divs with colored backgrounds that you want the links to show up as white you combine selectors like

#darkbackgrounddiv a {color:white;}

 

[Aluvus]

Originally posted by: Woosta

Though, you should be using IDs for unique sections of the page so the nav and content should not be class attribute values/classes.

Agree, not sure why I chose classes instead of IDs.