Free CSS Templates
Note – these are getting a smidge long in the tooth. I -may- put up some of my WordPress themes if I have time to prep them sufficiently.
These templates may be used for any purpose whatsoever without credit or attribution – although I’d love a mention if you feel such is deserved. I offer them as learning tools to any webmaster attempting to learn CSS. NOTE: some of these templates require server-side includes to function properly. If you don’t know what those are, go here for more information. Your host may or may not support SSIs. Also, these templates will not work ‘local’ unless you have your editor set up to resolve the SSIs. You can simply replace the include statements with the referenced file’s contents, but it defeats the purpose and reduces the maintainability. I h3ly encourage you to learn what Server-Side Includes are (not to mention the other Server-Side Directives) and how they can improve the overall ease-of-maintenance of your sites. And now, the Templates!
Template 1 – Tabbed Top Navigation with automatic highlighting
This is my first attempt at templating a CSS-structured site that automatically indicates the user’s location by changing the appearance of the top and left tabs. The highlighting is driven by JavaScript that checks for the presence of keywords in the document title. A little study of the script calls vs the document You’ll note this template proudly bears the W3C flags for Valid CSS and Valid HTML. These flags are true for the template only as delivered – you should revalidate your site pages to ensure compliance with standard.
Template 2 – Compact Tab Nav – Auto Highlighting
A full-screen fluid design. Very simple to use.
Template 3 – Fixed-Width Floats Top Center 1 & 2 Column
Right Nav is optional. Banner has space for text or art logo in center and image on right. Placeholder graphics in position.
Template 4 – Complex Dynamic Design
All page elements adjust on window resize. Center body changes size, rightnav stays flush right, tabbed bullet lists adjust to fill space. Rightnav question marks are bullets and will insert automatically – other image can be substituted.
Template 5 – Simple Photo Gallery
All pages except home share nav elements. Basic framework for site is built out, user simply replaces/adds files to customize. Note – pathing will need correcting for local directories.
Template 6 – 3 and 2 column layout with fly-out menus
All pages except home share nav elements. Single page template. Note – pathing will need correcting for local directories.
Template 7 – 3 column centered layout with brushed-metal buttons
All pages share nav elements. Separated into include files, ready to customize – or use as-is. Note – pathing will need correcting for local directories.
Template 8 – 3 column centered layout with brushed-metal overall look
All pages share nav elements. Separated into include files, ready to customize – or use as-is. Note – pathing will need correcting for local directories.
Template 9 – 3 column centered layout – Minimalist/Boxy
All pages share nav elements. Separated into include files, ready to customize – or use as-is. Note – pathing will need correcting for local directories.
Template 10 – 3 column full-width layout – tabbed navigation
All pages share nav elements. Separated into include files, ready to customize – or use as-is. Note – pathing will need correcting for local directories.
Template 11 – multicolumn fixed-width layout – button navigation
Very straightforward – no text-as-graphics, basic left/right nav as lists.
Template 12 – multicolumn fixed-width layout – round corners
Everyone seems to be crazy for rounded corners. Here ya go!
Template 13 – Simple with fly-out side menus
Everyone seems to be crazy for rounded corners. Here ya go!