Having covered the uses of stylesheets and the means to implement them in
HTML in my last article, I will now address some useful formatting techniques
and discuss some of the most invaluable and helpful styles for creating superior
websites.

Remember, styles can be applied to an HTML element with a defined ID, all HTML
elements with defined CLASS attributes, or all HTML elements of a specific type
in the document, based upon your needs.

Styling the BODY tag

Of all the elements in an HTML document, the BODY tag is probably the most
important element that you can apply styles to because those styles affect
everything within the BODY tags in that document. You can set your default font,
font size, font color, background color or image, and as well as much more.

Here is a simple example:

In this example, I have set the standard font of the website to Trebuchet MS.
You should also list alternate fonts separated by commas and ending with a default
type font (such as serif or sans-serif) to be used by computers that do not support
the font you have chosen as your first choice. I have also set my font size to 12px
(this can also be addressed in points or ems). The font color that I have chosen
is green, described with its shorthand name, and the background color is blue,
described with its hexidecimal value. Any color can be described using its predefined
shorthand name (see reference chart), its hexidecimal value or its RGB value. Lastly,
I have adjusted the padding to 0px to counteract the natural padding of the BODY
tag that prohibits your website from beginning at the edge of the browser window.

Styling Nested Elements

With CSS you can style any HTML element nested within an identified div or HTML
element. Say that you are creating a navigation menu and you want to style only the
<li> tags within the menu…

Your HTML looks like so:

So, then your CSS would look like so:

Important styles

Padding and Margin

Padding describes the amount of spacing within an element (much like cellpadding
for tables), while margin describes the amount of spacing outside of the element
(much like cellspacing for tables).

Syntax:

Margins can be described in exactly the same manner.

Background

You can use CSS to set background-images and/or colors. Here is a list of the
background attributes available in CSS 2.

Since most of these are self-explanatory, I will now show the shorthand way to
set a fixed background image with an underlying background color in CSS.

A beautiful repeating background image would look like so:

Using shorthand can be confusing at first, but will save you time in the long
run and I use it readily.

Text

Well-formatted text is a crucial aspect to good design. Typography is too
often neglected in web projects and it is shameful because HTML and CSS offer so
many excellent resources for formatting and styling text.

Here is a brief description of the uses of the most important Font and Text
attributes that you can use in CSS to stylize your content.

This is a mere introduction to some of the most important aspects of CSS, but
has hopefully offered enough guidance to allow you to begin understanding and
implementing styles into your design. In coming tutorials, I shall begin to
explore more deeply into the potential of CSS including CSS rollovers and menus,
layouts, and so forth.