XHTML & CSS Template

Current Files

These are the files I use to start my websites. These templates are always changing as I learn new techniques.

Individual Files

• index.html – basic XHTML page linked to all CSS files and one JavaScript file (not included...). Version 1.0
• generic.css – Styles that will apply to all media styles (print, screen, handheld...). Version 1.0
• screen.css – All that fancy formatting for screen viewing. Version 1.0
• print.css – Styles to apply only when the page is printed. Version 1.0

ZIPed

• sgdg_dev_website_template_files.zip – 4KB. Contains all files above.

Resources Used

• What's in a name (pt 2) – Some of the naming conventions I used in my coding came from this article by Andy Clarke.
• Numerous others, most of which can be found on my CSS Resources page.

Notes

XHTML File

I've started using XHTML, but this file could easily be changed into HTML (not that there's much reason too…). Change it to fit your needs. I'd recommend sticking with a strict DOCTYPE though.

You'll notice a link to a script file (generic.js) in the index.html file. I usually use some generic JavaScripts in every site I make, and I'll probably put that file on here at some point. For now you can just remove that line or make you own generic.js file.

I've also got an image in there (to logo.gif). I use that mainly for printed versions of the website. Remove it if you don't need it.

CSS Files

The use of these three basic css files gives me lots of options for formatting across screen and print. If I need to include a handheld css file, it can easily be added, and the styles on the generic.css file will also apply.

The generic.css is for:

• font styles and sizes
• link colors and styles
• form styling, including some styles I've been using for validation purposes (error message, and help text formatting)

The screen.css file is for:

• on-screen presentation and layout (placement of the <div> tags)
• background-images for <div> tags
• navigation (menu) styles
• page specific styling such as changes in layout, or colors for different parts of a website (e.g. the contact us page could be green while the home page could be blue)
• font styles and sizes that I don't want applied to print media

Most of the stuff on generic.css is used for printing, but some changes are needed for printing so a print.css file is needed.
The print.css file is for:

• hiding elements that aren't useful on a printed page (e.g. navigation)