Contact: Alx Sanchez

The Student Support Center University of California

Phone: (805) 893-5252 or 893-2208 Santa Barbara, CA 93106 UCSBCOLLABORATE
Email: help@collaborate.ucsb.edu. http://www.collaborate.ucsb.edu/

Understanding CSS and

Dreamweaver
In this article Mark will discuss the basic use of CSS and its application in Adobe CS5 Dreamweaver. This is a rudimentary
introduction to the program and CSS in general.
*Please note that some knowledge of HTML may be helpful for a more comprehensive experience.

What is CSS? Cascading Style Sheets (CSS) is a common computer language used to control the formatting of
Web documents through a set of stylistic rules.

CSS Syntax
Similar to any other language, understanding the structural syntax of CSS is crucial. Essentially, a CSS rule may be
broken down to two main components: a selector and declaration(s). The selector indicates which HTML element
you wish to format, while a declaration consists of a property and a value. A property signifies which style attribute
you wish to change, and is assigned a respective value.

Figure 1 graphically illustrates the form of CSS syntax.

NOTE: Declarations always end in a semicolon. A group of declarations are enclosed by brackets.

Why CSS?
CSS will allow us to reduce the number of HTML tags used in a page design, while simultaneously leaving the
layout aesthetic uncompromised. CSS separates style from content. Also, using an external style sheet allows you
to alter the format style of an entire site by only editing a single file! Here is a quick re-cap of HTML tags commonly
used with CSS:

• <h>  heading tags ranging from <h1> to <h6> used to mark headings in your page

• <p>  paragraph tag used to mark block elements

• <ul> & <ol>  un-ordered/ordered list tags used to create menus or bulleted lists

• <div>  tag used to define sections of an HTML page and group block elements for styling

• <a href>  anchor tag used to link to another HTML document

• <img>  image tag used to link to images so that they appear on a HTML page
ID Selector

The ID selector is used to specify a style for an individual HTML element and is defined with ‘#’. For example, the
style rule below will be applied with the ID selector “para1”.

#para1
{
text-align:center;
color:red;
}

Class Selector

The Class selector is used to specify a style for a group of HTML elements and is defined with ‘.’ For example, the
style rule below will be applied with the Class selector “center”.

.center {text-align:center;}

You can also specify that only specific HTML attributes should be changed by a Class selector. For example, all p
elements with Class selector “center” will be centrally-aligned.

p.center {text-align:center;}

DISCLAIMER! We have thus far begun to understand the structural nature of CSS. However,
the Dreamweaver program does not require much knowledge of CSS code editing. In any case, CSS is still a
practical language to know especially given its use at more advanced levels.

What is Dreamweaver? Adobe Dreamweaver CS5 is a web-editor that allows you to create, build, and manage
websites. As a “What-You-See-Is-What-You-Get” editing program, whatever you design and visually experience is
what visitors will see on your site. The power of Dreamweaver lies in its superior ability for file management.

A brief overview to Dreamweaver elements:

• Site Management- Integrated file transfer and visual site maps allows you to have easier site
navigation, file linking, and uploading to your site.
• Templates- Allow you to quickly edit all common elements throughout your site.
• CSS - Allow you to change the appearance of text elements throughout the site.

This article will focus on the application of CSS to Dreamweaver.

How to Create an External Style Sheet

1. Select File>New.
2. Under the Page Type column, select CSS.
3. Save as a local website folder as a .css file.

Note: Selecting a new file with a CSS Page Type disallows use of the Properties panel. By
selecting a HTML Page Type, you may still work with CSS within the Properties panel.

How to Define a New Site

Organize the files used on your site by following these general steps:
1. Create a hard disk folder for your files.
2. Click on Site>Manage Sites>New.
3. Enter site details for local folder and click Save.

This is the root folder in which templates will be saved. Moreover, you will later return to the ‘Manage Sites’ tab to
upload your document.

Figure 2 illustrates rule definition for a style sheet.

How to Create a New Style Sheet in a CSS Page Type

1. Open the CSS Styles tab by selecting Window>CSS Styles.
2. Click the '+' icon to create a new style.
3. Choose your selector type and designate a selector name.
4. Create your own custom style giving by choosing the font type, size, color etc.
5. Click Ok and the style sheet will be generated.

Figure 3 demonstrates how to create a new CSS rule.

Note: Styles can also be edited, organized, and removed from this panel.

Figure 3 illustrates rule definition for a style sheet.

Dreamweaver Templates
A template is the common structure of a website which follows a specified form (e.g. header, footer, and
navigation bar common to all pages). Changes made to the template will automatically update all other
pages. When structuring your template it is important to leave an editable region on the template for
unique content to be added.

If using the HTML Page Type, or a CSS Page Type, use your newly updated CSS knowledge to construct the
template format of your Web document. To attach created style sheets to your template, simply click the
icon on the CSS styles panel.

Figure 4.0 demonstrates how to attach a style sheet to a template.

Dreamweaver & CSS

Dreamweaver does not require too much coding knowledge due to its extensive ‘Insert’ panel (as an HTML Page
Type located at the top-right of the program interface), which makes things a lot easier for beginning Web
development. Here you get a visual of the code output as enabled by the ‘Split’ option located at the top-left of
the program interface. Overall, this article is a surface-level introduction to CSS and Dreamweaver, and should be
used as a stepping-stone to gaining a better understanding of code editing and Web design.

For more quick reference sheets or to see this one on action visit us at: www.collaborate.ucsb.edu

Follow us on twitter and friend us on facebook for updates.