CSS Basics

Posted by Paul on August 18, 2010

A Basic XHTML / CSS Tutorial

I remember my early "adventures" while learning CSS and with the benefit of a few years' hindsight it's now easy to see which of the rules in the many tutorials were the most useful. Here are a few of them.

This tutorial assumes some basic XHTML and CSS knowledge. If you're new to these, it's worth a read of these first:

www.w3schools.com/css/

www.w3schools.com/xhtmL/xhtml_intro.asp

The Box Model

In a nutshell, think of any element on the page as a rectangle. For example a div with a width and height of 60 pixels would look like this:

Display Types

The display type of an element can be either "block" or "inline". There are some other types but these are almost never used apart from in fixes for IE 6 bugs!

XHTML tags have a default display type of either block or inline. Tags with a default display type of block include:

• div
• p
• h1, h2, h3 etc.

Tags with a default display of inline include

• span
• img
• a

Remember for your page to validate you can never use an inline element to contain a block level element, so it's always invalid to have a p tag inside an a tag.

So what's the difference between these display types?

Basically, a block level element by default fills the width of its container and has a line break before and after it. So if you place one in a paragraph of otherwise unbroken text, it will look like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And here is an inline element in the same paragraph:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. inline level spanDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float Left and Float Right

If you've used CSS you'll probably have found that giving things a float left or float right tends to fix a lot of problems.

Here's what they do; floats can only apply to block level elements, so if you use one on an inline element such as an a tag, it will automatically be given a display of block.

As we noted earlier, a display of block usually means a line break before and after your element. Giving an element a float will remove the linebreak after the element and reduce its width to the width of the contents.

This will mean items below it are now free to flow beside it. The div below is floated left:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How Float Left and Right Interact with Float None

By default, elements have a float of none. When you float an element, it "takes it out of the document flow". This means that if its parent element isn't also floated, the parent element won't be able to pick up its height. You can add a br tag or an extra div with a clear property after your element to fix this, but this should be avoided if possible.

Generally, if you can avoid using floats, you won't have issues with elements not expanding to the height of their children. As soon as you add a float, and this is often necessary, you'll need to work your way up through the parent elements adding floats to those as well so that they pick up the height unless you add a "clearer" div or br.

Back to the Box Model - Margin and Padding

So every element can be thought of as a rectangle on the page. But when you add a margin, it can be thought of as having another invisible rectangle outside it that other elements can't enter:

Elements can also have "padding", which is just like an inner margin: