Designers who are just starting out with CSS often find that it can be difficult to think out how to use CSS for layout and design. But it is possible. And with a standardized workflow, you can create a new CSS Web page in half the time it would otherwise take.
Don’t Start with the CSS
It can be very tempting to start out designing a Web page by working on the design. But with CSS this can get you into trouble. If you don’t know what will be on the page it can be difficult if not impossible to create anything more than a basic layout.
Instead, start with your content. Don’t worry about layout, including whether you’ll need a container element or how many divisions you should have on the page. Instead, put your content on the page. Create the page as though you were writing HTML for IE 1.0 - not the tags - but the flow of content. In other words, put in your navigation in a list, your headlines with H1, H2, and H3 tags, and your content inside paragraphs. If you have sub-sections on the page, you can separate them with div tags, but otherwise, just get the basic content onto the page.
This preliminary page will look really boring, but it will give you something to work with. Many designers try to build their layout without any content. This is certainly possible, but without content, elements won’t stay open, widths and heights may be misleading, and you can’t tell exactly how it’s all going to go together. By creating your content first (even if it’s all "greeking") you have something to work with on your page.
Use a Master Style Sheet
Your master style sheet should remove default styling from browsers and create a clean slate for your entire page.
Start at the Top and Work Down
Once you have your content and basic HTML in the page, start at the top of the page and work on CSS styles as you move down the page. It can be tempting to try to work globally and then get more granular. But that can leave you with really complicated CSS. When you work down the HTML document, you are following the direction of the cascade, and so will end up with less complicated CSS.
Keep Your CSS Simple
The more complicated you write your CSS the harder it will be to maintain later on. Plus, complicated CSS can result in styles that don’t work as you expect them. To use simpler CSS:
- Avoid complex selectors - use simple tag, class, and ID selectors where ever possible
- If you don’t need it, don’t add it - e.g. don’t add a class for "bolder" text unless your page requires it
- Avoid changing your HTML unless it’s absolutely essential - adding extra div tags is almost always a mistake (except for your "container" element for columnal layouts)
Create a Library of Styles that You Always Use
These include elements like "center", "float left", "underline", and "no underline". You can even create a standard style sheet that you load first on all your pages. Then, for example, when you use the class "floatLeft" you know that that element will have the float: left; style applied to it. This is the CSS styles library I use most often.