make css apply to a chunk of html

Question

MDGM 22 Posting Whiz in Training

19 Years Ago

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]" ><font size="-2">Home</font></a><font size="-2"> 
        | <a href="<A href="">Gallery</a">">Gallery</a> | <a href="<A href="">Adobe">">Adobe 
        Gallery</a> | <a href="<A href="">Art">">Art Packages</a> 
        | <a href="<A href="">Customise</a">">Customise</a> | <a href="<A href="">Buy</a">">Buy</a> 
        | <a href="<A href="">The">">The Process</a> | <a href="<A href="">Special">">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!!!

html-css web-design

5 Contributors
17 Replies
202 Views
1 Week Discussion Span
Latest Post 19 Years Ago Latest Post by MDGM

Dani AI

Generated 6 Months Ago

Short, practical fix plus a few best-practice notes.

Scope the link rules to a container instead of trying to override the global a rules. ’s idea (a dedicated selector) was the right direction — the real blocker in the thread was malformed HTML (nested anchors and leftover font tags) that kept styles from applying cleanly; corrected some of that but the markup still needed cleanup. Fix the HTML first, then apply scoped CSS.

Use a small semantic wrapper and keep the links as a list so they’re predictable and easy to style. Example structure:

<nav id="backup-links">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Buy</a></li>
  </ul>
</nav>

Then add scoped rules that will override the site-wide rules because they’re more specific (ID selector) or placed after the global stylesheet:

#backup-links a { color: #000; text-decoration: none; }
#backup-links a:visited { color: #333; }
#backup-links a:hover { color: #999; text-decoration: underline; }

Quick troubleshooting checklist: (1) Validate/clean your HTML — nested <a> tags are invalid and break behavior. (2) Inspect the element with browser DevTools to see which rule wins and why. (3) Remember specificity and stylesheet order; use !important only as last resort. For per-cell designs (your later question), give each td a class or id and set background-image in CSS — classes for repeated cells, ids for unique ones. Finally, the table-versus-CSS layout debate (see and ) aside, it’s fine to keep tables where they make sense; just separate structure (HTML) from presentation (CSS) and keep the markup valid.

All 17 Replies

BinaryMayhem 2 Unverified User

19 Years Ago

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="" ><font size="-2">Home</font></a><font size="-2"> 
        | <a href="<A class="backup" href="">Gallery</a">">Gallery</a> | <a class="backup" href="<A href="">Adobe">">Adobe 
        Gallery</a> | <a class="backup" href="<A href="">Art">">Art Packages</a> 
        | <a href="<A class="backup" href="">Customise</a">">Customise</a> | <a href="<A class="backup" href="">Buy</a">">Buy</a> 
        | <a href="<A class="backup" href="">The">">The Process</a> | <a href="<A class="backup" href="">Special">">Special 
      Offers</a></font></font></div></td>

BinaryMayhem 2 Unverified User

19 Years Ago

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="">....</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="" >
<font size="-2">Home</font></a><font size="-2"> 
        | <A class="backup" href="">Gallery</a">
        | <a class="backup" href="">Adobe Gallery</a>
        | <A class="backup" href="">Art Packages</a> 
        | <A class="backup" href=""Customise</a>
        | <A class="backup" href="">Buy</a> 
        | <A class="backup" href="">The Process</a>
        | <A class="backup" href="">Special Offers</a>
</font></font></div></td>

tgreer 189 Made Her Cry

19 Years Ago

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 2 Unverified User

19 Years Ago

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

BinaryMayhem 2 Unverified User

19 Years Ago

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.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
http://www.w3schools.com/css/default.asp

http://www.digital-web.com/articles/fluid_thinking/

everthing is working correctly now right?
good luck.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MDGM 22 Posting Whiz in Training · Answer 1 · 2006-11-04T14:27:14+00:00

<a href="<A class="backup" href="">

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="" ><font size="-2">Home</font></a><font size="-2"> 
        | <a class="backup" href="<A href="">Gallery</a">">Gallery</a> | <a class="backup" href="<A href="">Adobe">">Adobe 
        Gallery</a> | <a class="backup" href="<A href="">Art">">Art Packages</a> 
        | <a class="backup" href="<A href="">Customise</a">">Customise</a> | <a class="backup" href="<A href="">Buy</a">">Buy</a> 
        | <a class="backup" href="<A href="">The">">The Process</a> | <a class="backup" href="<A href="">Special">">Special 
      Offers</a></font></font></div></td>

Thanks again.

MDGM 22 Posting Whiz in Training · Answer 2 · 2006-11-05T04:11:44+00:00

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

MDGM 22 Posting Whiz in Training · Answer 3 · 2006-11-05T14:29:11+00:00

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 473 Veteran Poster Team Colleague Featured Poster · Answer 4 · 2006-11-07T01:11:49+00:00

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 22 Posting Whiz in Training · Answer 5 · 2006-11-12T16:10:23+00:00

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

Member #114696 · Answer 6 · 2006-11-12T16:46:39+00:00

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 22 Posting Whiz in Training · Answer 7 · 2006-11-12T17:11:16+00:00

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

Member #114696 · Answer 8 · 2006-11-12T17:19:23+00:00

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 22 Posting Whiz in Training · Answer 9 · 2006-11-12T18:14:29+00:00

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?

Member #114696 · Answer 10 · 2006-11-12T21:25:49+00:00

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

Member #114696 · Answer 11 · 2006-11-12T21:26:52+00:00

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 22 Posting Whiz in Training · Answer 12 · 2006-11-12T22:14:55+00:00

MDGM 22 Posting Whiz in Training

19 Years Ago

ok thanks

make css apply to a chunk of html

Dani AI

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers