How to style your page using CSS
Beginner article coming up, it's time to get to know the wonderful world of CSS! Cascading Style Sheets, or CSS, is the standard method of styling a webpage. In fact, you should have no styling in HTML whatsoever. HTML was not designed to be a presentation language, it's more of a structural-semantic language. In other words, HTML should give your content structure while CSS should control the actual presentation.
It's a bit difficult to describe this all in one article, but CSS is actually not that hard to get into. Basically, your HTML code has three types of "hooks". You probably already know one of them, this is your common, everyday tag. You can also give a unique ID to any element, or a class, which can be applied to any amount of elements. CSS can grab on to these "hooks" (this is not a technical term), and style the element you are referring to.
Let's take a side-step and look at how to implement CSS first. Right now let's just use the following syntax inside the file, in the header section (there are many other ways, you can also call CSS from an external file).
You can write your CSS code in between the start and end tag. CSS code is also very simple syntax wise. You have to specify a selector, and then some properties and values. The selector will be one of those "hooks" we looked at, it will let you specify what you want to change the style of. The property will let you specify what property of that element you want to change (text size, color, etc), and the value will specify what you want to change it to. The correct syntax is "selector {property:value; property:value}"
With that knowledge safely in our head, let's take a more detailed look at our "hooks", which will become our selectors. As I said, a tag can be a hook. Say you want the color of the font in all paragraphs to be orange. You can do this by applying the following CSS code: "p {color:#ff9900;}". The selector is "p" the actual tag in HTML, the property is "color", which controls text color, and the value is "#ff9900" which is a color code. You could also write "orange", but color codes give you more control (more on this in another article).
That's not too hard is it? Ok, so now all our paragraph's have orange text color, but what if we want one to be different? You could put them in a div instead of a paragraph, since we only specified that paragraphs should have orange text. This is a very bad approach, but it does display how CSS works. You should not do this for many reasons, first of all because you loose some semantics, that piece of text is a paragraph, so should be in a paragraph tag. Second of all, with this approach you will very quickly run out of tags to use. So in this case we apply the other "hooks", we can specify a unique id, or a class. Let's apply an id, since we just want a change for this one paragraph.
In your HTML the id is applied as an attribute to the tag like so:Â <div id="example" class="content-area">
What the actual id is, is not important, but try not to start it with a number, and don't have special characters in it a lot (underscore is fine). We can use the id in our CSS code by applying the following in addition to the rule we already have: "p#example {color:black;}". The selector now points specifically to that one paragraph, where we have specified the id "example".
If we would have applied a class we would have <div id="primary" class="example"> in our HTML and "p.example {color:black;}". If you try it out, you can see that there is no difference. The difference is in the fact that id should only be applied to one element only, while class can be applied to as many as you like. You can apply it to a paragraph and a div for example. In this case you could write the following: "p.example {color:black;} div.example {color:black;}". This would tell each paragraph and each div with the class of "example" to have a text color of black.
There is a simpler way to do this though, you can just specify the class, like so: ".example {color:black;}". This shows how you should "read" the code. Whenever you see just a class you should read it as "change the text color of all elements with this class to black". If you see a tag or even another id or class in front you should read it as (in case of a paragraph) "change the text color of all paragraphs with this class to black".
Those are the very basics of CSS, you might find a list of properties helpful, but there are many resources on the web to learn more about CSS, but I will be back with more info, and you can start reading Scriptastique for more info on CSS.
