The Basics

The Box

With CSS every element on a page is considered to be a box. You can set numerous properties of this box, the basic three are: These combine to form the edge of the box.
The content of your box is affected by the respective values, with the content portion of the box being reduced as they are expanded.
Property values default to empty.

Margin

The margin is the space between the border and the page outside edges. For example, a margin of 20 pixels for a paragraph would add an extra 20 pixels of space between the outer edge of your page edge and the beginning of the paragraph text (assuming no other border or padding is defined).

Border

The border is the outermost edge of the box. You can set the border width, line type, and colour.

Padding

The padding space is the distance between the border of the box and the contents. For example: p {margin: 20px; border: 2px; padding 5px} adds 27px between the page edge and the leftmost edge of the text in the paragraph depending on the size of the font used.

Below is an example of a box within a page,
Remember with CSS every element on a page is considered to be a box of which this would be just one.

Left Border

Left Margin

Left Padding		 Page Top Margin
Top Border
Top Padding
Contents
Bottom Padding
Bottom Border
Page Bottom Margin		 Right Border

Right Margin

Right Padding

Think of the box as a single cell table.

Unless you use a Border or Background attribute you will not be able to see the box.

Here are a few examples.

This box is defined by using a DIV element.

<div style="width:400">This line of text is in a box</div>

I have made the box width 400 pixels, if the text is longer than the box width the height is adjusted so the box width stays the same.

I have now put a border round the box so you can see more clearly.

<div style="width:400px;border:solid 2px">This text is in a box</div>

Here is the same box without the border but with a background colour

<div style="width:400px; background-color:gold"> This text is in a box</div>

And now with padding.

<div style="width:400px; background-color:gold; padding:15px"> This text is in a box and now includes the padding attribute.

Notice that the more text I add to the box its width remains the same but the height differs.</div>

Using position:absolute you can place your box with its contents anywhere on your page using any of the many effects that are available with css or scripts.

Note:
Internet Explorer adds the border and padding sizes to the inside of the box.
Netscape adds the border and padding sizes to the outside of the box.

<style>....</style>

Style definitions consist of three parts:

Selector Properties Values

Together the above three are known as a rule.

<style>
selector{property:value}
</style>

Multiple selectors are specified on a separate line within the opening and closing <STYLE> tags, followed by the properties and values that are to be assigned to that selector.

<style>
selector{font-size:25px}
selector2{font-size:25px;color:red}
</style>

Standard HTML tags are used as simple selectors as opposed to the more complicated Generic and Contextual selectors.

For this example I am going to use the paragraph tag <P> as a (simple) selector.

So P is the selector

font-size: is the property

And 25px is the value

<style>
P{font-size:25px}
</style>

Note the opening { and closing } braces
This would make all text using the paragraph tag, <P>, 25 pixels in size

If you want to apply a different style to specific paragraphs using the above method would not be sufficient.
The option here would be to use a generic selector, this could then be used with any HTML tag even of the same type.

Class selectors allow you to apply different styles to HTML elements that use the same tag
Create a generic selector for the class alone which is applied to any HTML element carrying that class attribute. To do this, using the above as an example, change the P for a name, such as enlarge.

Because this can be used with any tag a dot is placed before the selector name in the style definition.

<style>
.enlarge{font-size:25px}.
</style>

This text has now been enlarge and is achieved by typing the following;

<P class=enlarge> ( enlarge without the dot)

Because I used a generic selector for the above display I was able to use the same selector with the <dir> tag that I used to display the "<P class=enlarge>" line.

<P class=enlarge>This text has now been enlarge and is achieved by typing the following;
<dir class=enlarge><P class=enlarge></dir>

The normal <P> tag is not effected now unless you include the "class=enlarge" selector.

I have given the simplest example using just the font-size attribute but there is a multitude of attributes that can be used giving you more control of your web page displays than you get from standard HTML.

If you want to use more than one attribute in a definition then you separate them with the semicolon ";"

So to enlarge a section of text and change its colour to red you would have something like this;

<style>
.bigred{font-size:25px;color:#ff0000}
</style>

To show the above display I typed:

<style>
.bigred{font-size:25px;color:#ff0000}
</style> <span class=bigred> </span> Notice that I have now introduced yet another tag, the <span> tag.

To apply style definitions with greater precision you use Contextual Selectors.
This would apply a style only when set conditions are met and would eliminate the need to add Class attributes to all html elements.
This is achieved by using a particular HTML element as a selector and specifying that the style only be applied when that element is contained within another specific HTML element.

Example:

To have a link <A HREF=" "> a different colour only when it comes after a <P> tag;

The definition would be;

<style>P A{color:blue}</style>

And the HTML would be;

<P><A href="#null">Link</a>

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector. For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }