Learning:
The Journey of a Lifetime
A Cloud Chamber of the Mind

April 2006 Technology Notebook

Notes for "CSS in 10 Minutes"

Lesson 1

The main reasons for using CSS (Cascading Style Sheets) are:

• substantially less code
• ease of modification
• one style sheet can be used to format many data files

CSS is a recommendation of the W3C.

Lesson 2

A CSS rule set is a set of code for telling a browser how to format a set of elements on an HTML page. The elements may be part of this HTML code or they may reside in a totally separate file.

A rule set consists of a selector followed by a declaration block. This block may contain one or more declarations. Each declaration block is enclosed in curly brackets { ... }.

A selector specifies the elements that are affected by the rule set.

A declaration consists of a property, a colon, and one or more values. It ends with a semi-colon.

Example:

h1 { font-style: italic; color: blue; }

When I last looked at the whole issue of XML and CSS I had decided that I could ignore the actual rules for the code and simply learn how to use an authoring package such as StylusStudio or StyleVision to create the code. I have now decided that it makes more sense to go through the steps of actually learning CSS first.

Fortunately the actually effort of typing in the code has been eliminated by downloading a set of files from the publisher that accompanies this book.

Lesson 2 continued

In some cases one may want to apply a set of declarations to more than one selector. This is easily done by simply separating the elements with commas.

Example:

h1, h2, p { ...}

Shorthand properties allow one to concisely specify a set of properties that all belong to one situation such as specifying the various properties related to fonts.

It is recommended that one use the following order for specifying font properties: font-style, font-variant, font-weight, font-size, line-height, and font-family.

Example:

h1 {font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; }

One need only specify the values that one is interested in, the remainder will then assume a default value.

Example: h1, h2 { font: bold helvetica; }

Surprise!

I copied the code for one of the simple examples from the book into Dreamweaver and then started to edit the file to see what some of the options would look like. But as soon as I began to edit the source code Dreamweaver automatically gave me a drop-down list of possible options. That is, Dreamweaver now provides support for coding CSS. Sometimes I am so slow to realize the obvious.

It has been fascinating to play with the different options.

Lesson 2 continued

In addition to the font properties, there are a set of properties related to the border.

Two other properties are those about margins and padding. Padding is the space between the edge of the element and its content. Margin is the space between an element and another element.

Two more properties with shorthand options are those for background and list.

This has been a great beginning! The combination of the book and the drop down menus within Dreamweaver have turned out to be an unexpected development, but I can now see the value of having a clear idea of the syntax for CSS since it allows me to utilize the features of Dreamweaver.

For the first time I can also visualize how I might totally recode my web sites into a CSS format.