Notes on CSS

When I haven't CSS in a while though I forget some of the basics - this acts as a short primer to remind me how they work!

General

The most important resource to use when putting together a page using CSS is the specification.  Other important things:

• Use @import "file"; to import other CSS files - note the semi-colon
• All entries should end with semi-colons.  If something isn't working - check for it!
• To position content without tables you have to think in terms of the kinds of boxes you are going to use instead.
• Use display: block; or display: inline; to set the type of block the element generates

Box Model

  There are two kinds of boxes: block and inline.  There are lots of other varieties, but in the end they come down to one of these two.  So what's the difference?

Block - These stack vertically, regardless of width.  You can use various properties to override this behaviour, but they normally go one-after-another.
Inline - These fit horizontally in one line, wrapping to another line if required.  You can not set the width of them, although you can override where they are placed.

Block Boxes

With a block box you can:

• Specify it's size, either as an absolute number or as a percentage of it's parent box.
• Centre it by making both margin-left and margin-right to auto.
• Float it left or right
• Offset the box relative to it's "normal" position.
• Specify the exact location using absolute positioning.
• Attach the box to the viewport - the box will always be present even as you scroll the screen.

Tricks with floats

When you float an element left or right it moves as far in that direction as possible, taking into account the size of it's parent - and any margins, borders, or padding that might affect it.  Once it's floated over it's then ignored by all other boxes - they will overlap with it.  However the content of all other boxes will flow around it (to the left or right), unless they have the 'clear' property set - in which case they will go below it.

Note:Sometimes if you have two boxes, one floating left, the other right, the result is the right hand box being too low down.  This can be worked around by putting the HTML code in the other order, i.e. with the right hand div first.

Inline Boxes

Inline boxes are containers of normal content.  Things like images, the contents of bold tags, and other such elements generate inline elements.  If you need to style a particular part of some paragraph you can do it using any element you like, and styling it into an inline.

Back to Thoughts