Coding: CSS: Introduction

Consistency is one of the keys to an effective website. The easiest way to maintain consistency throughout your pages is the use of Cascading Style Sheets (CSS).

Read Chapter 8: Working with Style Sheet Files by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.

The Terminology

Let's explore the rules associated with Cascading Style Sheets. Each style has two parts. The selector determines which elements the formatting will affect. The declarations are made up of one or more properties and define what formatting will be applied.

In the example below h1 is the selector and {color: green; } is the declaration. The property is color and green is the value. Properties accept different types of values such as numbers, integers, relative values, percentages, URLs, or colors.

The most common mistakes involve punctuation.

• Be sure you use the open and close curly bracket { } not parentheses or other punctuation.
• Follow the selector with a colon.
• Follow the value with a semi-colon.
• If you want to add comments use /* at the beginning and */ to signal the end of the comment.

Example

/* This is my simple style sheet. */
h1 {color: green;}

Cascades

The word cascading comes from the way that your CSS handles conflicting styles. According to Castro there are three things that determine how styles are handled: inheritance, specificity, and location.

Inheritance determines what happens when you don't specific a rule.

Specificity is used when more than one rule applies. The more specific the selector, the stronger the rule. The id attributes are most specific and would override the body or paragraph element.

Location makes the final determination of what style is applied. Rules that appear later have more weight. Rules that apply locally in the HTML override those in the CSS. For example, you might decide to apply boldface in the HTML. This would override the settings in the external CSS.

The Options

You can use CSS two ways: internal and external. First, you can enter the style tags at the top of a single document or within a single document. These are called an internal style rules and will help you maintain consistency within a document. Second, you can create a separate document called an external style sheet that can be attached to a single document or a series of pages such as a website.

Read the Quick Reference Chart (PDF) by Bill Henning.
Read the CSS Syntax of a Style: Internal or External (PDF) by Bill Henning.
Read the CSS Syntax of a Style: Inline (PDF) by Bill Henning.

---