Introduction to CSS with Dreamweaver 8

What is CSS

CSS stands for Cascading Style Sheets which are definitions for a document such as an HTML page that define that page's style or presentation. By presentation we mean how content on a page is displayed. Is it displayed as simple black text on a white background? Or is it displayed in a more complex layout consisting of images and content divided into columns? Style sheets are capable of specifying that presentation without interfering with the content of the page. This means that the same content can be used with many styles without being modified - a separation of presentation and content.

Why are They Cascading?

The term cascading in CSS refers to how many style sheets can affect a single document in a cascading manner. This means that they all come together to create one single style that decides the overall presentation of the page. If styles between sources conflict, a weighting system is used to decide which style has precedence.

Dreamweaver and Style Sheets

As a WYSIWYG (What You See Is What You Get) editor, Dreamweaver makes creating and using style sheets a snap. Dreamweaver 8 introduces a unified CSS panel that keeps track of all styles used in a document giving you easy access to either use, edit, or create any style you need. The Property Inspector also continues to provide css-related options for the current selection.

• The following will work with styling text in Dreamweaver 8. Get the source files to follow along yourself.

This tutorial will show you how Dreamweaver can use styles applied with style sheets to turn text_document.html into text_document_styled.html. It will help better familiarize you with the CSS panel and how it and the Property Inspector can be used to manipulate styles within your HTML documents.

Getting Started

In text_document.html you have a simple text document with a few paragraphs and a few accompanying headings. There are no styles applied so what you see in the browser are the default for those element types.

To start styling the page, you can begin with the basic properties of the page, things like the page background and the default font for text within the page. This can be managed using the Page Properties dialog.

1. In Design view, open the Property Inspector (if not already open) and click on the Page Properties button to open the Page Properties dialog.
   
   The Page Properties dialog opens with options for changing the document's appearance. Each option relates to a CSS style that will be applied to the document.
   
2. Under Page font, select Arial, Helvetica, sans-serif
3. For Size (text size) select small. You could choose a numeric value which can be associated with a type of measurement such as pixels, ems or percent. The small option is simply small.
4. For Text color, pick #666666
5. For Background image, browse to find the gradient.png file in the examples download.This image is a tall thin image that is meant to only be repeated horizontally. By default all background images are tiled and repeated both horizontally and vertically. With CSS (and only with CSS), you have control over how background images repeat, if they repeat at all.
6. Under select repeat-x to only repeat the background image horizontally.This type of repeating, however, leaves the rest of the document's background revealed. That can be filled in with a default background color which will be seen where the background image is not.
7. For Background color, pick #CCCCCC - this matches the bottom color of the background image allowing for a seamless blend.
8. The margins for left and right can be set to 100px. Top and bottom can be left alone leaving them to the browser defaults.

With those settings, the page should look like the following:

Already there has been a dramatic change. To see the styles that are making this happen, switch over to Code view in Dreamweaver to see the source code. In the head element you should see a new style tag that was automatically added to the page with the definitions relating to the properties set in the Page Properties dialog.

<style type="text/css">
<!--
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 font-size: small;
 color: #666666;
}
body {
 background-color: #CCCCCC;
 background-image: url(images/gradient.png);
 background-repeat: repeat-x;
 margin-left: 100px;
 margin-right: 100px;
}
-->
</style>

You may notice that the properties listed are divided into two groups, one for body, td, th and one simply for body. The reason for this is that certain CSS properties like font properties are not inherited from the HTML body to table cells (td and th). For this reason, font properties have to be applied to each the body and elements used for table cells. To learn more about the format of this code, see Basic Style Sheet Format.

The CSS Styles Panel

Though you are free to edit styles using the source code, it is easier using the CSS Styles panel, especially if you are unfamiliar with the format. You can open this panel using Window > CSS Styles.

The CSS Styles panel shows all styles associated with the document (with the option to view only the styles associated with the current selection using its Current view). There you can see the styles or rules (body, td, th; and body) which were applied using the Page Properties dialog. You can edit properties within those rules when selected in the CSS Styles panel or, add new ones using the Add Property option in the Properties pane.

1. In the CSS Styles panel, single click the body rule to see the properties associated with it
2. Select the left column for font-family where it should say Arial, Helvetica, sans-serif and change it to "Courier New", Courier, monospace. The changes should take effect immediately.
3. Now double-click the body rule or click on the Edit Style... icon  to open up the CSS rule definition dialog.
   This dialog is similar to the Page Properties dialog but it allows you to change virtually any property for the current style. Properties are grouped by categories listed on the left. They range anywhere from the appearance of text to the appearance of the "box" or element boundaries in which they are contained - all managed through CSS.
