make css apply to a chunk of html

[MDGM]

hi all!!

This is my text only back-up menu at the bottom of my page, but the colours from my origional external css sheet look bad on its background, so how do i make them a different colour? Here is the code for the hyperlink:

<tr>
    <td>&nbsp;</td>
    <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a href="[URL]http://www.themepics.co.uk/[/URL]" ><font size="-2">Home</font></a><font size="-2"> 
        | <a href="<A href="http://www.themepics.co.uk/gallery">Gallery</a">http://www.themepics.co.uk/gallery">Gallery</a> | <a href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
        Gallery</a> | <a href="<A href="http://www.themepics.co.uk/art-packages">Art">http://www.themepics.co.uk/art-packages">Art Packages</a> 
        | <a href="<A href="http://www.themepics.co.uk/customise">Customise</a">http://www.themepics.co.uk/customise">Customise</a> | <a href="<A href="http://www.themepics.co.uk/buy">Buy</a">http://www.themepics.co.uk/buy">Buy</a> 
        | <a href="<A href="http://www.themepics.co.uk/process">The">http://www.themepics.co.uk/process">The Process</a> | <a href="<A href="http://www.themepics.co.uk/offers">Special">http://www.themepics.co.uk/offers">Special 
      Offers</a></font></font></div></td>
    <td>&nbsp;</td>
  </tr>

Here is my css code that i have at the moment:

