CSS rules

A small word of explanation about CSS rules.

A CSS rule consists of two parts.

You have the “Selector”, this is a term such as body, P, Table, H1, a class name or an id.

In the example you have “body” as the Selector.

And you have the Declaration. The Declaration defines the style properties.

The Declaration consists of two parts:

You have the Property and you have the value.

The declaration is placed between braces {}, we call this the declaration block.

In the example below you have the “background-color” as the “Property” and “# CCCC66” as the “Value”.

Between the property and the value of the declaration, there is a colon.

And a semicolon at the end of the declaration value.

You can have as many declarations in a declaration block site as you need and you have the ability to place multiple selectors in a CSS rule.

Type a comma between the different selectors.

In the example below you have the selectors “body”, “td” and “th” and the declarations “font-family’, ‘font-size” and “color”.

This is the basis for CSS.

Sometimes this can be a bit confusing because for example the body tag is used twice (see previous page Image).

 

But what it really is, is this:

The first selector is a compositeof several “selectors” (ie tags). You have the “body” tag, the “td” tag and the “th” tag. The “td” tag and the “th” tag respectively are for table cells and table headers.

So these properties, font family, font size and color are applied to all of these tags.

The property of the second (“body”) selector, the background-color, is only applied to the “body” tag.

Dreamweaver does everything automatically when we create CSS styles, but it is interesting to know what Dreamweaver is doing in the background, if you ever plan to own CSS rules types.

 

From Internal to External CSS

The advantage of an external CSS style is that we can use them on different pages.

We have two possibilities to create an external style sheet.

A first possibility is making a single style sheet into an external style sheet.

The second possibility is to make an external style sheet out of nothing.

The first thing I’m going to discuss is to create an external style sheet from an internal style sheet.

We had already seen how an internal style sheet is added to our page in the previous lesson.

In order to use it in other pages of our site, we make them as external CSS.

Open the page where your internal CSS style is created.

Click the downward pointing arrow next to the CSS panel, choose CSS Styles and click the “All” tab.

If all applied styles are not visible, unfold it by clicking on the plus sign next to “Style”.

Select all applied styles by first holding your shift key on your keyboard and selecting the latest styles.

Right click the selected styles and choose “Move CSS Rules” in the dropdown menu.

This opens the dialog “Move to external style sheets”.

In this dialog we have two choices.

We have “Style Sheet” and we have “A new style sheet.”

Because I have no style sheets available, I choose the second option.

If you already have a style sheet, choose the first option and browse to the CSS page. This will add new styles to your existing style sheet.

Click the OK button.

So if we have chosen the first option, it opens the dialog “Save Style Sheet File As”.

In this dialog box, select the folder in your site where you want to save the css page, give a name to the file and click the “Save” button.

For this example I created a new folder “CSS_Styles” to keep everything a bit more orderly and I named the CSS file as “My Style”.

Click the “Save” button when you’re done.

This places the new folder “CSS_Styles” with the new CSS file “mystyle.css” in the sitemap.

 

 

 

 

 

 

If you now look in the source view of your page, you will see that the CSS style is gone and replaced the code with the link to the external CSS style.

Alternatively you can remove following lines.
These are the lines from 7 to 10 in the diagram below.

Attention!

In previous versions of Dreamweaver, this was more time consuming.

First you click on “File” in the menu bar, choose “Export” from the drop-down menu.

Then save the CSS-style. Then link the newly saved CSS stylesheet to the page and then manually remove the internal CSS.

So much for those with external CSS, it is perhaps useful to upgrade to version CS3 or CS4

In the next lesson we will see this external stylesheet link to another page.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats