Dreamweaver Advanced: CSS in Dreamweaver CS4

This documentation covers how to add formatting to HTML tags using CSS in Adobe Dreamweaver.

Objectives

o Create a Site Definition

o Add Basic CSS Styles
o Format Text with CSS Styles
o Format Links with CSS Styles
o Learn the Dreamweaver CSS Interface
o Learn Basic CSS Definitions
o Validate the HTML pages and CSS styles

Downloading Tutorial Files

In this lesson we will be modifying our berlin_wall.htm file and our original index page. You can
download the
finished index.htm and berlin_wall.htm pages at http://myweb.stedwards.edu/s_classfiles/.
There are four files needed:
1. index.htm
2. holocaustMemorial.jpg
3. berlin_wall.htm
4. berlin_wall.jpg

About Cascading Style Sheets

Cascading Style Sheets (or CSS) provide a method of controlling how HTML documents appear.
Replacing a web site's style sheet can radically alter the way the site looks. This can make it easier to
rebrand a website or target different display types, such as print, mobile phones and projectors. By
separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web
page, CSS give Web designers the control they crave without sacrificing the integrity of the datathus
maintaining its usability in multiple environments. In addition, defining typographic design and page
layout from within a single, distinct block of code - without having to resort to image maps, tags, tables,
and spacer GIFs - allows for faster downloads, streamlined site maintenance, and instantaneous global
control of design attributes across multiple pages.

Why did CSS come about?

According to the W3C, "The original HTML was never intended to contain tags for formatting a
document. HTML tags were intended to define the content of the document like:
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 1

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large web sites where fonts and color information had to
be added to every single Web page, became a long, expensive and unduly painful process.
In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style
sheet.
Because HTML 4.0 separates the presentation from the document structure, we have what we always
needed: Total control of presentation layout without messing up the document content."

Using Dreamweaver to create Cascading Style Sheets

Adobe Dreamweaver makes adjusting to cascading style sheets quick and simple. Dreamweaver's user
interface allows you to edit CSS styles easily. In fact, using and creating CSS styles is an inherent part
of the development workflow. As a developer you must be familiar with Dreamweaver's CSS Panel
section - this is where you will be working primarily.

Designing with Cascading Style Sheets

You can use Cascading Style Sheets (CSS) in Dreamweaver to apply style elements consistently
across multiple pages of a site. CSS styles offer great flexibility in that style is not confined to text
objects. You can define positioning and formatting styles to text, images, tables, layers, etc.

Advantages of CSS
Easier to update pages. Instead of having to change the color for say a heading on page after page
of your website to keep a style going, you can change in one line of code and it will change
everywhere.
Your pages become lighter. Without all the markup for tables (<table> <td> and <tr> tags) pages
become a lot cleaner and nicer to read. Less content means they are smaller files which take up less
bandwidth and will download faster.
Your pages become more accessible. By separating the presentation (CSS) from the content and
structure (HTML), your pages are on its way to satisfying accessibility requirements. This is an
important thing to consider, if you are creating sites that might be used by the visually impaired or you
work on government sites/contracts.

Why is it called "Cascading?"

"The term "Cascading" Style Sheets is used because more than one Style Sheet can affect the same
page. For instance, if you are using a Style Sheet on the actual document, called an "in-line" or "
internal" style sheet, and a style sheet that is being referenced by multiple pages, called an "external"
style sheet; both can have an effect on the items in the page.

If both the internal and the external style sheets are attempting to affect the same item, like an <H1>
command, the closest to the <H1>command wins. That would be the in-line in this case. If two external
style sheets are attempting to affect the same <H1> command, the one listed second in the actual

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 2

HTML document wins. It's closest to the command going from the top of the document. " -
http://www.htmlgoodies.com/tutorials/browser_specific/article.php/3478711

Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Remember, the rule is: whichever CSS style is closest to the actual HTML element wins. Another
way to think about it is the most specific stylesheet will take precedence.
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a
style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
-w3schools.com/css/css_intro.asp

How to Use Styles

From w3schools.com: When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:

Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: red; margin-left: 20px">

This is a paragraph
</p>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section with the <style> tag.

<head>
<style type="text/css">
body {background-color: red}

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 3

p {margin-left: 20px}
</style>
</head>

External Style Sheet (recommended!)

An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section.

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

CSS Syntax

The CSS rule is made up of three parts: a selector, a property and a value:

selector {property: value;}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish
to change, and each property can take a value. The property and value are separated by a colon, and
surrounded by curly braces:

body {color: black;}

Note: If the value is multiple words, put quotes around the value:

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 4

p {font-family: "sans serif";}

Grouping Declarations:: If you wish to specify more than one property, you must separate each
property with a semicolon. The example below shows how to define a center aligned paragraph, with a
red text color:

p {text-align:center;color:red;}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Redefine an HTML Tag

You can apply CSS styles to any tag in a document. The first style youll create will redefine the style
attributes of the <body> tag.

1. Open an HTML document.

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 5

2. In the CSS panel, click the New CSS rule button (circled above).

1.New CSS Style dialog box, for Type, select Tag.

2. In the Tag pop-up menu, select body.
3. In Define In, select This Document Only.
4. Click OK.

For now well apply the style to this document, later youll see how to export the style so you can use it
in other pages in the site. Your dialog box should look similar to this:

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 6

Set the following Type settings:
In the Font pop-up menu, select Arial, Helvetica, sans serif.
6. In the Size pop-up menu, select 12 and pixels.
7. In Color, click the color picker, then use the eyedropper to select white.

Set a Page's Background Color

Next, youll use the Background category in the CSS Styles panel to set background options.

1. Under Category, select Background.

