• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 18. Cascading Style Sheets and XHTML > Designing for the Real World

Designing for the Real World

Making Complex Style Simple

A couple years ago, I developed a site for the Microsoft Network. One of the interesting challenges was working with the variety of links that we needed to accomplish the design. Each link had a different combination of type style, color, and other features. Obviously, we could never do this using conventional HTML, nor could you do it with XHTML, either. The answer? Style sheets! Listing 18.12 shows the resulting sheet in detail.

Listing 18.12. Style Sheet for Large Site

.plumlink{color:#666699;font:9pt arial,helvetica,sans-serif;font-weight:bold;
text-decoration:none;}

A.plumlink:hover{color: #339999;}

.topLinks{color:#003333;font:9pt arial,helvetica,sans-serif;}
A.topLinks:hover{color:#ff9933;}

.LgBodyLinks{color:#669999;font:11pt arial,helvetica,sans-serif;
text-decoration:none;font-weight:bold;}

A.LgBodyLinks:hover{color: #ff9933;}

.BodyLinks{color:#669999;font:9pt arial,helvetica,sans-serif;font-weight:bold;
text-decoration:none;}

A.BodyLinks:hover {color: #ff9933;}

.smBodyLinks{color:"#003333";font:8pt arial,helvetica,sans-serif;
text-decoration:none;}

A.smBodyLinks:hover{color:#ff9933;}

.FeatureLinks{color:#336666;font:14pt arial,helvetica,sans-serif;
font-weight: bold;text-decoration:none;}

A.FeatureLinks:hover {color: #ff9933;}

.ULBodyLinks{color:#669999;font:9pt arial,helvetica,sans-serif;
font-weigh:=bold;}

A.ULBodyLinks:hover {color: #ff9933;}

.ULplainBodyLinks{color:#669999;font:9pt arial,helvetica,sans-serif;}

A.ULplainBodyLinks:hover {color: #ff9933;}


.ga{color:#6699CC;font:9pt arial, helvetica, sans-serif;font-weight:bold;
text-decoration:none;}

A.ga:hover {color:#339966;}
.navLinkExt{color:#003333;font:9pt arial, helvetica, sans-serif;
font-weight:bold;}

A.navLinkExt:hover {color:#ff9933;}

.navLink{color:#003333;font:11pt arial, helvetica, sans-serif;
text-decoration:none;font-weight:bold;}

A.navLink:hover {color:#ff9933;}

.navLinkActive{color:#666699;font:12pt arial, helvetica, sans-serif
;text-decoration:none;font-weight:bold;}

A.navLinkActive:hover {color:#ff9933;}

.horBar{color:#ffffff;font:9pt arial, helvetica, sans-serif;
text-decoration:none;font-weight:bold;}

A.horBar:hover{color:#ff9933;}

.bl{color: #666666;font:8pt arial, helvetica, sans-serif;}

.bql{color: #666666;font:8pt arial, helvetica, sans-serif;}


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint