CSS Templates, Layouts for Websites, Blogs, etc.:
CSS is so much fun, I want YOU to play with it too. ;)
Abby says one of the best ways to work with Cascading Style Sheets is by starting with a CSS template.
To keep CSS stress levels to a minimum, it's important to first decide what base layout style you'll want or need for your website.
1 Column and 2 Column layouts are perhaps the most widely used, but layouts of 3 columns or more are not unusual for large, content rich sites that need to maximize available space.
Select a CSS template that most closely matches your sites desired base layout style:
- Open the stylesheet file in your favorite ASCII text editor
- Modify the CSS layout code to suit your needs
- Modify the html file(s) and add your content
- Save the modified file(s) to your computer
- Upload (ftp) all necessary files to your website/domain server (don't forget image/graphics files if applicable)
The CSS templates below are licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Please help yourself. Questions, Comments, Need help? Ask Abby.
Have Fun with these Free CSS Layout Templates
1 Column | 2 Column | 3 Column | Special
1 Column CSS:
A simple, 1-Column CSS Website Layout.
Featuring 3 website pages - Home, Article and Contact.
See sample pages using this Free CSS layout HERE.
Ask Abby to send you these website files.
2 Column CSS:
A simple, 2-Column CSS Website Layout.
with a transparent background image div.
See sample pages using this Free CSS layout HERE.
Ask Abby to send you these website files.
A CSS 2-Column Website Layout featuring fixed Header & Navigation elements.
This is the same template that the Abaryx.com site is based on.
See sample pages using this Free CSS layout HERE.
Get a copy of this Free CSS website layout HERE.
3 Column CSS:
A CSS 3-Column Website Layout which includes Header & Footer elements, Navigation elements, and defined Ad Space elements.
This template uses a background image.
See sample pages using this Free CSS layout HERE.
Get a copy of this Free CSS website layout HERE.
Special CSS:
A CSS 'Framed Content' Layout for e-Greeting Cards, etc.
The example is for a Christmas card - change it to anything you like.
This one might be fun for a replicated website page - let your visitors make thier own e-greeting card pages.
See a sample page using this Free CSS layout- in Green - HERE.
See a sample page using this Free CSS layout- in Blue - HERE.
See a sample page using this Free CSS layout- in Red - HERE.
See a sample page using this Free CSS layout- in Aqua - HERE.
See a sample page using this Free CSS layout- in Brown - HERE.
See a sample page using this Free CSS layout- in Orange - HERE.
Get a copy of this Free CSS website layout HERE. (green version)
If you'd like one of the other colors - just Ask Abby to send you the stylesheet for the color you want.
MENU:
Learning CSS:
Working with CSS
CSS Tools:
Software for Your CSS Websites