4. Change the Courier font back to Arial and hit OK.
5. Back in the CSS Styles panel, with body, td, th selected, click on Add Property in the Properties pane.
6. In the drop-down list, select font-weight and give it a value of bold.
   All of the text in the document will go bold
7. With the font-weight property selected, click on the Delete CSS Property icon  to remove it.

The CSS rule definition dialog will be a commonly used tool for creating and edit style definitions. It would be a good idea to become familiar with where things are and what you can change using it. Though not as accessible as the CSS Styles panel, it is a little more organized making style definitions, especially new ones, a little easier to manage.

External Styles

The styles created so far have been specific to the document, i.e. they have been defined inside the document in the head tag. This is fine, but there are other ways of applying styles to pages. The most versatile means is through an external style sheet. For more on the different ways styles can be applied, see Associating Style Sheets with Documents.

Note: Using the Page Properties dialog will always produce styles that are embedded within the current document.

So far the page properties have been set, but no properties specific to any of the text within the page; global properties, yes, but not specific properties. We can start with the main header.

1. Select the main page header that reads "Lipsum Ipsum Dolor". You'll want to make sure the h1 tag that contains this text is fully selected. You can check this using the Tag Selector in the status bar area of the document window.
   If the h1 tag isn't highlighted there, click on the tag in the Tag Selector to select it completely.
2. In the CSS Styles panel, click on the New CSS Rule... icon  to open the New CSS Rule dialog.
   This dialog provides options for a new CSS Rule. The first set of radio buttons allows you to choose whether you want to define a style for a class, an HTML tag, or a more advanced rule such as those used with id attributes.
   Following that you have the name of your class or HTML tag or selector definition if advanced was selected within the radio buttons before it.
   Finally there is the option letting you specify where you want this style to be defined, whether it be in an external style sheet or in the current document (which should currently be selected). The default is for a new style sheet file. However, this option will automatically select the setting which reflects the selection in the CSS Styles panel. Since the text_document.html already has styles embedded in the HTML in a style tag, the This document only option is automatically selected for you.
   The second option for the class/tag/selector will also do this, especially when dealing with selections have have class or id attributes defined for them. For those tags without those attributes, recognition of the selection will only occur if the Tag selector type radio is already selected.
3. Select the second radio, Tag, for the Selector Type.
4. Click Cancel.
5. In the CSS Styles panel, click on the New CSS Rule... icon  to reopen the New CSS Rule dialog. The Tag radio should still be selected and the h1tag should automatically be filled within the second option, Tag.
6. For Define in: select the New Style Sheet File radio button and click OK. The Save Style Sheet File As dialog should open.
7. Name the new style sheet new_style and click Save. The familiar CSS Rule definition dialog should open allowing you to specify a style for h1 tags.
8. In the Type category, set color to #FFFFFF.
9. In the Background category, set Background color to #0066CC.
10. In the Block category, set Text align to center.
11. In the Box category, for padding, with Same for all checked, use 10 pixels.
12. Click OK.

You will notice the Lipsum Ipsum Dolor title has changed in style. Also the new_style CSS file has been opened in Dreamweaver and is listed in the CSS Styles panel along with the embedded styles.

If you look at the new_style.css file, you can see the CSS that's affecting the tag.

h1 {
 font-style: normal;
 color: #FFFFFF;
 background-color: #0066CC;
 text-align: center;
 padding: 10px;
}

Notice that the text-align property was used to center the heading, not the align attribute. Since HTML 4, the align attribute has been deprecated in favor of the text-align CSS property. Dreamweaver, however, will still use the align attribute to center if not managed through CSS - something you might want to be wary of.

If you look back at the source of text_document.html, in the head you will see a new link tag linking to the style sheet.

<link href="new_style.css" rel="stylesheet" type="text/css" />

This tag allows styles defined in new_style.css to be seen in this document.

If you have a pre-existing style sheet you want to use, you can link that to your document using the CSS Styles panel as well.

1. Click on the Attach Style Sheet icon  in the CSS Styles panel. The Attach External Style Sheet dialog appears.
2. Browse to find the style sheet you want to link
3. Select how you want the style sheet added, as a link or imported (see Associating Style Sheets with Documents).
4. Select the media. Depending on the device or browser viewing the page, the media can determine whether or not the style sheet is to be used.
5. Click OK to add the style sheet or Cancel to cancel. (No other style sheets are being used for text_document.html so you can cancel if you opened this dialog in that document.)

