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 h1 tag 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:
o Type color: #FFFFFF
o Border bottom width: 1 pixels
o Border bottom style: solid
o Border bottom color: #0066CC
 h3 tag:
o Type color: #666666
o Type style: italic
 p tag:
o Type line height: 2 ems
o 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 head tag 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:
o Type color: #FFFFFF
o Type decoration: none
o Border bottom width: 1 pixels
o Border bottom style: solid
o 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.