• PW Program Home
• PW Resources Home
• Career Sites
• Broadcast Resume Tape Resources
• International Internships for Professional Writing
• Jobs in Publishing
• Web Authoring
• Scripting and Advanced Web Authoring
• CSS Resources
• CSS Layouts
• Design
• Typography Resources for Designers
• Inter-Cultural Color Psychology
• Professional Design and Film
• Color Resources
• Formatting, Citation Styles, and Punctuation
• Microsoft Word Techniques
• Punctuation Resources
• Citation Styles for Students
• Copyediting, Proofreading, and Style
• Citation Styles
• Writing Across Genres
• MFA Programs in Creative Writing
• Writing about Social Sciences
• Inspiration for Creative Writers

Home | Top | Credits
© 2006

CSS Layouts

Toni Grosinsky

Overview

This CSS resource page is designed for intermediate students who already know the basic structure of CSS. Its purpose is to provide a comprehensive resource guide for professional writing students to turn to when creating websites in their classes.

It will focus mainly on positioning boxes and basic layout. I have divided the resources into four subsections. The inspiration section contains links to three different showcase websites. This is intended to give users an understanding of what is possible with CSS and to inspire new ideas. The second section will provide students with basic positioning and layout information. The first resource in this section, BrainJar is very important because it breaks down the box model, which is crucial to understanding positioning.

The third section provides step-by-step tutorials using CSS. Max Design offers some great tutorials on lists, floating and selectors. The final section provides websites where students can download complete CSS files. I have found that these are very useful learning tools because it allows students to use a sort of trial and error method of learning by changing certain values.

Inspiration

CSS Zen Garden

Zen Garden is a very important resource when it comes to CSS. This website serves as a showcase for what is possible with CSS designs. This website is a great example of what can be done without changing any of the HTML source. All of the design features are done with a CSS document. They are essentially only changing the background and layout of the original website. It is also a great place to go for inspiration.

CSS Vault

CSS Vault is a collection of CSS based websites. Its purpose is to inspire and teach new designers. Anyone can submit what they think is a good design, even if they didn’t create it. They also have a wonderful resources section.

CSS Beauty

CSS Beauty is a database of creative and well-designed websites. Its purpose is to act as a showcase for the talents of web designers. Designers can submit their own work or they can recommend a website for entry into the database. It is a great place to go for inspiration.

Positioning and Layout Basics

Brain Jar

Brainjar is a resource for CSS, Javascript, DHTML and ASP. The CSS resources section is one of the best on the web. For positioning, it goes into a lot of detail about crucial topics such as the box model, floating and relative, absolute and fixed positioning.

CSS Play

CSS Play is a great site with a lot of CSS examples and tricks. There are examples of everything you could think of doing with CSS and a few things you wouldn’t think of. It is broken down into sections such as Menus, Layouts, Boxes and Demos. They have both the CSS and HTML code for all of their designs. Below is an example of a basic layout provided by CSS Play. The CSS code appears in the page source.

HTML Help- CSS Properties

This is a great site because it lists a number of important CSS properties and the possible values for each. The most important section for learning about layout is the box properties section that deals with margins, padding and floating.

Tutorials

Max Design

Max Design offers great step-by-step tutorials on lists, floating and selectors. These topics are essential for creating advanced and attractive websites with CSS. Below is an example from the website on how to float text around an image. Both the CSS and HTML code are given.

Web Reference Tutorial

Web reference contains a ton of information on web authoring and development. This tutorial goes through the steps of creating a three-column layout with a header and footer. This is a great exercise to practice with.

HTML Dog

This is another great tutorial for positioning. It defines the normal positioning properties (absolute, fixed, relative and static) and gives the code for them. It also explains how to use the float property effectively and gives several working examples at the bottom.

Downloadable Style Sheets

CSS Tinderbox

This site is great for learning about layout. It has downloadable CSS files that users can borrow to learn from. This will allow users to tweak the code to give each template an individual look and to see how personal changes affect the overall design.

The Layout Reservoir

The Layout Reservoir is a great learning tool for learning about basic layout. It has examples of 2 and 3 column layouts with menus on each side. This site is nice because it has all the CSS and is very easy to understand.

SSI Developer

Developer allows users to download 2 and 3 column templates to use as a learning tool. It is a useful site because it shows which browsers the CSS will work in. Users are asked to credit SSI.

Top

© 2006 Toni Grosinsky