CSS primer

A short introduction to CSS

There are people in the world who know and can recite every CSS attribute there is, from memory. I wish I could say I was one of them, but alas, I am not. Likewise, there are people who can sit down and simply write a whole web site, from scratch, using nothing more than HTML and a text-editor. I’m not one of those, either.

Happily, this level of expertise, while commendable and, to me, amazing, is not essential. There is a halfway house, by which I mean that, if you understand the theory behind CSS, you can look like an expert. Usually, this kind of fooling leads to tears, as in, for instance, saying that you are an experienced transatlantic sailor and landing a job crewing a three-man yacht across the ocean, only for it to become obvious, halfway across in the middle of a typhoon, that you could not even sail a duck in your bath. CSS, thankfully, is not in the same league: you might make some embarrassing blunders, but nobody dies, and you get to laugh about it later.

What I’m gradually getting around to saying is that the basic idea behind CSS is pretty simple; it’s the detail that gets you. But the detail can be looked up; there are many, many sites on the wonderful web where you can find lists of all the CSS attributes and the ways you use them. You don’t actually have to keep them all in your head. You can work slower, looking stuff up as you go if you’re unsure of something. This means that you will work slower than a pro, but then, you’re not a pro, which kind of makes it allright; nobody’s hanging a deadline over you. To become proficient to professional levels in this, or any other, sort of thing takes years of solid work, and it’s unlikely that you’ll be able to devote that amount of time to it; I know I can’t, and don’t. But, working slower, you can end up doing just as accurate a job, and that’s worth remembering: you can take your time unless you’re on a deadline, and if you don’t know how to tweak CSS then let’s face it, you’d be unwise to take on any job with a deadline. But using just a bit of quite simple knowledge, you can tweak any CSS you’re likely to find in a RapidWeaver template.

First off, let’s look at some CSS:

#mainContent {background-color: white}

Now let’s analyse what it does: it selects a certain part of your page, the “maincontent” area, the part that contains your main body text. This area is a box, called a “DIV”, short for “division”, because your whole page is made up of divisions: the header area, the main content area, the sidebar if you have one, the footer, and perhaps others. All DIVs. By selecting a particular area, we ensure that we don’t affect other areas. The selector symbol is a hash sign #

CSS is made up of three elements: the Selector, the Property, and the Value. The Selector is the first part, targetting a particular part of your site. The Property is next, and that means the actual parameter you want to change. In this case, the parameter is “background-color”. Finally, there is the Value, which is what makes the change. The value can be a name, as in the example here, or a number, like 10px or 1.6em. The beauty of CSS is that all the properties (background-color, for example) are in plain English. It’s not like code; “background-color” and “font-size” are pretty understandable right from the off. You can download a nifty little CSS Dashboard widget where you can look up the commonest CSS properties, and get a good idea of the values they accept. Much more information, together with lessons and samples, can be see at the W3C online schools.

So, let’s say you want to adjust your RapidWeaver theme in some way. I’ll use the Alpha theme as an example, because it’s built into RapidWeaver and everyone has it. Now, the height of the page header in the Alpha theme is 115 pixels, but say you wanted to make it larger, to accomodate a taller header image. The page header area is called “pageHeader” in the theme, so already we know that our selector will be #pageHeader. Next we need the CSS property, which in this case is height, so the property is written, simply, “height”. Finally we need a value; let’s say 150 pixels high. Our CSS will therefore look like this:

#pageHeader {height: 150px}

We enter this CSS in the custom CSS pane of the Page Inspector, like in this screenshot, and lo and behold, our header has got deeper. It might be nice, having deepened the header, to move the title and slogan down a bit, and we can do that by adding some more CSS:

#pageHeader h1, #pageHeader h2 { margin-top: 40px; }

What we’ve done here is to add 40 pixels of margin to the top of both the title and slogan DIVs, so they both move down together. Margin adds an invisible space outside your DIV, pushing it away from what it’s next to; because we added “margin-top”, it pushed it away from the top, ie, downwards. As you can see, this CSS is all on one line, but often you see it written like this:

#pageHeader h1, #pageHeader h2 {margin-top: 40px;font-style: italic;}

It’s optional, but if you’re addressing a lot of properties at once, which is one of the nice things you can do with CSS, then it’s nice to have each property/value pair on one line so you can find it easily without having to trawl through lines of text. So you can have this:

#mainContent {font-family: Verdana, Helvetical, sans-serif;font-size: 12px;color: grey;background: #cccccc;border-bottom: 1px dotted grey;}

… as opposed to this:

#mainContent { font-family: Verdana, Helvetical, sans-serif; font-size: 12px; color: grey; background: #cccccc; border-bottom: 1px dotted grey; }

You’ll agree that it’s much easier to read and find your place when they’re in a column. All you need to do is to hit Return after the first curly bracket, then type the first property/value pair, then a semicolon, and Return again for the next property/value pair. The semicolon is necessary if there is more than one property being addressed, to separate them; if you’ve only got one property, you can leave it out, although I find it a good habit to get into to always type it anyway, just in case you forget when it’s necessary and have to go troubleshooting.

If you can get your head around the simple three-part CSS thing I’ve talked about here, the Selector/Property/Value part, then you’ve learned something that will stand you in good stead. The rest you can learn at the W3C schools, and the main ones you need to know for RapidWeaver you’ll soon be able to remember after a short while.

Finding what your DIV is called

There remains the question of how you find out what the particular DIV you want to target is called. There are two pieces of software that will help you out here, and they are the Firebug extension for Firefox, and the Safari Developer tools. Both are great, both are free, and both are similar in the way they work. Firebug first; when you’ve downloaded and installed Firebug, you’ll see a little icon in the

bottom-right corner of your browser window. Click it, and Firebug will launch and split your browser window in half horizontally. At the top left of the Firebug window you’ll see a little icon with a mouse cursor; click it. Now, when you roll your mouse over any part of your site that’s visible in the top half of the window, the Firebug panel will show you what it’s called, in the left-hand pane, and what its current CSS is in the right-hand pane. In the screenshot below, I’ve rolled over my h3 header on the page and, as you can see, Firebug has highlighted the DIV on the page, displayed the HTML on the left below, and the CSS on the right.

The Safari Developer tools are very similar. You may have to enable them: go to Safari Preferences, click the “Advanced” tab, and check the box marked “Show Develop menu in menu bar” at the bottom.

When you’ve done that, you’ll get an extra menu item in the Safari menu, called “Develop”. It contains useful stuff, but for our purposes, you can ignore it. What the Developer tools enable us to do is to right-click on any part of our site to show a contextual menu, one of the items in which is called “Inspect Element”. Choose that, and you’re in a very Firebug-like environment, and it works very much the same. You may need to play around with it a bit to see what the differences are.

Using either Firebug or Safari Developer tools, you can now find out what any part of your site is called with ease. It gets easier too, as there is a standard method of naming the parts of RapidWeaver sites and, by and large, the third-party theme developers obey them. So it’s a pretty safe bet that your header will be called “pageHeader” and your content “content” or “mainContent”. As you become more familiar with the various parts of the themes, you’ll be able to guess pretty accurately what they’re called.

I’d recommend going to the W3C schools site and reading up about this. There is a wealth of information there that I don’t have room or time for here which will give you a really good idea of just which CSS property you need to alter and why. In particular, you should read up on the differene between margin and padding, and also the “Box Model”.

The information on this page is completely free, but if you want to make a small donation it will be greatly appreciated …