Part 1: Style sheets on the web

Videos for this class

There are six videos related to this lesson. One of these is for persons using the older MX release. Before looking at this video (for MX users only), look at least at the first three videos for Part 1.

What are style sheets?

Style sheets, which are often referred to as CSS for Cascading Style Sheets, are a way to separate content on web pages from formatting. The term cascading refers to how styles are implemented, when you have multiple references to the same element in the same web document. We will look at this more in Part 2, after you have some experience with creating style sheets.

Style sheets are found in other applications, such as in many word processors and page layout programs like Pagemaker. The concept was introduced to the web by the World Wide Web Consortium in 1996. This is the group that creates the standards for HTML coding used on the web. The Consortium wanted a way to get browser manufacturers from introducing more HTML tags which were really formatting. The Consortium came up with how different properties could be applied to regular tags like <h1> and <p> and "special" tags created by the site manager..

These formatting instructions for how tags are displayed are either placed in the <head> area of the web document or are in a separate document that is referenced by the web document.

Normally you cannot really tell by looking at a web document if style sheets have been used for formatting, but sometimes you might see effects such as the boxed text below. This text box is not a graphic but is regular text with a special style applied to it. There is certainly no command in the Properties panel or regular menus of Dreamweaver that let you create a box around text.

This document (Part 1) that you are looking at is using a simple style sheet, which is not as obvious as the above example, because there are no special effects in this document. But if you look at the top part of the coding in this document, by using View, Source in your browser, you will see this formatting code that is shown to the left.

This is a style sheet that is affecting this document. The style sheet is making the header areas blue and is giving command for particular font sizes and font types.

You have already learned about using templates. Templates can be used without styles, styles can be used without templates, and both features can be used in the same documents and on the same site. Templates are primarily used for layout of elements or parts of a web page. Style sheets are used for formatting. It is the style sheet, thus, that controls the use of a color red and a font size and font type for a header in your document. The template dictates where the "header" will be on the page, but the style coding affects its appearance. We will look more at adding styles to templates in Part 2.

Why use style sheets?

The videos Components of Style Sheets and Style Sheet Basics in Dreamweaver MX 2004, as well as the video Things You Might Have Wanted to Do -- Now You Can, show some of the advantages of using style sheets.

One of the reasons to use styles is to provide consistency in terms of elements on a page and elements found on different pages. For example, if you have three or four traits for a heading that you use throughout your site, by placing those into a style and then referencing the style, you don't have to remember all the specific traits each time you use the header. This is also an advantage if you have others creating documents for your site. It is easier to tell them to apply a particular style from a listing of styles than to provide the detailed instructions to create the header.

A second advantage is that changes in formatting can be made in one document and all documents using that style sheet are updated. This is similar to one of the advantages of using templates on a site. The changes don't have to be significant; you mighly only be changing the type of font used on your pages. However, if styles are not used, then each document must be opened individually and changed. This is perhaps the major practical reason that site managers decide to use style sheets on their site. As you will see later in this class, in Part 2, applying a style sheet to an existing site can mean a lot of removal of existing formatting code. For a large site this can be time consuming, but the end product is a site that is much easier to maintain in terms of formatting.

A third reason for using style sheets is that through properties and values associated with tags, that can only be done in a style sheet, you can create effects not found in the Properties panel nor normal Dreamweaver menus. You will see several of these shown in the video Things You Might Have Wanted to Do -- Now You Can and in videos in later lessons. A few examples include changing the spacing used between paragraphs. The default is to put a "blank line" but through style sheets you can remove all spacing between paragraphs or reduce the spacing. You can alter the spacing between words, letters, or lines of text. You can add indentations to paragraphs, and you can add elements like a line border around parts of your document.

If you are using the 2004 release of Dreamweaver MX, then any time you apply text traits through the Properties panel, you are creating an internal style sheet rule in that document. I think Macromedia added this to the Properties panel with the 2004 release just to emphasize the use of styles and to get more people using this feature in their documents. Since Dreamweaver is creating style rules for you, through the Properties panel, it is better to give meaningful names to these styles and understand how to edit and delete these style rules.

Yet another reason to use style sheets is that it is expected. The World Wide Web Consortium that creates the rules and standards for web pages wants site managers to use style sheets, to separate content from formatting. Their standards are outlined in great detail at www.w3.org/Style/CSS/

Related to the above reason, the web document standards expect site managers to use XHTML and style sheets in their documents. As other devices are used to view web pages, such as hand-held computers, writing clean code that meets XHTML standards and using CSS to separate content from formatting will help make content of web pages viewable on alternate devices.

Yet another reason to use style sheets is that with the same content, you can alter the appearance of the document for different devices. The two most common are to have a layout for the screen, which might include a navigation area and use of colors in headers, etc., but when the document is printed, color headers are changed to black and white and navigation areas on the page do not print.

