Smart Solution

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we’re left with web pages that frustratingly don’t properly print on to paper.

It’s remarkable that so few websites use print stylesheets as:

    * Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
    * They’re phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.
How to set up your print stylesheet

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed. (There are many different media you can use for stylesheets, such as for handheld, TV, projection etc. - see a full list of media types1 for more.)
What to put in your print stylesheet

The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don’t need to repeat any colour or branding CSS commands as they’ll already be taken from the main stylesheet.

Generally speaking, you’ll want your print stylesheet to make the following happen when users hit that print button:
Remove unwanted items

Usually it’s just your organisation logo and page content that you’ll want to appear on the printed version of the web page. You’ll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.

There may be certain isolated items you’d prefer weren’t printed so you can simply assign these class="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: none command:

#header, #nav, .noprint {display: none;}

You may also want to remove certain images and adverts, especially animated images as these won’t make sense when printed.
Format the page

There’s nothing worse than printing off a web page to find the last few words of each line cut off. It’s also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you’ll need are:

width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:

#container, #container2, #content {width: 100%; margin: 0; float: none;}
Change the font?

Some print stylesheets do change the font size (often to 12pt) but this isn’t generally a very good idea. If users increase text size on the screen then the text will print in this larger font size… unless you specify a fixed font size in the print stylesheet.

Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.

Do also bear in mind that background images and colours don’t print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.
Links

Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:

a:link, a:visited {color: #781351}

For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It’s otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example2 and find out how to do this by reading this Improving link display for print3 article.
Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don’t do this on a live website!). Keep adding commands until you’re happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

You’ve now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you’d be mad not to use one!

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy4 to help make the Internet a better place for everyone. He very good at running CSS training5 and spends much of his time working on the world’s most accessible CMS6.
What next?

    * Read more CSS articles7 on this website
    * Get a highly accessible CSS website through our accessible web design8 expertise
    * Optimise the accessibility of your website with our accessibility consulting9 services
    * Get our accessible and usable CMS6 so your site offers outstanding accessibility
    * Attend our interactive intermediate CSS training5 and advanced CSS training10 courses

Cascading Style Sheets offers much greater control over type characteristics than the <font> element.  You can use standard type conventions, such as point or pixel sizes, leading (the vertical space taken up by a line of type), indents, and alignment.  You gain more control but use much less code than was previously necessary.  Using the <font> element, you need the following shaded code for every instance of the <h1> element:

 

<h1 align=”center”><font color=”green”>the header</font>

</h1>

 

With Cascading Style Sheets you can express this style information once as a rule in a style sheet:

 

                h1 {color: green; text-align: center;}

 

CSS Basics

 

CSS is based on rules that select an HTML element and declare style characteristics for it.  You can state sets of rules, known as style sheets, in the head section of an HTML document or in a separate document known as an external style sheet.

 

Understanding Style Rules

 

Style sheet rules are easy to interpret.  The following style sheet shows a simple style rule for the <p> element.  Note that the style rules are contained in the <style> element in the document’s <head> section as the code on page 173 of the textbook illustrates. 

 

Style rules are composed of two parts: a selector and a declaration.  The selector determines the element to which the rule is applied.  The declaration details the exact property values. You must include all CSS rules within a <style> element or define them using a style attribute.  The <style> element always is contained in the <head> section.

 

Linking to an External Style Sheet

 

Placing style sheets in an external document lets you specify rules for different HTML documents.  This is an easy and powerful way to use style sheets.  An external style sheet is a text document with a .css extension that contains the style rules.  There is an example of a simple external style sheet named style sheet named style1.css as the code on page 174 of the textbook illustrates. 

 

Solving Problems with Style Sheets

 

The current browsers, including Netscape 6.0, Opera 5.0, and Internet Explorer 6.0, offer very good CSS support, albeit with some inconsistencies.  The main problem with style sheets is older browser support.  Finally, older browsers will not be able to interpret your CSS rules at all. 

 

CSS Selection Techniques

 

