A style sheet written explicitly for print enables developers to exclude irrelevant portions of a web document from the printed version. For example, no document navigation is required in a printed version. Additionally, because color documents have some expense associated with them, depending on the type of printer and what type of ink or toner the printer uses, it is also often better to exclude background images or other aspects of the design that result in greater consumption of expensive ink or toner. For these reasons, print versions of web documents are often simplified to simple black and white productions of the original document. Only foreground images relevant to the document are retained. In fact browsers, by default, strip out all background images and color; to print these, the user must specifically enable them before printing.

CSS 2 provides several properties for controlling the presentation of paged media, although at the time of this writing a sparse selection of those properties is actually implemented in current browsers. CSS 2 properties control such things as where page breaks occur, the size of the page margins, and the size of the page itself. In this area, Opera boasts the best support for the CSS 2 paged media properties; I focus on only the features that have the best support.

Applying Styles Based on Media

In order to print in CSS, you need a way of differentiating styles intended for print from styles intended for the computer screen. CSS can apply to a variety of documents, not just (X)HTML, and CSS can be used on a variety of different devices and media.

To target different media, you use the media attribute, which is applied to the <link /> element, or the <style> element. Or, from within a style sheet, you can target different media using @media rules. You see examples of these later in this section. First, let’s examine the different types of media that CSS can theoretically be applied to. The different types of media are outlined in the following table.

PC and Mac browsers recognize only screen, print, and all values.

As you can see in the preceding table, CSS can target a wide variety of media types. For the purposes of the discussion, you need only be concerned with the screen, print, and all media. Each medium can be supplied as a value to the media attribute. For example, if you wanted a style sheet to apply only to styles presented in a PC or Mac browser, you would add the attribute media=”screen” to either the <link /> or <style> elements. A demonstration appears in

p{
width:200px;
height: 200px;
padding: 10px
margin: 10px;
font: 12px sans-serif;
}

In above example you see that some basic styles have been applied to the <p> element, nothing fancy, or really of particular interest.

In below you see one new addition, the media=’screen’ attribute, is applied to the <link /> element, which tells the browser that the styles are intended for onscreen display only. In 3rd you don’t notice anything extraordinary; you see a <p> element with the styles applied as you would expect. The effects of the addition of the media=’screen’ attribute become noticeable when you go to print the document. 4th shows what the print preview looks like.

In 4th image, you see what’s happened here – since the styles only apply to onscreen display, they aren’t applied to the print version of the document. If you would have included media=’all’, the styles would be present in the printed version. Or, you could create a style sheet that applies to print exclusively, by using the media=’print’ attribute. In the next section I discuss the @media rule, which allows you to make medium-based distinctions from within the style sheet.

Related posts:

1. Using Stylesheets You can place styles in three locations: stylesheets, <style>, and...
2. Styling text using CSS HTML is intended as a structural markup language, but the...
3. Adding styles to a web page The most common (and useful) method of applying CSS rules...

Related posts brought to you by Yet Another Related Posts Plugin.