2. In Background Color, do one of the following to set a background color:
* Click the color picker then use the eyedropper to select a color
* In the Background Color text box, enter #300, or the number for another dark color.
3. Click OK.

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 7

Set a Style for Hyperlinks

With the new style applied you can barely distinguish the hypertext links in the document. Lets create a
style for the links.

1. In the CSS Styles panel, click the New CSS Style button (+) located at the bottom of the panel.
2. In the Name field, type the letter "a".
4. In Define In, select This Document Only.
5. Click OK.

Set the following Type attributes for the link:

In Decoration, check the box for Underline.
In Color, choose a color that contrasts well with the text and background.

7. Click OK.
8. To see the style you applied to the links you must view the page in a browser, press F12 to preview
your page.

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 8

Styling an Unordered List

With CSS we can also change the look of the list items in our document. To change these properties
create a new CSS rule for the list item tag or li tag and go to the List Category.

1. Click on the New CSS Rule icon and type or select li from the drop down list.
2. Select the List Category on the right.
3. Select from the Type drop down menu one of the various options, including: square, disc, circle, etc.

Applying a custom (class) CSS style

Class CSS styles are the only type of CSS style that can be applied to any text in a document,
regardless of which tags control the text. All class styles associated with the current document are
displayed in the Apply Style view of the CSS Styles panel.
Youll see most styles updated immediately; however, you should preview your page in a browser to
verify a style was applied as expected. When you apply two or more CSS styles to the same text, the
styles may conflict and produce unexpected results.

To apply a class style, do one of the following:

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 9

 In the CSS Styles panel (Window > CSS Styles), right-click the name of the style you want to apply
and click Apply (or click New to create a new style).
In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in
the context menu choose CSS Styles and then select the style you want to apply (or click New to
create a new style).
Select Text > CSS Styles, and in the submenu select the style you want to apply (or click New to
create a new style).

Add formatting as desired. In the document, select the text to which you want to apply a CSS style:
Place the insertion point in a paragraph to apply the style to the entire paragraph.
If you select a range of text within a single paragraph, the CSS style affects only the selected range.
To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector
located at the bottom left of the Document window.

To remove a custom style from a selection: In the CSS Styles panel, right click on the style then press
the Delete button or click the Delete CSS Rule button (the trash can icon).

NOTE: Do NOT start a class name with a number! It will not work in Mozilla's Firefox web
browser.

Using Classes for the same HTML Element

With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph,
and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}

p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">This paragraph will be right-aligned.</p>

<p class="center">This paragraph will be center-aligned.</p>

CSS Grouping

If you'd like to have different HTML elements have the same formatting, you can group these elements
together into one CSS rule.

Example: If you wanted every heading to be green, your CSS rule would look like:

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 10

h1,h2,h3,h4,h5,h6
{
color: green
}

Export styles to create an External Style Sheet

The CSS styles youve created so far have only applied to this document. Internal style sheets apply
only to the document in which they were created. Now, youll learn how to create an external style
sheet which contains the styles you defined in this document.

1. Click and highlight of the style rules created that will be moved onto a new separate style sheet.
(To select more than one thing on a Mac, hold the Command button while clicking your choices.)
2. Right-click and select "Move CSS Rules".
3. In the pop-up dialog box select "a new style sheet".

In the URL field, type "style," which will be the name of the CSS document. As you type, the Save As
field will populate with the same title.
When you click Save, the CSS document will open with all of your rules taken from your original HTML

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 11

document.

NOTE: The stylesheet just created will also automatically attach itself to the HTML document you
exported the styles from.

Referencing a style sheet in an HTML document

Since we just exported all of our CSS rules to an external style sheet, the style tags in our HTML
document are now empty (see the portion highlighted above). If you would like to add more CSS rules
that will pertain to just this page, you can continue to add CSS Rules "in-line" here as we've done.

Notice the code below the highlighted <style> tags: <link href="style.css" rel="stylesheet"
type="text/css" />
This is the code that tells web browsers what style sheet is attached to this specific HTML page. When
we exported our rules to a new style sheet, Dreamweaver automatically attached the exteral sheet to
our document. Directions for attaching an external style sheet manually follow.

Attach an external style sheet

Let's attach the CSS style sheet you just created to another document in your site.

1. In Dreamweaver, open the Site panel (Window > Site), if it isnt already open.
2. In the Site panel, locate the file you'd like to add the style sheet to, and then double-click it to open
it in the Document window.
3. In the CSS Styles panel, click the Attach Style Sheet button (circled above) located at the bottom
of the panel.
4. In the File/URL text box, enter the path to the style sheet you created (ex: mystyle.css) or click
Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
5. In the Link External Style Sheet dialog box, for Add As, select Link.
6. Click OK. The selected style sheet links to the current document, and the style attributes are
immediately applied.

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 12

CSS Resources & Advanced Techniques

To learn more about CSS, visit these helpful websites:

A popular CSS cheatsheet for common styles with explanations and examples:
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

The W3C's CSS Tutorials use try-it-yourself examples and quizzes to help you learn:
http://www.w3schools.com/Css/default.asp

UT's Web Publishing Guidelines and Tutorials are online at:

http://www.utexas.edu/learn/

CSS tips that every developer should know about (this is advanced but a great article!):
http://arbent.net/blog/css-tips-that-every-beginning-developer-should-know-about

How to change the opacity of an element & put text over an image (a popular trend):
http://webdesign.about.com/od/css3/a/aa121306.htm?nl=1

Need CSS Troubleshooting Help? Try these resources:

http://vandelaydesign.com/blog/css/resources-for-help/

Exploring Headings in CSS:

http://webdesign.about.com/od/examples/l/bl_styles_fancy_headline_examples.htm

Dreamweaver Advanced: CSS in Dreamweaver CS4 - 13