Make Money Online!

Hi, I'm Ben and I own Create a Great Website! I'm currently earning well over $1,500 plus per month online in my spare time, and I want to show you how you can do the same.

Fill out the form below and I'll send you my free guide to create a great website and how you can earn money online just like I do! You won't be disappointed.

Make Money Online!

Subscribe To This Site

Dreamweaver CS5

Dreamweaver Tutorials
All Dreamweaver CS5 Tutorials
Buy Dreamweaver CS5

Getting Started
Create a Web Site
Create a Web Page
Create a Web Page from a Template
Open & Save a Web Page
Closing a Web Page File

Previewing Pages in a Browser

The Dreamweaver Environment
Working with Toolbars
Working with Panels
Creating a Workspace
The Status Bar
Working with Views
Changing the View / Zoom Tool
Working with Rulers
Grids & Guides
Keyboard Shortcuts
Setting Preferences
Using the Results Panel

Managing Website Files
Setting Up Site Folders
Using the Files Panel
Creating Files
Managing Files & Folders
Finding Files in the Files Panel
Setting the Home Page
Setting Link Page Properties
Setting Page Properties
Working with Invisible Elements
Understanding File Paths

Working with Text
Adding Text to Pages
Importing Content
Selecting, Copy & Paste Text
Modify Font Families
Formatting Characters
Formatting Paragraph Text
Controlling Line Spacing
Horiztontal Rules
Ordered & Unordered Lists
Create & Apply Text Styles
Finding and Replacing
Checking Spelling
Setting Font Preferences
Using Undo and Redo
Working with Colors

Working with Images
Using Web Friendly Graphics
Defining an Image Folder
Inserting Images
Inserting Images form Photoshop
Editing Images in Photoshop
Inserting Images from Fireworks
Optimizing Images for the Web
Modifying Images
Aligning Images
Margins around Images
Changing Brightness & Contrast
Creating Rollover Images
Inserting an Image Placeholder

Linking Web Pages
Understanding Link Types
Understanding File Paths
Adding a Link
Adding an Email Link
Using Named Anchors and Linking within a Web Page
Create and Image Map
Modifying a Link
Removing a Link
Changing Links Sitewide

Web Page Tables
Working with Tables
Switching Between Table Modes
Inserting a Table
Modifying a Table
Adding Content to a Table
Import/Export Table Data
Adding Columns and Rows
Resizing Columns and Rows
Spliting and Merging Cells
Sorting Table Data
Changing Table Properties
Changing Cell, Row, or Column Properties
Using a Tracing Image

Cascading Style Sheets
Introducing Cascading Style Sheets
Creating a Web Page with a CSS Layout
Creating a CSS Style
Applying Internal Styles
Attaching an External Style Sheet to a Page
Removing Internal Styles
Using the CSS Styles Panel
Setting CSS Properties
Working with CSS Rules
Working with ID Selectors
Create and Apply an ID Selector
Formatting CSS Code

Flash & Multimedia
Inserting a Flash or Shockwave Movie
Changing Movie Properties
Inserting a Flash Movie
Linking or Embedding a Sound

Creating Web Forms
Creating a Form
Inserting Form Objects
Modifying Text Fields and Text Areas
Modifying Radio Buttons and Check Boxes
Modifying Lists and Menus
Inserting an Image Button
Making Form Objects Dynamic
Validating Forms

Creating Templates
Creating a Web Page from a Template
Creating a Template
Opening a Template
Defining Editable Regions
Creating Repeating Regions
Creating Optional Regions
Creating Nested Templates
Updating a Template
Attaching and Detaching a Template

Managing A Web Site
Defining Local Info for a Site
Defining Remote Info for a Site
Transferring Files
Comparing Local and Remote Files
Checking Site Files in and Out
Synchronizing Site Files
Previewing Pages in a Browser

Attaching an External Style Sheet to a Page

This tutorial illustrates attaching an external style sheet Dreamweaver CS5.

One of the advantages of using external style sheets is that we can apply them to any of our web pages. This can help not only in consistency, but in saving time in copying design elements between sites and pages.

We already have one external style sheet, so let's now apply it to a different page.

Start with this page.

Starting page

To attach the existing style sheet, select CSS Styles from the Format menu.

Format CSS Styles fly-out

Select Attach Style Sheet... from the fly-out menu and you see the Attach External Style Sheet dialog.

Attach External Style Sheet dialog

Browse to the style sheet we created earlier.

Browse to style sheet