The structure of style sheets

A style sheet is basically a collection of rules, and each rule controls some aspect of formatting in the document. A rule is a statement made up of an HTML or custom style, called a selector, and its defined properties and values. So in the videos I sometimes call these statements rules and sometimes call them selectors.

To the left is an example of the simpliest rule. It is a rule or selector for how the h1 tag will be displayed, and there is only one property in this rule. It is property for the font family to be used. The value is Arial, Helvetica, or sans-serif.

Most often, however, a rule has more than one property, such as the one to the left. This is called grouping of properties. This rule has four properties: one for font-family, one for font-size, one for font-weight, and one for font-color.

Sometimes you will see several selectors in one rule. This is called grouping of selectors. In this rule, to the left, there are four selectors which have the same traits for font-family and font-color. This type of grouping will not occur if you use the Dreamweaver style editor to create your styles, but you could find this type of grouping in style sheets you get from others who hand-typed the style sheet.

So a style sheet is a collection of rules that control formatting. Style sheets can be internal and, if internal, then the rules are found in the <head> area of the document. An internal style sheet only affects that single web document. An external style sheet is a special (web) document that ONLY contains rules. There is no content in this document. External style sheets are much more popular, since making format changes in an external style sheet affects all the documents using that style sheet. Both internal and external style sheets are shown in the videos Components of Style Sheets and Style Sheet Basics in Dreamweaver MX 2004. Although you can have both internal and external style sheets being used by the same web (html) document, you have to be careful to not give conflicting instructions about the same tag. This will be addressed more in Part 2.

Three types of selectors

There are three types of selectors. A selector can be for a regular HTML tag like <h1>, <li> , <strong>, <blockquote> or <p>. Many of the selectors you will create for your site will be tag selectors. Another type of selector is called a class selector. The names for these are made up by you. The third type of selector is called an ID selector. These names are also made up by you. We will look at the ID selector in Part 3.

The style sheet to the left has both tag selectors and class selectors.

The first three rules are tag selectors, affecting regular HTML tags. The first rule is giving properties for text in the basic document as well as text in table cells and table cell headers. The second rule is giving a color for a link (before it is selected). The third rule is giving a different color for a visited link. These rules are used whenever that tag is used in the web document.

The two class selectors have names that start with a period. Class selector names must be one word (no spaces). One shown here is called .mainheader and another is called .footer, and the names here give you a clue about how these rules are to be used. Some class selector names, however, can be pretty cryptic. Class selectors are normally applied by selecting the text that will be affected and then picking that class name from the list of styles in the Properties panel (for the 2004 release).

Dreamweaver 2004 creates styles for you

As I mentioned already, whenever you pick traits for text using the Properties panel in the 2004 release, Dreamweaver is creating an internal style rule for you. These are named rather arbitrarily style1, style2, style3, etc. in the given document. By using the Style drop-down window in the Properties panel, you can select text in the document and pick one of the styles to use it again in the same document.

However, if you have an older HTML document created in an earlier release of Dreamweaver, and you open the document in the 2004 release of Dreamweaver, you won't see any references to styles in the Style window, because regular <font> coding was used in the document. You can create styles, but the existing coding might conflict with the styles/rules you are creating.

The best way to see if either an internal style sheet or an external style is being used by an HTML document is to turn on the display of the CSS Styles panel (or window). Go to Window on the main menu, and select CSS Styles and that panel will show. If you see a + <style> in the panel, then click on the plus symbol to see a list of the rules affecting that document. This will work for both internal styles and external styles. The video on Style Sheet Basics in Dreamweaver MX 2004 shows rules being used in an HTML document that was created using Dreamweaver MX 2004.

Editing existing rules

The best way to start understanding style rules is to take a document that has styles and edit the styles. Then take a document that has no styles and create some of your own styles.

There are two ways to edit (thus change) rules in a style sheet: you can edit the code directly in the rule, or you can use the Style Definition dialog box through the CSS Styles panel. The video Components of Style Sheets shows changing the code directly, such as changing the color value for text from black to green or changing the font size for part of the document. However, you will find it much easier to use the Style Definition dialog box in Dreamweaver, especially until you get more comfortable reading the rule statements.

The video Style Sheet Basics in Dreamweaver MX 2004 shows this list of rules when the CSS Styles panel is turned on. There are 6 rules in this (internal) style sheet shown to the left. Four are tag selectors and two are class selectors.

You have a similar document to practice with in your sample files, called sampledocument.html

To edit a given rule (or selector), click one time on that rule in the style listing, so it is highlighted, and then click on the Edit Styles icon at the bottom of the CSS Styles panel.

