This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding Look and Feel by Using Style
With a developed structure in place, you can now move on to creating a look and feel for your site. At WebReview.com, several choices were made regarding the global style for all documents. I wanted WebReview.com to have good onscreen readability (characteristics for good onscreen readability are described in Chapter 2).
The bulk of the site uses high contrast: black text on a white background. I also chose sans-serif fonts. I made the choice to use points when sizing fonts (a controversial choice, but I prefer the fixed rather than dynamic results), and I added a variety of features needed for the color palette, link behaviors, and specialty text, such as block quotes and code samples.
To create a style sheet that's suitable for highly readable documents, follow these steps:
p {
font-size : 11pt;
font-family : verdana, helvetica, arial, sans-serif;
font-weight : normal;
font-style : normal;
color : #000000;
line-height : 12pt;
text-decoration : none;
}
-
Download and open the master_style.css document to see WebReview.com's sheet for comparison.
-
Begin a new, blank document in your text editor; name it style.css.
-
In the document, add the following:
-
Add the header and link information.
Listing 3.1 shows the header and link information for WebReview.com.
Listing 3.1 Header and Link Settings for WebReview.com
h1 { font-size : 15pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : bold; font-style : normal; color : #000000; text-decoration : none; } h2 { font-size : 14pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : bold; font-style : normal; color : #000000; text-decoration : none; } h3 { font-size : 13pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : bold; font-style : normal; color : #000000; text-decoration : none; } h4 { font-size : 11pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : bold; font-style : normal; color : #000000; line-height : 11pt; text-decoration : none; } a { color: #336699; text-decoration : none; } a:visited { color: #336699; text-decoration : none; } a:active { color: #CC9933; text-decoration : none; } a:hover { color : #FF9933; } -
To ensure that your list items pick up style in as many browsers as possible, be sure to apply the style to the list types, as follows:
ul { font-size : 11pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : normal; font-style : normal; color : #000000; text-decoration : none; } ol { font-size : 11pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : normal; font-style : normal; color : #000000; text-decoration : none; } dl { font-size : 11pt; font-family : verdana, helvetica, arial, sans-serif; font-weight : normal; font-style : normal; color : #660000; line-height : 12pt; text-decoration : none; }CAUTION
Netscape 4.x doesn't properly read styles assigned to the list item tag (li). So it's important to apply those styles to the list type (ul, ol, or dl), because Netscape 4.x browsers will then apply the styles more consistently.
-
To add inline code, preformatted text, and block quote text, use the following code:
Figure 3.3 Within the browser you'll note that code and preformatted text styles now appear in monospace font.
Remember that any time you require special text features, you can add style rules as needed. The figure shows how preformatted text (used for a number of reasons in HTML and XHTML, but here for denoting code) is now styled on any page linking to this sheet.
pre { font-size: 9pt; font-family: courier, courier new,
monospace;
font-weight: normal;
font-style: normal;
color: #660000;
line-height: 12pt;
text-decoration: none;
}
code {
font-size: 9pt;
font-family: courier, courier new,
monospace;
font-weight: normal;
font-style: normal;
color: #660000;
line-height: 12pt;
text-decoration: none;
}
blockquote {
font-size : 11pt;
font-family : verdana, helvetica,
arial, sans-serif;
font-weight : normal;
font-style : normal;
color : #000000;
line-height : 12pt;
text-decoration : none;
} -
Save the file. Link any documents you'd like to have the style sheet influence by adding the following markup to the head section of that document:
<link href="style.css" type="text/css" rel="stylesheet" />
Headers and Links, Oh My!
Briefly mentioned in Chapter 2, there is an historical basis for why headers in HTML are formulated the way that they are. In publishing, the need to designate top-level content from supporting subjects is important. Look, for example, at this chapter. It uses a system of headers that denote this process. If a topic is primary, it received a certain type of header, with specific styles attached. If it is secondary, that header is likely to be smaller and differently styled, and so on.
As you know, h1 headers, by default, will be larger than an h6 header. It's my recommendation that you use headers consistent with the use that was originally intended for them. h1 headers should be larger and perhaps bolder than any lower-level headers you use. You can choose different colors for header levels if you like; it just depends on the aesthetic that you're trying to achieve. What you do not want to do is randomly assign styles to header levels. If you do this, you won't achieve consistent results.
When it comes to links, no hard and fast rules exist. In fact, there's some debate as to the appropriateness of coloring links at all and simply allowing them to remain default colors—blue for standard, purple for visited, and so forth. This argument is based on ideas set forth by various usability specialists, who feel that the consistency across all sites achieved by this is a benefit.
I don't agree. As a designer, matching link colors to the esthetic of your design is important. I will say, however, that keeping your link colors consistent throughout your site is imperative for a professional-looking site.
TIP
You'll want to adjust the href attribute to the proper location within your own directories. When I have only one or two style sheets for a web site, I tend to put them on the top level. When I have more than two or three style sheets, I keep them in a separate style directory.
TIP To see if your style passes muster, use the W3C's CSS Validator service, available at jigsaw.w3.org/css-validator/.
){kind=link}