Beginner's Guide Series - Basic CSS

I know I'd promised that the next post would be about ColdFusion, but I guess I forgot to take a look at my list: what I want to talk about first is Cascading Style Sheets (CSS).

What is CSS?

CSS is used to "style" your HTML page. Where HTML defines the structure of your document, CSS gives it a look and feel. It can be used to change the font of the document or of a specific element. It can also change colors, apply backgrounds, modify layout, change size and more. It's a series of rules that apply changes to the different elements of the page.

Declaring rules

There are three places where we can define these rules. The first and simplest way is inline with the element. Say you want to change the font size of the text within a particular paragraph. We'd do this by using the HTML style attribute. This attribute can be placed in any HTML tag, and simply defines the CSS styles to apply to that specific element:

The result:

This is some text with the default font size.

The text in here should be 14pt.

A CSS rule is made up of two parts: the property and the value. They are separated by a colon (:). The semi-colon (;) at the end of the rule is optional, although it becomes mandatory if you want to declare additional rules within the style attribute.

The other two places are in the header of our HTML document. One of them has the rules in the actual page, whereas the other one has the rules in an external file, called from within the HTML page. To define the rules from directly within our HTML document, we need to add a <style> tag inside the head of the document:

We could place as many rules as we'd want within that tag. However, we can also keep our style information inside a completely different file. To call it from our document we use the <link> tag:

The rel and type attributes are standard. The href tells the browser where to retrieve the CSS information from. You can specify the location the same as with images. In the .css file, you do not need to start with the <style> tag; you only need to write down your rules.

In both cases, however, since we aren't directly declaring the rules in the element we want to style, we need to have a way to reference it. Luckily for us, there are three ways to reference elements from within a CSS declaration:

• All elements of the same type (ie.: all paragraphs (<p>));
• All elements of the same class (more on this later);
• The single element with the provided id (also more on this later).

The first way is pretty simple. We want to change the default font size for all paragraphs. To define a series of a rules, all we need to do is place the element we want to style, open up some curly braces ({,}) and start styling:

Within the curly braces we can put as many rules as we want:

The second way applies rules to elements with the certain class. This is a way of regrouping elements (not all necessarily of the same tag) so that we can quickly apply certain style rules to them. This is done by using the class HTML attribute with the elements we want styled.

When you want to reference elements of the same class in CSS, you simply need to use the name of the class, preceded by a period (.):

Here's how that looks like when it's all put together:

Just a regular paragraph.

Make me smaller!

I want to be smaller too!

The last way is by referencing an element with a specific ID. The id attribute is used to give a specific identity to an element. This ID can then later be used by CSS and JavaScript to reference it directly. To reference an element by it's ID in CSS, we precede it by a hash sign (#):

And in the HTML, we simply use the id attribute to distinguish it:

The result:

Welcome to my page

This is just a basic paragraph.

There are loads of possibilities. It would take far too long to list out all available properties here, but luckily the w3schools site is a really great reference.