Press OK, and the external style sheet is attached to the page.

Now we can use the rules in the sheet. For example, here I've selected the first line on the page and clicked the dropdown on Targeted Rule in the Properties Panel.

Targeted Rule dropdown

All of the rules in the style sheet are available to me. I choose .header and note the effect.

Select .header rule

The CSS rule .header is applied to the first line.

It's important to understand what happens when we apply a style sheet. For the sheet we've just attached, here is the section of the style sheet relating to the page body.

body rule

The <body> tag is modified so that the background color is set, the font and size are set and the font color is set. All of the body text in the page we attach the style sheet to changes accordingly by default. For any specific styles or body elements there may be additional changes that override this.

In the case of the rule .header the definition in the style sheet is.

.header rule

This only change due to .header is the background color, and the green background color is the only noticeable difference.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Getting Started
Create a Web Site
Create a Web Page
Create a Web Page from a Template
Open & Save a Web Page
Closing a Web Page File

The Dreamweaver Environment
Working with Toolbars
Working with Panels
Creating a Workspace
The Status Bar
Working with Views
Changing the View / Zoom Tool
Working with Rulers
Grids & Guides
Keyboard Shortcuts
Setting Preferences
Using the Results Panel

Managing Website Files
Setting Up Site Folders
Using the Files Panel
Creating Files
Managing Files & Folders
Finding Files in the Files Panel
Setting the Home Page
Setting Link Page Properties
Setting Page Properties
Working with Invisible Elements
Working with Colors
Understanding File Paths

Working with Text
Adding Text to Pages
Importing Content
Selecting, Copy & Paste Text
Modify Font Families
Formatting Characters
Formatting Paragraph Text
Controlling Line Spacing
Horiztontal Rules
Ordered & Unordered Lists
Create & Apply Text Styles
Finding & Replacing
Checking Spelling
Setting Font Preferences
Using Undo and Redo

Working with Images
Using Web Friendly Graphics
Defining an Image Folder
Inserting Images
Inserting Images form Photoshop
Editing Images in Photoshop
Inserting Images from Fireworks
Optimizing Images for the Web
Modifying Images
Aligning Images
Margins around Images
Changing Brightness & Contrast
Creating Rollover Images
Inserting an Image Placeholder

Linking Web Pages
Understanding Link Types
Understanding File Paths
Adding a Link
Adding an Email Link
Using Named Anchors to Link within a Web Page
Create an Image Map
Modifying a Link
Removing a Link
Changing Links Sitewide

Web Page Tables
Working with Tables
Switching Between Table Modes
Inserting a Table
Modifying a Table
Adding Content to a Table
Import/Export Table Data
Adding Columns and Rows
Resizing Columns and Rows
Spliting and Merging Cells
Sorting Table Data
Changing Table Properties
Changing Cell, Row, or Column Properties
Using a Tracing Image

Cascading Style Sheets
Introducing Cascading Style Sheets
Creating a Web Page with a CSS Layout
Creating a CSS Style
Applying Internal Styles
Attaching an External Style Sheet to a Page
Removing Internal Styles
Using the CSS Styles Panel
Setting CSS Properties
Working with CSS Rules
Working with ID Selectors
Create and Apply an ID Selector
Formatting CSS Code

Flash & Multimedia
Inserting a Flash or Shockwave Movie
Changing Movie Properties
Inserting a Flash Movie
Linking or Embedding a Sound

Creating Web Forms
Creating a Form
Inserting Form Objects
Modifying Text Fields and Text Areas
Modifying Radio Buttons and Check Boxes
Modifying Lists and Menus
Inserting an Image Button
Making Form Objects Dynamic
Validating Forms

Creating Templates
Creating a Web Page from a Template
Creating a Template
Opening a Template
Defining Editable Regions
Creating Repeating Regions
Creating Optional Regions
Creating Nested Templates
Updating a Template
Attaching and Detaching a Template

Managing A Web Site
Defining Local Info for a Site
Defining Remote Info for a Site
Transferring Files
Comparing Local and Remote Files
Checking Site Files in and Out
Synchronizing Site Files

You can Buy Dreamweaver CS5 for both the Mac and PC platform. If you're a student you can purchase Dreamweaver CS5 for Teachers and Students at special academic pricing.

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Attaching an External Style Sheet in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!

Make Money Online!

Make Money Online!

Dreamweaver CS5

Attaching an External Style Sheet to a Page

More Dreamweaver Tutorials

Find this website useful?

Share this Webpage

Sponsors