Wellesley College Dreamweaver Documentation

Cascading Style Sheets

| What is CSS? | Creating CSS | Links |
| CSS in Dreamweaver MX: Internal Style Sheets, External Style Sheets |
| Hand-Coding Basics: Coding CSS, Rules, Properties, Attaching Style Sheets |

Rules
------
| Rules , Parts of a Rule |
| Understanding Selectors: HTML Selectors, Class Selectors, ID Selectors |
| Grouping Rules |
| Applying Rules to Specific Items |
| CSS Comments |

Rules

The best thing about using a Cascading Style Sheet is that it is really simple to create. A style sheet is essentially a set of one component : the Rule.

A rule defines what a specified portion of HTML, i.e. Heading, should look like and how it should behave in the browser window. Once you understand how to write one rule, you can easily write a set of them to create a style sheet. Style sheets are saved as .css files, i.e. mainPageGuide.css.

Parts of a Rule

There are three parts to every rule: the selector, property, and value.

Selector: Names the rule and/or identifies its type.

Property: Style element being defined. There are a variety of different properties, each one responsible for an aspect of the page's appearance and behavior. Property categories include Type, Background, Block or Text Spacing, Box or Borders, List, Positioning, and Extensions.

Value: Quality or quantity assigned to a property to define its 'nature'. A value can be a keyword such as 'yes' or 'no', or a number. The type of value used will depend on the property being defined.

Together, the property and value are known as the declaration.

Understanding Selectors
---------------------------

Selectors indicate the rule type and what will be affected. There are three main types of selectors: the HTML selector, class selector, and ID selector.

HTML Selectors

An HTML selector is the text portion of an HTML tag. For example, H3 is the selector for the <H3> tag . All HTML tags have default properties. The HTML selector can be used to control the behavior of its specific HTML tag. To change the HTML tag's behavior, just change or redefine the selector's properties. A list of properties available in CSS1 can be found on the Properties page.

Creating a Rule by Redefining a HTML selector:

1. Start with the HTML selector whose properties you want to change and then add a opening bracket, { , to open your definitions list.

2. Type in all your property declarations, ending each declaration with a semicolon, ;.

3. } Close your declarations list with a closing bracket, } .

Once you redefine an HTML selector, all of its tags throughout the website will be affected automatically.

Class Selectors

Class selectors are selectors that you create from scratch. They can be applied to any HTML tag, so are considered the most versatile type of selector.

Creating a Class Selector Rule

1. Type a period and assign a class name. The name can be anything as long as it is letters and numbers. Then open your declaration with a bracket, { .

2. Type in your declarations for the class, ending each declaration with a semicolon, ;.

3. Type a closing bracket, } , to end your rule.

Using a Class Selector Rule in an HTML document

Unlike an HTML selector, which works with existing tags within an HTML document, a class selector does not affect the document automatically. It must be referenced or called within the HTML document to have any affect.

1. Choose the opening tag of an HTML element which you would like to apply the class rule to.

2. Insert class to indicate that you will be applying a class rule, then set it to the name of the class rule you are referencing, = "classRuleName".

ID Selectors

ID selectors are very similar to class selectors. They can be applied to any HTML tag and need to be referenced within the HTML document to have any affect.

The only real difference is when they should be used. An ID selector is generally reserved for something that appears once on a page. For example, if you have a page with a set of several topic headings, but there is one particular topic heading that you would like to stand out from the rest, then you would create an ID selector rule for that specific topic heading. The ID selector gives it a unique name and identity, so you can change that one topic heading without affecting the rest of the set.

ID selectors are most commonly used with positioning properties since the page layout of a website may vary from page to page. For each page, you could create ID selector rules that would adjust specific sections of the layout to meet your needs.

Creating an ID Selector Rule

1. Type a number sign, #, and assign an ID name. The name can be anything as long as it is letters and numbers. Then open your declaration with a bracket, { .

2. Type in your declarations for the ID, ending each declaration with a semicolon, ;.

3. Type a closing bracket, } , to end your rule.

Using an ID Selector Rule in an HTML document

Similar to a class selector rule, an ID selector rule does not affect the document automatically. It must be referenced or called within the HTML document .

1. Choose the opening tag of an HTML element which you would like to apply the ID rule to.

2. Insert ID to indicate that you will be applying an ID rule, then set it to the name of the ID rule you are referencing, = "idRuleName".

Grouping Rules
-----------------

One way to make style sheets shorter and easier to navigate is by grouping similar rules. Below are some examples:

Applying Rules to Specific Items
------------------------------------

Style rules are commonly applied to HTML elements through their HTML tags. If, however, you wanted to apply a style to just one word within a paragraph, what do you do? That one word is not considered an HTML element on its own so does not have an HTML tag associated with it. Although you cannot create individual HTML tags for such specific items, there are two HTML tags, <div> and <span>, that will sufficiently allow you to apply the style rules to such items.

The <div> and <span> tags are very similar, except the <div> tags add a break above and below the item they enclose. The <span> tags alone do no have any properties, so you can easily apply any style to the item they enclose.


Using <div> and <span> tags

Both the <div> and <span> tags can be used in the same way as any other HTML tag, i.e. <i> for italics or <b> for bold. To apply a style, the instructions are the same as for Using a Class Selector Rule or Using an ID Selector Rule.

An example for using both the <DIV> and <SPAN> tags are below. The example assumes the "french" and "revered" styles have already been created.

CSS Comments
-----------------

CSS comments are used in the same way as HTML comments are used in HTML documents. A comment does not have any affect on the appearance of the webpage. It allows you to make notes on the code being written. This makes it easier for you to keep track of what you're doing as well as being a reference guide for other people who may use your CSS style sheet later.

There are two ways to make CSS comments : single-line and multi-lined

To Write Single-Line Comments

1. Start a comment line by typing two backslashes, //.

2. Type in your comment . There must be no line breaks.

To Write Multi-Lined Comments

1. Open your comment with a backslash and star symbol, /*.

2. Type in your comment.

3. Close your comment with a star symbol and backslash, */.

• Created by: Tuyet Nguyen
• Wellesley College Information Services
• Date Created: September 19, 2003
• Last Modified: November 14, 2005
• Expires: June 1, 2004