Your goal is to apply your style rules to the elements in your document.  You can choose from a variety of selection methods, including:

 

¨       Selecting multiple elements

¨       Selecting by context

¨       Selecting with the class attribute

 

More complex selection involves the creation of artificial divisions, using two elements designed expressly for CSS:

 

¨       <div> - Block Division

¨       <span> - Inline Division

 

Selecting Multiple Elements

 

Using multiple selectors lets you use less code to accomplish the same results.  For example, to make both <h1> and <h2> headings green.
 

Selecting by Context

 

A context-based selector lets you specify the exact context in which a style is applied.  To specify that <i> elements appear blue only within <p> elements.

 

Selecting with the class Attribute

Start with a simple unordered list

We want to take a simple unordered list and convert it into a horizontal navigation bar
We will start with a simple unordered list. The UL is styled with an ID selector (id="navlist"). For this tutorial, an obvious name has been used to help illustrate the point, but any name can be used. However, it is better to name classes based on their meaning, rather than their appearance

CSS CODE
None

HTML CODE

<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none". To target the specific UL, we use "ul#navlist", otherwise all UL’s on the page would be affected

CSS CODE
ul#navlist { list-style-type: none; }

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Display inline

To force the list into one line, apply "display: inline;" to the "LI". To target the specific list we use "ul#navlist li". This means we want to target the LI element within the UL, styled with a ID called "navlist".

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li {
display: inline;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Float the "a" state

When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.
A width is also required when floating an element - unless it is an image.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
}

Add a background color

At this point a background color and text color can be applied. There are many color combinations that can be used.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
}

Add padding to the "a" state

To make each list item into a box, we need to add padding to the "a" state. In this case we are using a shorthand rule. The padding is set to 0.2em for the top and bottom and 1em for the left and right.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
}

Removing text decoration

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
}

Add a border to separate the list items

A border is set to the right of the list items to separate them.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

Add a rollover color

Use the "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

Float the UL

To make the entire list into a navigation bar, we need to color the UL and stretch it to the full width of the browser window. Before we can do that, we need apply "float: left" to the UL - otherwise it will not show. So, apply float to the UL and set the width to "100%".
A width is also required when floating an element - unless it is an image.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

Add a background color to the UL

At this point a background color and text color can be applied to the UL. There are many color combinations that can be used.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

By : Ian

The Cascade

There are a number of complex rules regarding the Cascade, which, for the purpose of this book, can be boiled down to two simplified statements

• The closest rule wins.
• The most specific rule wins.

Begin with the Browser

Each browser has a set of style rules.
These rules commonly set up basic display properties such as black text and font sizes for various elements.
The browser style rules are at the beginning of the Cascade.

A Basic XHTML Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 2: a paragraph</title>
</head>
<body>
   <p>This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
</body>
</html>

User Styles

All browsers allow users the option of setting up style rules of their own.
Many people who don’t have any barriers to accessing the Web, such as poor eyesight, are not aware that these options exist
If a user chooses to do so, they can set their own rules to be more important than any style rules created by the web page designer.

External Styles

The browser and user stylesheets are out of your control. The first opportunity you as a designer have to enter the Cascade is with an external stylesheet.
An external stylesheet is a text document created in Notepad or some similar text editor and saved with the file extension .css
You integrate that external style rule with your XHTML page by adding a link element to it.
The link element is inserted into the document head

External Styles

<title>Chapter 2: a paragraph</title>
 <link href="ch2external.css" rel="stylesheet"  type="text/css" />
 </head>
 The link element links the XHTML page to a document whose relation (rel) to it is that of “stylesheet”. The stylesheet type is text/css. The href attribute is the URL of the stylesheet.
 A Simple Stylesheet: ch2external.css
 p {
 font: 0.9em Arial;
 color: #000;
 }

Embedded Styles

Style rules may be inserted in the head of the XHTML document itself.
Such styles are referred to as internal styles or embedded styles.
Embedded styles apply only to the document in which they are placed.
Embedded styles also make sense when you have an external stylesheet linked to a page but you want to change something slightly on just one page