A dialog box such as the one to the left appears. There are 8 categories (which are creations of Macromedia) to help group similiar properties together. The category you will use most is Type, which controls basic text features. Other categories will be demonstrated more as the class progresses, but you also should explore these screens yourself.

The screen capture to the left shows the properties and values for the body, td, and th tags. You can see the "selector" name in the top line of the dialog box. This dialog box lets me change the font family, font size, font style, color, font weight, etc.

As you will see in various videos as the class progresses, sometimes you might just pick one category and change a setting there for a particular rule. Other times you might pick two or three categories, make changes on those screens, and then click on the button OK to save the changes to the rule you are editing. A single rule or selector can have just one property (and value), or it can have several properties.

Creating new rules

The video Creating Styles through Dreamweaver (on a clean document) shows creating styles only through the Style Definition dialog box, and not first using the Properties panel. As you move towards creating your own style sheets for your real websites, you will probably use this technique, particularly if you strip out formatting in your existing documents (as we wll look at in Part 2). Click on the icon New CSS Style at the bottom of the CSS Styles panel to bring up the New CSS Style dialog box.

You will use this dialog box to create class selectors and tag selectors. If you pick class selector, then type in a name for the selector (Dreamweaver adds the initial periodt). Use single words for the names (no spaces). If you pick tag selector, then you will select the tag from the resulting list of tags.

In the video I start first by defining rules (or selectors) for various tags I plan to use in the document. For example, you can define for the body tag, the h1, h2 tags, for the p tag, for the li tag, and so forth.

You can create a tag selector for the basic body (default text) by using the New CSS Style dialog box or by using Modify from the main menu, then Page Properties.

Since you are a beginning user of style sheets, I advise you to define the rules in the current document, and then export them to an external sheet later. Especially if you have a document you are applying those rules to, you can see (sometimes) the effects right away.

Besides defining tag selectors, you will also probably create some class selectors. It is hard to image a situation where you would not need at least one class selector for a website. Class selectors allow you to apply formatting in particular (selected) parts of your document. This is demonstrated in the video in the creation of a rule called .emphasis to draw attention to particular sentences or paragraphs.

By looking at the videos and exploring the settings for the 8 categories of properties, you will decide which categories you will want to use in the rules you create for your site. This screen capture to the right shows initial settings to change the margins at the bottom of a paragraph so the paragraphs in your document are closer together. But sometimes more than one margin has to be changed, to get the effect you might want.

Deleting a rule versus removing effects

It is not unusual to create a rule and apply a rule and then wanting to remove that rule (or selector). The video Style Sheet Basics in Dreamweaver MX 2004 illustrates the difference between removing the effect of the rule in a part of your document and deleting the rule.

If you have applied a class selector to a part of your document and don't want to use it there anymore, position your insertion point inside that text area, so that the class name is showing in the Style window in the Properties panel. Simply pick from the window's listing the option of None and the coding for the class selector is removed in that location.

If you have a rule that is a tag selector, and you want to remove the effect of that rule in one location, you have to remove the tag itself. For example, if you had used an h2 tag and did not want it there anymore, you would need to pick None from the Format listing in the Properties panel or pick another option (like paragraph rather than h2). Or you might have to remove the tag itself by looking at the HTML coding.

You also have the option to delete a rule. Simply click on the rule in the Style listing, then right click with your mouse and pick from the options Delete.

This removes the EFFECT of the rule, not the coding for the rule. If you had used h1 tags in your document and created a rule making them green in color, deleting that rule removes the green color effect, but it does not remove the h1 coding itself. Similarly if you had applied a class selector to parts of your document and then you delete that selector in the list of rules, the EFFECT is deleted. The reference to the class name is still showing in the code itself. But since you don't have a rule telling browsers how to display that "class", that text will look like other text in your document.

Changing an internal style sheet to an external style sheet

You have seen already that anytime you use the Properties panel for text traits in the 2004 release, Dreamweaver creates an internal style sheet with that "coding". Plus when you first start to create style sheets, using internal sheets can be easier.

However, you want to use an external style sheet for formatting documents on your entire site, so all the formatting (or all the common formatting) is in one document. Editing that external style document changes all documents using that style sheet. If you rely on internal style sheets, then every document has to be opened and edited, defeating one of the reasons for using style sheets on a site.

Thus the videos Style Sheet Basics in Dreamweaver MX 2004 and Creating Styles through Dreamweaver both show how to take an internal style sheet and export the rules to an external style sheet.

Exporting is an option in the CSS Styles panel, as shown in the screen capture to the left.

When you export a list of rules, be sure to save it in your main folder area. (It actually does not matter where it is saved on your site, but it makes sense that it is in the main folder where your index.html document is located.) Style sheets have an extension of .css which Dreamweaver will assign as you export the style sheet.