The shorthand for applying background values is similar to font shorthand. The property is called background and it has fi ve possible values: background-color, background-image, background repeat, background-attachment, and background-position. Thus,
background: #7F98C3 url(images/body_back.jpg) repeat-y left
top; is equal to:
background-color: #7F98C3;
background-image: url(images/body_back.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left top;
Border is a similar property. It allows us to set the width, style and color of the borders of a box. It does not allow us to make one of the sides different than the other, however. To do that, we need to declare that value separately. So for instance, if we want to set the width of the left side border of our box to be 2px and the rest to be 1px, we could write it like this:
border: 1px solid #000;
border-left-width: 2px;
The first line sets the entire box to have a 1px black border with a solid style. The second line overrides the width of the left border. Remember the cascade—to override the 1px border, the 2px border must come after it.
Font, background, and border are the most common mixed value shorthand properties. Two other shorthand properties that we’ll use throughout the book are margin and padding. The shorthand for these properties allows
us to set all four sides of the box at once. Both properties are written in the same way: the specifi c order is top, right, bottom, left. People use different tricks to remember the order: you can think of the rule as trouble, from the acronym TRBL, or more simply, as clockwise (start at the top and moving around the box). After years of experience, we still  find ourselves using our tricks of choice as we write our code.

For example, margin: 0 20px 10px 15px; is equal to:
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 15px;
When the values of all four sides are the same, only one value needs to be used since it applies to all four sides: margin: 0; Notice there is no unit of measurement after the 0. This is because, no matter what unit you place after zero—pixels, percent, em units—the value is still the same, zero. If you’re using equivalent top and bottom values as well as equal
side values, you can use only two values: margin: 10px 15px; This indicates that the top and bottom values are 10px and the right and left are 15px.

Finally, if your top and bottom sides have different values from each other, but the sides are the same, you can use three values in your shorthand: margin: 0 20px 15px; This tells the browser to render 0 on the top margin, 20px on the
right margin, 15px on the bottom and the lack of a fourth value indicates that the left side is equivalent to the right side. So it’s 20px as well. As you can see, shorthand is cool and it’s absolutely the way we want to write our code. It’s much too handy to not use, so throughout the rest of the book, we’ll be using shorthand. Let’s make sure you can do the same!

Related posts:

1. Working with CSS shorthand for boxes This is something that is useful to get to grips...
2. CSS shorthand for font properties The CSS properties discussed so far can be written in...
3. Using Property Values Property values come in the following forms: constant text, constant...

Related posts brought to you by Yet Another Related Posts Plugin.

The cascading order divides rules into six groups based on the type of selector used in the rule. A rule in a higher-priority group overrides a competing rule in a lower-priority group. Groups are organized by the specificity of their selectors. Selectors in lower-priority groups have less specificity than selectors in higher-priority groups.
The guiding principle behind the cascade order is that general selectors set overall styles for a document and more specific selectors override the general selectors to apply specific styles.

For example, you may want to style all elements in a document with no bottom margin using *{margin-bottom:0;}. You may also want to style all paragraphs in a document with a bottom margin of 10 pixels using p{margin-bottom:10px;}. You may also want to style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}. You may also want to style one paragraph with an
extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom:40px;}. In each of these cases, the cascade order ensures a more specific selector overrides a more general one.

Following are the six selector groups listed from highest to lowest priority:

1. The highest-priority group contains rules with !important added to them. They override all non-!important rules. For example, #i100{border:6px solid black!important;} takes priority over #i100{border:6px solid black;}.

2. The second-highest-priority group contains rules embedded in the style attribute. Since using the style attribute creates hard-to-maintain code, I do not recommend using it.

3. The third-highest-priority group contains rules that have one or more ID selectors. For example, #i100{border:6px solid black;} takes priority over *.c10{border:4px solid black;}.

4. The fourth-highest-priority group contains rules that have one or more class, attribute, or pseudo selectors. For example, *.c10{border:4px solid black;} takes priority over div{border:2px solid black;}.

5. The fifth-highest-priority group contains rules that have one or more element selectors. For example, div{border:2px solid black;} takes priority over *{border:0px solid black;}.

6. The lowest-priority group contains rules that have only a universal selector—for example, *{border:0px solid black;}.

When competing rules belong to the same selector group (such as both rules contain ID selectors), the type and number of selectors prioritize them further. A selector has higher priority when it has more selectors of a higher priority than a competing selector.

For example, #i100 *.c20 *.c10{} has a higher priority than #i100 *.c10 div p span em{}. Since both selectors contain an ID selector, they are both in the third-highest-priority group. Since the first has two class selectors and the second has only one class selector, the first has higher priority—even though the second has more selectors.

When competing rules are in the same selector group and have the same number and level of selectors, they are further prioritized by location. Any rule in a higher-priority location overrides a competing rule in a lower-priority location. (Again, this only applies when competing rules are in the same selector group and have the same number and level of selectors. Selector groups always take precedence over location groups.) The six locations are listed here from highest to lowest priority:

1. The highest-priority location is the <style> element in the head of the HTML document. For example, a rule in <style> overrides a competing rule in a stylesheet imported by an @import statement embedded within <style>.

2. The second-highest-priority location is a stylesheet imported by an @import statement embedded within the <style> element. For example, a rule in a stylesheet imported by an @import statement embedded within <style> overrides a competing rule in a stylesheet attached by a <link> element.

3. The third-highest-priority location is a stylesheet attached by a <link> element. For example, a rule in a stylesheet attached by a <link> element overrides a competing rule imported by an @import statement embedded within the stylesheet.

4. The fourth-highest-priority location is a stylesheet imported by an @import statement embedded within a stylesheet attached by a <link> element. For example, a rule imported by an @import statement embedded within a linked stylesheet overrides a competing rule in stylesheet attached by an end user.

5. The fifth-highest-priority location is a stylesheet attached by an end user. • An exception is made for !important rules in an end-user stylesheet. These rules are given the highest priority. This allows an end user to create rules to override competing rules in an author’s stylesheet.

6. The lowest-priority location is the default stylesheet supplied by a browser.

When multiple stylesheets are attached or imported at the same location level, the order in which they are attached determines the priority. Stylesheets attached later override stylesheets attached previously.

When competing rules are in the same selector group, have the same number and level of selectors, and have the same location level, rules listed later in the code override rules listed earlier.

In Example 1-7, each rule in the stylesheet is applied to the division element. Each rule applies a different border-width to <div>. Cascading order determines which rule actually gets applied. I sorted the styles in the stylesheet into cascading order from least to most important. As you can see from the screenshot, the browser applies the last rule to the <div>, which sets a 14-pixel border around the <div>. The browser applies this rule because it has the highest priority in the cascading order—it is an ID selector with !important attached to it.

Notice how ID selectors override class selectors, which in turn override element selectors, which in turn override the universal selector. Notice how !important gives selectors a whole new magnitude of importance. For example, the !important universal selector is more important than the un-!important ID selector!

Notice how border-style:none!important; is placed in the body and html selectors to prevent the universal selector * from putting a border around <body> and <html>. This also illustrates how element selectors override universal selectors.

Related posts:

1. CSS Syntax & Syntax Details CSS syntax is easy. A stylesheet contains styles; a style...
2. Using Shorthand Properties in CSS Your body rule should now look like this: body {...
3. Types of CSS selectors In the previous example, the most basic style of selector...

Related posts brought to you by Yet Another Related Posts Plugin.

• border:4px double black; creates a black, 4-pixel, double-line border. Notice how border takes three space-delimited values that represent the border’s width, style, and color. The sequence of the values does not matter. border is a shortcut property for three properties: border-width, border-style, and border-color. There are several other
shortcut properties including background, font, list-style, margin, and padding.
• padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-size multiplied by 0.25).
• background-image:url(“gradient.jpg”); assigns the gradient.jpg image to background-image using the url function, which takes the URL of a file as its only parameter. I always put a URL in quotes, but you only have to if the URL contains whitespace.
• background-repeat:repeat-x; assigns the constant repeat-x to background-repeat. Other background-repeat values include repeat-y, repeat, and no-repeat.
• margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement. All other lengths must be immediately followed by a measurement, such as 1px, -1.5em, 2ex, 14pt, 0.5in, -3cm, 30mm, or 5pc.
• font-weight:900; assigns the constant 900 to font-weight. This number is actually a constant. You can use the following constants for font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900. (Note that browser support is poor for numerical font weights, generally treating 100 through 400 as normal and 500
through 900 as bold. Furthermore, bolder and lighter is rarely supported by browsers and/or operating system fonts. Thus, I rarely use any value for font-weight other than normal or bold.)