.stylesheet1 {
 font-family: arial;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-variant: normal;
 color: #000000;
 text-align: left;
}
a:link{
color: #990000;
text-decoration: none;
}
a:visited{
color: #AF1E2D;
text-decoration: none;
}
a:hover{
color: #808080;
text-decoration: underline;

and here is how i want the hyperlinks to look like:

a:link{
color: #000000;
text-decoration: none;
}
a:visited{
color: #333333;
text-decoration: none;
}
a:hover{
color: #999999;
text-decoration: underline;

Thanks!!!

[BinaryMayhem]

CSS:

a.backup:link{
color: #000000;
text-decoration: none;
}
a.backup:visited{
color: #333333;
text-decoration: none;
}
a.backup:hover{
color: #999999;
text-decoration: underline;

HTML:

<td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a class="backup" href="http://www.themepics.co.uk/" ><font size="-2">Home</font></a><font size="-2"> 
        | <a href="<A class="backup" href="http://www.themepics.co.uk/gallery">Gallery</a">http://www.themepics.co.uk/gallery">Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
        Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/art-packages">Art">http://www.themepics.co.uk/art-packages">Art Packages</a> 
        | <a href="<A class="backup" href="http://www.themepics.co.uk/customise">Customise</a">http://www.themepics.co.uk/customise">Customise</a> | <a href="<A class="backup" href="http://www.themepics.co.uk/buy">Buy</a">http://www.themepics.co.uk/buy">Buy</a> 
        | <a href="<A class="backup" href="http://www.themepics.co.uk/process">The">http://www.themepics.co.uk/process">The Process</a> | <a href="<A class="backup" href="http://www.themepics.co.uk/offers">Special">http://www.themepics.co.uk/offers">Special 
      Offers</a></font></font></div></td>

[MDGM]

<a href="<A class="backup" href="http://www.themepics.co.uk/gallery">

Ok cos there is a small glitch in the html i put class="backup" after the <a and before the href="... . I pasted the css into my style sheet i was using for the page, which already contains info about how my hyperlinks should be. this is what each of my things look like at the moment:

.stylesheet1 {
 font-family: arial;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-variant: normal;
 color: #000000;
 text-align: left;
}
a:link{
color: #990000;
text-decoration: none;
}
a:visited{
color: #AF1E2D;
text-decoration: none;
}
a:hover{
color: #808080;
text-decoration: underline;
a.backup:link{
color: #000000;
text-decoration: none;
}
a.backup:visited{
color: #333333;
text-decoration: none;
}
a.backup:hover{
color: #999999;
text-decoration: underline;
}

    <td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif"><a class="backup" href="http://www.themepics.co.uk/" ><font size="-2">Home</font></a><font size="-2"> 
        | <a class="backup" href="<A href="http://www.themepics.co.uk/gallery">Gallery</a">http://www.themepics.co.uk/gallery">Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe">http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe 
        Gallery</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/art-packages">Art">http://www.themepics.co.uk/art-packages">Art Packages</a> 
        | <a class="backup" href="<A href="http://www.themepics.co.uk/customise">Customise</a">http://www.themepics.co.uk/customise">Customise</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/buy">Buy</a">http://www.themepics.co.uk/buy">Buy</a> 
        | <a class="backup" href="<A href="http://www.themepics.co.uk/process">The">http://www.themepics.co.uk/process">The Process</a> | <a class="backup" href="<A href="http://www.themepics.co.uk/offers">Special">http://www.themepics.co.uk/offers">Special 
      Offers</a></font></font></div></td>

Thanks again.

[BinaryMayhem]

hmm, well I quickly edited the code you had and didn't really look at your HTML. it appears you had <A href="<a href="http://...">....</a>... </a>

you should really be neater with your html. also, font tags and tables are depreciated. you should be using all css. font-family:arial; font-size:medium;

any who, here is what you should have. I straigted it up really quick.

<td height="20" class="stylesheet3" valign="bottom" body><div align="center" ><font face="Arial, Helvetica, sans-serif">
<a class="backup" href="http://www.themepics.co.uk/" >
<font size="-2">Home</font></a><font size="-2"> 
        | <A class="backup" href="http://www.themepics.co.uk/gallery">Gallery</a">
        | <a class="backup" href="http://www.themepics.co.uk/adobe%20photo%20gallery/adobe_gallery.htm">Adobe Gallery</a>
        | <A class="backup" href="http://www.themepics.co.uk/art-packages">Art Packages</a> 
        | <A class="backup" href="http://www.themepics.co.uk/customise"Customise</a>
        | <A class="backup" href="http://www.themepics.co.uk/buy">Buy</a> 
        | <A class="backup" href="http://www.themepics.co.uk/process">The Process</a>
        | <A class="backup" href="http://www.themepics.co.uk/offers">Special Offers</a>
</font></font></div></td>

[tgreer]

You mean "deprecated", right? Font tags are. Tables are not. For certain pages/applications, tables are still the best way to control layout. This forum (any forum) for instance, uses CSS extensively, but the overall structure of the site is tabular.

[BinaryMayhem]

yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.

Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers (refer to checkpoint 10.3).

http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup

[MDGM]

yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.

oh well i dont really understand how to layout pages with css. I find tables are good because you can do things like make all text line up or have a pic as a border to a text box etc. Its also nice to use with templates on DWMX cos its very fast to edit.

Do you know of any good sites which can teach me to use css well?

thanks,
Max

[BinaryMayhem]

your not gona learn css over night. it will take time and experince to understand what is going on. your best off learning from what other peoples work.

here are some quick links.

http://www.glish.com/css/
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
http://www.w3schools.com/css/default.asp
http://www.sitepoint.com/subcat/css
http://www.digital-web.com/articles/fluid_thinking/

everthing is working correctly now right?
good luck.

[MDGM]

well almost but ill try to learn it and do it myself because i will be able to use it in the future more :) thanks for your help.

Max.

[MattEvans]

yes, I was mainly referring to the font tags, however; some people make it a habbit to lay a site out with tables when they should be using css.

i'm going to absolutely disagree with you (and the w3c/wai) there. content is data; and until there's an effective replacement for tables, there's no way to do certain things without them.

for example, to make a page that fills the horizontal width of a screen always, has blocks of text and fixed sized blocks:

tables expand downwards rather than jump underneath each other, if the text is huge, the table compensates and all other parts of the table reflect that, and they degrade well if you're careful. They separate a page into clear areas, and you know they'll always be in the correct (relative) position, rather than having to "lock" or "push" things into place with css, which imo should be something that other people can change safely without knowing the inner workings of the designer's mind.

EDIT: i gotta add, table cells in xhtml strict/xhtml transitional/html 4 strict/transitional are possibly the only blocks that support vertical-align:center; that's a big thing.

solutions i've seen to split pages up how i'd like with divs/css have tons more markup than solutions with tables and css.

that one line by the wai is somewhat overquoted... the w3c have a good side and a bad side.. the good side provides a wealth of technical information and guidelines, and brings unrelated projects into a cohesion... the bad side trys to promote those guidelines as irrefutable law.

[MDGM]

one more quick question, with CSS can i set a design for each cell in a table? for example, have a picture for the background for the top left cell for each new table i make? thanks,

Max

[GreenDay2001]

well, you can do that when you give an id or class name to the top left cell of the table every time you makr it.

[MDGM]

ahhh ok i get it. The only thing is that that method wouldnt actually be much faster would it? or would it just make it easier and faster for the browser to read and download the page

[GreenDay2001]

what do you mean by faster, loading og pages?? well i wont really affect your loading of pages and probably not hurt you too :).

[MDGM]

lol thanks :P

lol one more question, how do i make an embedded css have two sections, one for an editable template region called header, and another for everything else?

[GreenDay2001]

I didnt understood your question well. But do you mean that you want to insert css in html file, if so use this inside your head tag

<style type="text/css">
....................
</style>

or if it is an externel file use this every time you embed any stylesheet

<link rel="stylesheet" href="general.css" type="text/css" />

vishesh

[GreenDay2001]

I didnt understood your question well. But do you mean that you want to insert css in html file, if so use this inside your head tag

<style type="text/css">
....................
</style>

or if it is an externel file use this every time you embed any stylesheet

<link rel="stylesheet" href="general.css" type="text/css" />

vishesh

[MDGM]

ok thanks