A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

A few things first .

So you have done a little bit of web design in your day. You know what HTML stands for, you know how to make a table, the text go green, the font get huge and go to the left. You even know how to set the background, the link colors, maybe even do some cool image stuff. Well forget all of it.

Your in my neighborhood now Grandma.

Elements, Classes and ID's.

There are three basic ways to point at what you want to modify: by pointing at a kind of Element, by pointing at a group of items in a particular Class, or by pointing at a specific item with a unique ID.

Elements are global. There is the paragraph element (whose mark-up begins <p> and ends </p>) which defines everything inside of it as one paragraph, and there is the link element (begins <a> and ends </a>) which defines an anchor or a link (just to name two). It is possible to point to every paragraph or every link by simply writing the lines.

p {

}

or

a {

}

Then there are classes which can be applied to any number of elements (<a class=”test”></a> and <p class=”test”></p> are part of the "test" class). These are targeted by placing a "." symbol before the name of the class in CSS.

.test {

}

And finally there are ID's which (if used correctly) should only point to one-single-element ( <p id=”testP1”></p>, this paragraph has the ID "tespP1" and you should not give any other paragraph or other element that ID, not even a different element like a link element). These are targeted by placing a "#" symbol before the ID in CSS.

#testP1 {

}

Again, all of these are case sensitive, so typing "#testp1" is not the same as "#testP1". You can also define multiple targets by separating them with a comma. If you wanted to target the Class "helper", as well as and element with the ID "help1", you could do that by typing.

.helper, #help1 {

}

DIV's and SPAN's.

Most elements, by default, have a number of characteristics predefined. The P element will place a double space above and below the block of text it defines. An H1, H2, H3 or H4 element will make the text bold, and assign it's text a size inversely proportional to it's number (H1 is the largest and H4 is the smallest). However, there are two elements with no default formatting whatsoever, the DIV and SPAN element.

A DIV element is a block element (think of it as a box). It will place a line break before and after it's self, but it will add no spacing. Later on this can be used for actually moving chunks of text and images around the screen.

Alternately, a SPAN does just that. It encompasses a span of text, without breaking the line in anyway. It is even possible begin a span halfway through a word with out visually interrupting the word. These can be used to select words or phrases and change their formatting specifically.

However, both of these are incredibly general in nature, and must be used in conjunction with Classes and ID's to be of any use: but when used correctly, they can be the most powerful elements you will ever use.

Formatting rules.

Above you saw how to target an Element, Class or ID, but we did not explain what the "{" and "}" symbols are for. Those tell the browser where the characteristics for the target begin and end (the characteristics to the target begin at the "{" and end at the "}")

This is simple, however, to pull and define a characteristic you must be very careful. First you must pull the characteristic by typing it out, followed by a ":" symbol. Next, define your characteristic, and close the line with a ";" symbol. Both of these are very important, and if you are having problems with your CSS, look back to make sure you have all your ":" and ";" in the right places.

And again, this is all CaSE SenSItIvE.

Now lets begin.