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

Chapter 14. Designing Type with CSS > Designing for the Real World

Designing for the Real World

Making Complex Style Simple

Last year, I developed a site for the Microsoft Network. One of the interesting challenges was working with the variety of links that we needed in order 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, so a complex style sheet was created. Listing 14.6 shows the resulting sheet in detail.

Code Listing 14.6. Style Sheet for Large Site on Microsoft

.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