Don't use another extension and don't use as an extension css for anything that is not a style sheet.

You don't want to leave the rules as an internal style sheet in your document after you have exported them. This will cause problems if you edit the external style sheet, because the internal style sheet will override the external style sheet references, in most cases. You are apt to edit the external style sheet and forget that the "coding" is still there as an internal style sheet and you will wonder why the revised rules are not being followed in your document.

Thus after exporting the rules, you need to open up the display of the HTML coding, and find the start of the internal style sheet (shown here in a red box) and start deleting that code.

You delete the code through the </style> code in the <head> area of the document. After deleting this internal style sheet, save your revised HTML document. Your formatting will be gone.

One of the icons in the bottom of the Style window is for Attaching a style sheet. Attaching a style sheet is shown in both of the videos. Clicking on that icon brings up this dialog box to the left. You should normally use the option for Link, and then you can browse and find the external style sheet.

You should see a reference to the style sheet in the CSS Styles panel, and you can also find a reference to it in the <head> area of your document, if you look at the coding.

This external style sheet needs to be uploaded to a server, for people viewing your pages to see the styles in effect.

What do style sheets let you do?

The purpose of the video Things You Might Have Wanted to Do -- Now You Can is to start showing you a few of the things you can do with style properties and values that you cannot do if you don't use styles. You will see other examples in the videos as the class progresses. Don't be afraid to experiment with the categories and options found in those categories.

What are things that styles let you do?

You can now define effects for various tags to make the tag appear as you wish. For example, you can make the h1 tag smaller in size and always centered. You can add spacing between items in bulleted lists and numbered lists, so you don't have to add those <br> codes to space down for extra spacing. You can add a particular color as well as a weight for text using either the <b> tag or the <strong> tag.
In beginning Dreamweaver classes, I stress there were just 7 font sizes. If you use only the list of fonts in the drop down listing in the Properties panel, this is true. However, through the Type category in the Style Definition dialog box, you can pick any pixel (or cm or in) size. You can also express various elements as a percentage of your base font, so that if the base font changes in size, the other text is adjusted as well. You can also use em to express relative sizing. If your base font were 12 pixels, using a size of 2 em for a header makes that header 2 times the base font, or 24 pixels.
Although I have never had a strong desire personally to indent paragraphs, styles lets you do this through a setting under the category of Block.
You can now control more the spacing between items on a page through the category of Box. The margins there lets you reduce the spacing between paragraphs and between headers and subsequent paragraphs, The same dialog box lets you increase spacing between items in bulleted and numbered lists.
By using settings under the categories of Background and Border and Box, you can create formatting that will let you set off paragraphs for extra emphasis, similar to using borders around text areas in your word processor.
If you like to use regular graphics (like a logo) in your background, you have seen that previously this logo will tile across and down a page when displayed through a browser. That is how browsers treat a smaller graphic on a larger page. Through a special setting of no-repeat under the category of Background, you can stop the tiling of a background graphic. The video gives an example of this.

A quick comment about browser limitations

Although the World Wide Web Consortium came up with the specifics of how properties and values can be used to create various effects, it is the browsers themselves that have to interpret the coding. The W3C comes up with the standards, but they don't create any browsers. I am using version 6.0 of Internet Explorer on a Windows machine as I recorded the videos, so as you create various effects with styles, if you have the same browser, then your screen displays should be similar to mine. However, keep in mind that browsers vary in how well they can interpret style sheets. We will talk about this more in Part 3, since this is a limitation of style sheets. Not everyone is using the same browser nor the same release of a browser. As you create effects in style sheets and you don't see an "effect" appearing, be sure to check to see how the document actually displays in your browser. The display mode of Dreamweaver does not always accurately reflect how the document will appear in a browser, as you will see in some of the videos in this class.

Comments for MX users

There are, I think, two main differences for using and creating styles for those who have the 2004 release and those who have the older MX release.

When you use the Properties panel to apply font traits, internal styles are not created for you. You can still, however, open up the display of the CSS Styles panel and create new styles through the icon in the CSS Styles panel, just as in the newer release.

The other difference is in how class selectors are applied. To apply a class selector (like one of the two shown to the left) to existing text, you cannot use the Properties panel, as is demonstrated in most of the videos. You have to highlight the text and then from the main menu pick Text, then CSS Styles, then select the class selector name from the listing. The screen capture to the left shows two class selectors in the document being worked with.

This material was used in a distance class on Templates and Style Sheets given by Linda Ffolliott, ECAT, College of Agriculture and Life Sciences, University of Arizona. To use this material, contact Linda Ffolliott at ffolinda@ag.arizona.edu