Later in the post, I present a four-page chart called that lists all usable CSS properties and values. color is the only property in the chart that has an incomplete list of usable values. It shows 79 of the 170 color constants. I organized the 79 color constants into three groups that you may find useful: the 16 standard colors organized by hue, 35 common colors organized by hue from light to dark, and the 28 operating system colors. Throughout this book, I
often use the color gold. I also use related hues such as wheat, orange, tomato, firebrick, and
yellow.

Related posts:

1. Using Shorthand Properties in CSS Your body rule should now look like this: body {...
2. Using Cascade Order CSS allows you to assign the same rule to the...
3. CSS Syntax & Syntax Details CSS syntax is easy. A stylesheet contains styles; a style...

Related posts brought to you by Yet Another Related Posts Plugin.

A style may have one or more selectors and one or more rules. For example, p.tip{margin:0; line-height:150%;} is a style. The curly bracket operators group the two rules, margin:0; and line-height:150%;, into a ruleset and assign it to the selector, p.tip, which selects all <p> elements in an HTML document.

CSS Syntax Details

The key points of CSS syntax are as follows:
• Unicode UTF-8 should be used to encode CSS files—the same way you should encode HTML files.
• CSS code should be lowercase. Selectors are case sensitive when referencing element names, classes, attributes, and IDs in XHTML.6 CSS properties and values are case insensitive. For simplicity and consistency, I use lowercase characters for all CSS code including elements, classes, and IDs.
• Element names, classes, and IDs are restricted to letters, numbers, underscores (_), hyphens (-), and Unicode characters 161 and higher. The first character of an element, class, or ID must not be a number or a hyphen. A classname and ID must not contain punctuation other than the underscore and hyphen. For example, my_name2-1 is a valid name for a class or ID, but the following are invalid: 1, 1my_name, -my_name, my:name, my.name, and  my,name.
• Multiple classes can be assigned to an element by separating each class name with a space, such as.
• Constant values should not be placed in quotes. For example, color:black; is correct, but color:”black”; is not.
• The backslash (\) can be used to embed characters in a context where they normally cannot occur; for example, \26B embeds & in a string or identifier. Anywhere from two to eight hex codes can follow a backslash, or a character can follow a backslash.
• A string may contain parentheses, commas, whitespace, single quotes (‘), and double quotes (“) as long as they are escaped with a backslash, such as the following:
“embedded left parentheses \( ”
“embedded right parentheses \) ”
“embedded comma \, ”
“embedded single quote \’ ”
“embedded double quote \” ”
“embedded single quote ‘ in a double-quoted string”
‘embedded double quote ” in a single-quoted string’

• A semicolon should terminate each CSS rule and @import statement. color:red; @import “mystylesheet.css”;
• Rulesets are created by enclosing multiple rules in curly braces, such as { color:red; font-size:small; }.

• The right curly brace (}) immediately terminates a set of properties, unless it is embedded within a string, such as “}”.
• A CSS comment starts with /* and ends with */, such as /* This is a CSS comment */. Comments cannot be nested. Thus, the first time a browser encounters */ in a stylesheet, it terminates the comment. If there are subsequent occurrences of /*, they are not interpreted as part of the comment. For example:
/* This is an incorrect comment
/* because it tries to nest
/* several comments. */
STARTING HERE, THIS TEXT IS OUTSIDE OF ALL COMMENTS! */ */

Related posts:

1. Using Cascade Order CSS allows you to assign the same rule to the...
2. CSS comments looks CSS comments look like this: /* this is a comment...
3. Types of CSS selectors In the previous example, the most basic style of selector...

Related posts brought to you by Yet Another Related Posts Plugin.

I recommend naming stylesheets using single-word, lowercase names. This keeps stylesheet names simple and easy to remember, and works safely in all operating systems. I suggest you use a name that describes the scope and purpose of the stylesheet, such as site.css, page.css, handheld.css, print.css, and so forth. The standard extension for a
stylesheet is .css. The standard Internet media type is text/css. I recommend using the location of a stylesheet to control its scope. If a stylesheet is for an entire web site, you could place it in the root directory of the web site. If a stylesheet applies only to a document, you could place it in the same directory as the document. To link a stylesheet to an HTML document, you can include a <link> element in the <head> section of HTML documents, and you can place the URI of the stylesheet within the href attribute of the <link> element. Listing 1-1 shows the stylesheet links that I use in each example in this book. See the Header Elements and Conditional Stylesheet design patterns in

Listing 1-1. Attaching Stylesheets
<link rel=”stylesheet” href=”site.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”page.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”print.css” media=”print” type=”text/css” />
<!–[if lte IE 6]>
<link rel=”stylesheet” href=”ie6.css” media=”all” type=”text/css” />
<![endif]–>
For increased download performance, you may want to include page-specific styles in the <style> element instead of in a separate page-specific stylesheet. Since these styles are page specific, there is little disadvantage to putting these styles in the header of the page. On the other hand, I do strongly recommend against using the style attribute of HTML elements because this creates very hard-to-maintain code.

Related posts:

1. Using Cascade Order CSS allows you to assign the same rule to the...
2. Styling for Print You can use a specific style sheet to style content...
3. Adding styles to a web page The most common (and useful) method of applying CSS rules...

Related posts brought to you by Yet Another Related Posts Plugin.

With this in place, all browsers render lists in the same way, and you can set specific values as appropriate. For example, bring back the bullet points (which may be at least partially hidden if margins and padding are both zeroed) by setting either the margin-left or padding-left value to 1.5em (i.e., set margin: 0 0 0 1.5em or padding: 0 0 0 1.5em).
The difference is that if you set padding-left, any background applied to the list will appear behind the bullet points, but if you set margin-left, it won’t. Note that 1.5em is a big enough value to enable the bullet points to display (in fact, lower values are usually sufficient, too—although take care not to set values too low, or the bullets will be clipped); setting a higher value places more space to the left of the bullet points.

Inline lists for navigation

Although most people think of lists as being vertically aligned, you can also display list items inline. This is particularly useful when creating navigation bars, as you’ll see. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits snug to the left of its container (omitting this tends to indent the list items). Adding a margin-right value to li also ensures that the list items don’t sit right next to each other. Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}

Related posts:

1. Content margins and padding in CSS Page margins and padding are easy to define using CSS....
2. Working with lists,Unordered lists,Ordered lists,Definition lists & Nesting lists This post concludes with the last of the major type...
3. Working with CSS shorthand for boxes This is something that is useful to get to grips...

Related posts brought to you by Yet Another Related Posts Plugin.

Unordered lists

The unordered list, commonly referred to as a bullet point list, is the most frequently seen type of list online. The list is composed of an unordered list element (<ul></ul>) and any number of list items within, each of which looks like this (prior to content being added): <li></li>. An example of an unordered list follows, and the resulting browser display is
shown to the right. As you can see, browsers typically render a single-level unordered list with solid black bullet points.

<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Unlike HTML, XHTML lists require end tags on all list elements. In HTML, the </li> end tag was optional.

Ordered lists

On occasion, list items must be stated in order, whereupon an ordered list is used. It works in the same way as an unordered list, the only difference being the containing element, which is <ol></ol>.
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ol>

Web browsers automatically insert the item numbers when you use ordered lists. The only way of controlling numbering directly is via the start attribute, whose value dictates the first number of the ordered list. Note, though, that this attribute is deprecated— use it and your web page will not validate as XHTML Strict.

Definition lists

A definition list isn’t a straightforward list of items. Instead, it’s a list of terms and explanations. This type of list isn’t common online, but it has its uses. The list itself is enclosed in the definition list element (<dl></dl>), and within the element are placed terms and definitions, marked up with <dt></dt> and <dd></dd>, respectively. Generally speaking, browsers display the definition with an indented left-hand margin, as in the following example.

<dl>
<dt>Cat</dt>
<dd>Four-legged, hairy animal, with an inflated sense of self-importance</dd>
<dt>Dog</dt>
<dd>Four-legged, hairy animal, often with å an inferiority complex</dd>
</dl>

Nesting lists

Lists can be nested, but designers often do so incorrectly, screwing up their layouts and rendering web pages invalid. The most common mistake is placing the nested list outside any list items, as shown in the following incorrect example:
<ul>
<li>List item one</li>
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Nested lists must be placed inside a list item, after the relevant item that leads into the nested list. Here’s an example:
<ul>
<li>List item one
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
</li>
<li>List item two</li>
<li>List item ‘n’</li>
</ul>

Always ensure that the list element that contains the nested list is closed with an end tag. Not doing so is another common mistake, and although it’s not likely to cause as many problems as the incorrect positioning of the list, it can still affect your layout.

Related posts:

1. List margins and padding Browsers don’t seem to be able to agree on how...

Related posts brought to you by Yet Another Related Posts Plugin.

<div id=”wrapper”>
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed å aliquet elementum erat. Integer å diam mi, venenatis non, cursus å a, hendrerit at, mi. Morbi risus å mi, tincidunt ornare, tempus å ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. å In urna sem, vehicula ut, å mattis et, venenatis at, velit. å Ut sodales lacus sed eros. å Pellentesque tristique senectus et å netus et malesuada fames å ac turpis egestas.</p>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed å aliquet elementum erat. Integer å diam mi,  vene natis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus å ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, å mattis et, venenatis at, velit. Ut sodales lacus sed eros. å Pellentesque tristique senectus et netus et malesuada fames å ac turpis egestas.</p>
<h3>Praesent rutrum</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus å ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
<h3>Habitant morbid</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus å ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
</div>

The code block is simple. The text has three levels of headings, with paragraphs between them. Everything’s enclosed in a div element, which will be styled to restrict the width of its content. This makes it simpler to see how the leading—defined via line-height—is working out. If you were surfing at full-screen on a large monitor, the paragraphs might
only be shown on a single line.

The default CSS document for these exercises has some rules common to all three examples. These are shown in the following code block:

* { margin: 0; padding: 0; }
html { font-size: 100%; }
body {padding: 20px; font-size: 62.5%;}
#wrapper {margin: 0 auto;width: 400px;}

The first rule, *, removes margins and padding from all elements, as discussed previously. The html and body rules set the default size of the text on the web page to 62.5%, as explained in the “Setting text using percentages and ems” section earlier in this chapter. Finally, the #wrapper rule defines a width for the wrapper div, and therefore for its content.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

For example, imagine a typical web page that has a sidebar that’s marked up as a div with an id value of sidebar. You might use a different paragraph font in the sidebar, to differentiate the text, like so:

p { font: 1.2em/1.5 Verdana, Arial, sans-serif; margin-bottom: 1em; }
#sidebar p { font: 1.2em/1.5 Arial, sans-serif; }

The other occasion where alternatives are required is when creating one-off styles to override an existing style. In such cases, you can define a class in the CSS and then use a class attribute to apply it to an element. Should you only want a portion of some text to take on the style, you can surround the selection with a span element and apply the class to that
instead.

For example, if you wanted to create some “warning” text, you could use the following
CSS:

.warningText { color: #ff0000;font-size: 120%; }

This can then be applied as follows:
<p>This paragraph takes on the styles defined in å the warningText class</p>
<p>Only <span>this portion</span> of this å paragraph takes on the warningText class styles.</p>

Avoid overusing span elements, though. Text works best when it’s consistent across the page.

Related posts:

1. Types of CSS selectors In the previous example, the most basic style of selector...
2. CSS shorthand for font properties The CSS properties discussed so far can be written in...
3. Setting a default font and font color using CSS As mentioned earlier, the body start tag was historically used...

Related posts brought to you by Yet Another Related Posts Plugin.