Within the Attach External Style Sheet dialog, you may have noticed the sample style sheets link at the bottom of the window. This may be helpful to explore if you want to try using some pre-built styles or just see some examples of completed style sheets.

Adding Additional CSS Rules

Now that a new CSS file has been created for the text_document.html page, additional rules can easily be added to it through the CSS Styles Panel. Other than the h1 tag, other tags which are to have styles associated with them for this document include h2, h3, and p.

1. Place your cursor in the heading 2 title labeled "Cras Justo Lacus".
2. Click on the h2 tag in the Tag Selector area to select the tag completely.
   Note: It is not actually necessary to select the entire tag when adding rules in this manner. However, it is a good habit to get into when you want to affect entire tags and not just specific text within those tags which other operations can affect.
3. In the CSS Styles panel select new_style.css in the All Rules pane.
4. Click on the New CSS Rule... icon  to create a new style for the h2 tag.
5. Make sure the new rule is being defined in new_style.css and click OK. The Define Rule Definition dialog will appear for the tag.
6. Repeat this for each of the h2, h3 and p tags using the following settings:

• h2 tag:
  • Type color: #FFFFFF
  • Border bottom width: 1 pixels
  • Border bottom style: solid
  • Border bottom color: #0066CC
• h3 tag:
  • Type color: #666666
  • Type style: italic
• p tag:
  • Type line height: 2 ems
  • Block text indent: 2 ems

The style of the page will change to show the new properties now listed in the CSS Style panel.

If you open new_style.css, you can see the new CSS that was added for each tag.

h2 {
 color: #FFFFFF;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #0066CC;
}
h3 {
 font-style: italic;
 color: #666666;
}
p {
 line-height: 2em;
 text-indent: 2em;
}

Classes

So far, the styles created have been redefining HTML tags. In doing this, any and all tags that have a style associated with them will use that style. This method offers no specificity over which tags in particular are given certain styles and which are not. Setting a style for the h1 tag affects all uses of that tag. Classes, on the other hand, allow you to assign styles to specific tags within your document.

Dreamweaver uses classes for non tag-specific styles applied through the Property Inspector (by non tag-specific I mean things other than bold or italic which are applied through specific tags such as b or strong and em or i).

1. Use your mouse to drag and select the first sentence in the first paragraph. It contains the text "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
2. In the Property Inspector, select a size of large.
3. Next, still within the Property Inspector, select a color of #000000.

The size of the selected sentence increased and its color has changed from gray to black. The Property Inspector also now shows a new selection in the Style drop-down marked style1. If you look at the source code for the selection, you'll see a new span was added and given the new style in the form of a class.

Checking the source of the embedded style in the document head will reveal the new class definition.

.style1 {
 font-size: large;
 color: #000000;
}

Note: The new style may be defined in a new style tag in the source code. This will occur if your current style tag is not the last tag within the headtag of the document which is may not be if a link tag was placed after it when creating new_style.css. If you want to have this style and others you create like it to be added to the same s tag, move the s and any other tags within head to be above your style tag if not already.

As a class, you can now select any other text within the document and easily apply the same style using the Style drop-down in the Property Inspector.

If you want to rename the style, you can also do this easily from the Style drop-down (as style1 is not a very informative style name).

1. Place your cursor in or select the text defined as style1. The style1 selection should be visible Style option in the Property Inspector.
2. In the Property Inspector, select Rename... in the Style drop-down. The Rename Style dialog will appear.
3. If not already selected, select style1 in the Rename style drop-down.
4. For the new name, type first-sentence.
5. Click OK.

The Results panel will appear showing that all instances of the style have been renamed from style1 to first-sentence.

Classes can also be defined within the CSS Styles panel. There are two approaches to take when doing this. You can work with the tags and classes (attributes) first, or define style first.

If you know the classes you want to associate with your content prior to any styling or presentation being applied, then you would want to include class attributes with the HTML created with your content. This way, styles can be created to cater to the content as it is defined by those styles, much in the same way styles were created for specific tags before.

The text_document.html page didn't have any classes assigned to it to begin with. We will want to use a class to specify the last two paragraphs in the page as being notices. To assign a class to a tag you can use the Tag Inspector panel.

