I recommend having the template page code and main css file handy while reading this, so you can reference them easily. Do not try to print out the example template page, as the printer friendly CSS will cause the printout to be quite different than what is displayed on screen. Rather, open the link to the template page in a new window or tab.
Here is a list of the files used in this tutorial:This section covers how we really make our design come together, and how everything we learned before ties in to make a design: CSS files! If you haven't already, I strongly recommend reading the CSS Introduction section and Div section.
To begin with, we need a very basic CSS file, something that will be read and understood by every browser and every web device, and (most) every version. A good thing to keep in mind is that a unstylized or minimally stylized page is the best bet to being read by everything, and also remember that the reason people read your page is for content, not design. Thus, our base.css is so simple that I will show it here:
@import url(adv.css);
body { font: 12px "trebuchet MS", Arial, sans-serif; }
code {color: #0000aa; background-color: transparent;}
#contentum a {text-decoration: underline;}
h1, h2, h3, h4 {
color:#000055;
background-color:transparent;
font-family: arial, sans-serif;
font-style: italic;
}
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
h4 {font-size: 12px;}
#copyright {font-size:12px;}
To see what our basic page looks like, take a look at the example page. Not very pretty is it? However, before saying "this is not web design!" try loading it on a PDA, cellphone, Netscape 4, IE 3, Lynx, Mozilla, Safari, and any other browser or device you can think of, and it will display! That's quite an accomplishment because we now have a very basic version that is completely forward and backward compatible.
Now, see the @import at the top of the CSS file? We discussed its purpose in the Advanced Cascading section earlier. The summarize, older browsers and many mobile devices do not understand the @import directive, and so will skip it, thus saving the browser or device from CSS that it does not understand or incorrectly implements. By using this, we call in our advanced css file, to give our page the final design that will render correctly with modern browsers, while displaying a very basic design to older browsers and alternate web devices. Try loading the finished example with as many different browsers that you can think of, and observe what happens.
As much as I would love to go in depth into all the nuts and bolts of what is in the advanced CSS files, it is simply beyond the scope of this introduction. All I can do is simply refer you to some fantastic resources, listed on our Helpful Links page.
Please read the FAQ question Problems with height and min-height disucssing this in-depth.
The observant person will notice that in older browsers such as Netscape 4.x and IE 5.5 or less the page does not center, but rather locks to the upper left of the screen. The FAQ question Centering a div with CSS discusses this in-depth.
One of the final topics of our discussion about CSS design is our printer friendly CSS. Previously, web designers had to either create secondary sites that were 'printer friendly' stripped down versions of their main pages, or use scripting languages to extract content, and create a new document that the user could then print. With CSS, it is possible to make your page printer friendly without all the work, and if you go to our example page and either print or do a print preview, you will see that our example is indeed printer friendly! Take a look at the printer friendly CSS code and observe how simple it is.
Again, as much as I would love to go in depth into the how and the why about printer friendly CSS design, it is simply beyond the scope of this introduction. Rather, there is a fantastic article called CSS Design: Going to Print written by Eric Meyer that describes the process of creating a printer friendly CSS that I recommend you read.
I mentioned it before, but I will mention it again. Make sure that you validate your HTML and CSS! This will help you catch many problems and save you a lot of time. By being XHTML valid, you also are one step closer to being accessible by most any web-aware device.
sThe links:Congratulations! If you been with us throughout our entire CSS design portion of the WTC, you have learned about divs, CSS design, and templating, and are fast on the path to creating a webstandards compliant site, with forward and backward compatibility. The road ahead is a long one, and this is but a first step. Play with the examples provided throughout this tutorial, and feel free to modify them, or better yet, create your own! I recommend looking at our Helpful Links section to find other great resources to read, taking you to the next level in CSS design. Good luck, and thank you for reading this tutorial.