Embedded Styles

<head>
<title>Chapter 2: a paragraph</title>
<style type="text/css">
p {
font: 0.9em Georgia;
color: #000;
}
</style>
</head>

Inline Styles

Inline (in the flow of the text) styles are a one-time-use affair.
Using inline styles extensively is not the best practice.
Each time you want to use an inline style, you have to type it right into the specific element.
 
 <p style="color: #00F">This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
 
 This style rule changes the color to #00F (blue) for this single paragraph element.

Inheritance

Inheritance affects the rendering of styles because styles are inherited from antecedent (or parent) elements.
Everything in the document is a descendant of the html element.
The next level in the hierarchy (or document tree) is the body element.

 <html>
    <body>
        <p></p>
     </body>
 </html>

Let’s examine the relationship the Cascade and inheritance have in how a particular element might render.

 body {
 font-family: Arial;
 }

If there were no other style rules for the p element anywhere in the Cascade, the value Arial would be inherited by the p element as a descendant of the body element.

Using @import

There are two ways to link your XHTML page to an external stylesheet :
with a link element, which we discussed earlier in the chapter
with an @import directive.
An external stylesheet can be imported into another stylesheet using an @import directive such as

 @import url(http://www.example.com/styles.css)
or
 <style type=”text/css”>
 @import url(myotherstyles.css);
 </style>

Comments

Comments can be used within CSS style definitions.
CSS comments begin with /* and end with */.
CSS comments tell the browser to ignore the material enclosed in the comment markers.
An example of a CSS comment:
 
 p {
 font: 0.9em Georgia;
 /*color: #000;*/
 }

By : Ian

Introduction

The distinction between structure and presentation is basic to the successful integration of XHTML and CSS
If you take the raw text that will become the content of your website and mark it up with XHTML elements such as headings, paragraphs, lists, and block quotes, you are structuring your document.

The div & id

The div (for division), is what the W3C calls a generic mechanism for adding structure.
A div, with a class or unique id attribute assigned to it, can assume a structural role on the page according to your particular needs.
If you need a banner, a content area, a sidebar, and a footer, you can create that structure with div elements.
Using id labels like "banner", "content", "sidebar", and "footer“ with the div element gives you the ability to create page components

Structural XHTML markup

To make CSS really capable of meeting the demand for beautiful presentation, certain elements and attributes are needed in XHTML to allow the specificity of selectors and the inheritance of the cascade to shine in all its glory.
You will use four of these markup elements and attributes to pry structure and presentation apart:

• div
• span
• id
• class

div

Pages fall into logical divisions (divs), such as banners, navigation, subnavigation, search boxes, ads, content, and footers. By enclosing these page divisions in a generic container with a named id, e.g.

 <div id="search">search content here</div>

You create a unique structural element on the page that can be presented to the viewer using specific CSS rules.The div is a block level element.

span

When the element you wish to style is inline, for example, just a few words in a sentence, the span element creates boundaries for the styling to apply to. Consider this example:

<p>Author <span class="author">Alice Walker</span>is our greatest living writer. She is closely rivaled by the wonderful <span class="author">Elizabeth Berg</span>.</p>

In that paragraph, only the words “Alice Walker” and “Elizabeth Berg” are styled according to whatever rules were specified for the class "author". The two names have the same presentation values since they share the same class rule.

id

The id attribute, which identifies the element it’s assigned to, does more than merely serve as a stylesheet selector, although that is certainly an important job. The id attribute can also be a target for a hypertext link or a referenced object in a script.
Remember that any id can only be used one time on a page; it must be unique. An id attribute must begin with a letter or an underscore and cannot contain blank spaces.

class

For elements that are not unique on the page—that is, styles you plan to use more than one time per page—there is the class attribute. A class attribute can be assigned to any element, either block or inline. The class attribute creates context on the page, so that the element can be presented to the viewer using specific CSS rules.

By: Ian