1. Select the second to last p tag in text_document.html. It should begin with the text "Cras aliquet egestas libero".
2. Open the Tag Inspector panel (Window Tag > Inspector).
3. Select the Attributes tab if not already selected.
4. In the Tag Inspector panel, expand the CSS/Accessibility pane if not expanded already. There you should see options for defining class, id, style, and title.Though we are dealing with styles, we are adding them through classes meaning the class attribute here will be used. The style attribute is for inline styles.
5. In the class field, type notice to give the p tag a class called notice.
6. Repeat for the last paragraph in the document.

Note: The Tag Inspector Panel can also be used to add multiple classes to one element, something not possible using the Style option in the Property Inspector.

Now, the HTML specifies these paragraphs as representing notices. As the designer, its your job to determine what notices look like using styles.

1. Select one of the p tags that has a class of notice.
2. In the CSS Styles panel select new_style.css in the All Rules pane.
3. Click on the new CSS Rule icon . The New CSS Rule dialog will open with all the necessary selections already made.
4. Click OK.
5. In the CSS Rule Definition dialog define a style for the notice class giving it a Type style of italic.

Both the second to last and last paragraphs in text_document.html are now displayed as italic.

You may also decide to create a style before deciding where to add it. For this, you can create a new style using the CSS Styles panel just as was done with the notice class only prior to having assigned the notice class to any HTML tags. Then, when completed, use the Style drop-down in the Property Inspector to assign the class to your selection.

Classes tend to be the primary means of applying styles because of their versatility. They don't affect all tags like tag styles do and you can be selective of which selections receive which styles. You may find that as much as 90% or so of the styles you create are based in classes.

Pseudo-classes

Pseudo-classes represent styles for definitions that exist outside those specified in code through HTML. The most common of these are associated with the different states of an anchor (a) tag.

Anchor tags in the text_document.html page will have different styles when rolled over. This is possible through the use of pseudo-classes.

1. In the CSS Styles panel, for new_style.css, add a new rule using the New CSS Rule icon .
2. In the New CSS Rule dialog, select the Advanced selector type radio button.
3. Open the Selector drop-down to reveal the available pseudo-class selections for the anchor tag.
4. Select a:link and click OK. The CSS Rule Definition dialog will appear for the a:link pseudo-class definition.
5. Select a Type color of #0066CC and none for decoration
6. Click OK.
7. Repeat the steps for the a:hover pseudo-class applying the following properties:

• a:hover:
  • Type color: #FFFFFF
  • Type decoration: none
  • Border bottom width: 1 pixels
  • Border bottom style: solid
  • Border bottom color: #0066CC

Now all links in text_document.html have different styles when they are rolled over. If desired, you may also want to set styles for a:visited and a:active to ensure proper styling for each state.

Other pseudo-classes can be specified manually in the Selector option of the New CSS Rule dialog as needed.

ID Attributes and ID Selectors

The other common association of styles to HTML tags is through id attributes and id selectors. Id attributes in HTML tags uniquely identify that tag with a name. Styles can be linked to that id just like they can with classes. The big difference is that ids cannot be used on more than one tag. This also means that style definitions for ids only relate to one tag per page.

In text_document.html, an id can be applied to the h1 tag containing the "Lipsum Ipsum Dolor" text. The tag will be given the id "master-heading" indicating that it is the sole and primary heading of the page. As such it will also receive a unique style.

1. Select the heading 1 tag at the top of text_document.html.
2. In the Tag Inspector panel, give it an id of "master-heading".
3. Using the CSS Styles Dialog, create a new rule in new_style.css by clicking the New CSS Rule icon . The appropriate settings should already be selected.
   
   Note: With advanced selectors like id selectors, you would need to specify a preceding number sign (#) before the selector name. With classes, assuming the class type is selected, no preceding period (.) is necessary, only the class name.
4. Set a border style for all sides to be outset, thick and #666666 in color.

Now any tag with an id of master-heading in any HTML page that uses new_style.css will have a thick, outset, gray border around it.

Conclusion

With that, you have completely converted the original text_document.html from a basic page into a page with a little more style, literally.

One thing to keep in mind is that styles created with the Page Properties dialog and the other options available in the Properties Inspector are embedded in the current document as embedded header styles. You may find it advantageous to define these styles using the CSS Styles panel instead. This will let you define them in external style sheets which can be shared among many pages.

The CSS Styles panel is an essential tool for styling pages in Dreamweaver. Do your best to make the most of it. It will undoubtedly help improve workflow.