Why Bother with CSS?
A Cascading Style Sheet is a text document containing a set of instructions that control the layout, the color, and the fonts to be used on your web page.
Good News First:
Once you get the hang of it (and we'll get you started in part 2) Cascading Style Sheets (CSS) are a great tool to make your website look more professional. This is mainly because using Style Sheets limits your ability to mess things up. It forces consistency on your work, and consistency of design is a beautiful thing. I'm not an expert by any means but a clean consistent site that looks as though it were 'writ by the same hand' appeals to me more than a site that looks like it was done by a committee.
CSS forces consistency by providing a framework within which all three (of the four) essential page elements are defined - the spaces, the colors, and the fonts. Every time you think "Oh! I'll make this header purple!" you'll then have to think about the work required to add a purple header into your style sheet and whether or not you might be able to use that purple header elsewhere or if its just going to be a single odd-ball header on your site, and that consideration might be enough to put you off doing it.
A secondary benefit is that if all your pages are consistent, the global "search and replace" operations get very easy. At one point in the development of this site I had some 40 pages and I decided to put in a google search box at the top of each page - placement was important and if I had 40 different page layouts I would have had to do 40 updates by hand, but because the design was consistent and I knew I could count on the "head" tag being on line 27 in every page, the update took less than a minute.
The Bad News:
CSS looks complex and much of the "help" on line and in books tends to support that conclusion - there are "classes" and "inheritance" and "attributes" and "elements" and all manner of weird things.
There are very many ways to do the right thing is CSS - too many in fact - so when you try to learn even the basics, you get a dozen opinions on how things should be done.
So if you want to learn CSS and you come upon material that baffels you more than enlilghtens you - walk on by. Reading that stuff didn't help me and I doubt that it will help you. A better approach is to look for the easy way first.
And now the Good News:
Turns out CSS is EASY! Forget about all that fancy carry-on - for a clean simple web page all you need are four basic elements. When I found out how completely easy CSS is I wrote this guide as a little pay-back for all the time I wasted reading material that tried to convince me that CSS was hard and complex.
Here are the four basic elements:
The Page
You need a page structure and a very common kind would be a page containing a "body" box to hold everything - all the other boxes. In the illustration below we can see the surrounding "body" and a "header" a "footer" a left "sidebar" and a "main content" section the latter two marked with a "spring" to indicate that they are "flexi" units - percentages or some other "relative" unit of measure like the "em" (the size of the capital letter "M") unit. content page with a sidebar on 
the left or the right or both, a header section, and perhaps a footer section.
The design here showing a couple of "em" springs are meant to suggest that the page design is flexible and can shrink or stretch depending on the width of the browser window.
I started with a simple layout like this and used fixed width boxes - these are a bit easier to work with because they don't change while you are working on them, but lately I've graduated to mostly percentage measurements because they tend to work better across different browsers and environments.
Some HTML Editors:
CoffeeCup free trial
DreamWeaver free trial
Gizmo's list of free editors mostly free
The Colours
You need some compatible colors -- a color "Pallett" -- fortunately these are as plentiful as trees in a forest.
 |
Here are 3 examples of what a palette looks like - it's a collection of colors chosen either by a designer or a computer that are meant to work together. Me? I'm just a guy - what do I know about colour? As far as I'm concerned there are only 6 colors - the primaries - Red, Blue, and Yellow, and the secondaries - Purple, Green, and Orange. Everything else is just lighter or darker shades of these colours. |
Some Color Pallet Pickers
colorcombos.com tools and samples
Color Scheme Designer excellent on-line pallet generator
ColourLovers needs a login but it's free - interesting tools
The Fonts
You need a few fonts, and you need to combine those fonts with the colors to come up with a set of headers, links, and titles that you can use over and over to give your site that consistent look.
There may be rules for mixing and matching fonts the way there are rules for colours, but I haven't found them yet.
For this site we've devised the following set page headers, section headers, and a couple of specality headers thrown in:
=======
Page Sub Title
Section Title (h1)
SubSection Title (h2)
SubSection Title (h3)
Paragraph Body Text
======
That's it -- you don't need many more fonts or styles than that, and it's quite possible to go overboard with too many variations so keep it simple.
The ArtWork
And lastly, you need some artwork - preferably free or something you can use with the artists permission.
I've found a couple of excellent free "Wallpaper" collections and I use portions of the whole image as the "Header" portion of each page.
I've written the artist about using the material but haven't heard back yet.
That's pretty much it - honest. The site you are looking at now is made up of just these elements and in our next episode I'm going to show you how to do it.
Click Here to continue on with Part 2.
blog comments powered by Disqus