Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Attaching a Style Sheet

  • The destinations page does not contain styles
  • Our page has tags that need styles
  • Attach a style sheet to the page by clicking the link icon in the lower right corner of the CSS styles panel
  • Browse out to styles.css & choose screen as the media type in the 2nd dropdown menu
  • We will add new styles to this page for the various lists on our destinations page
  • Add styles for the ul, ol, li, dd & dt tags and be sure to choose the styles.css file in the location area
  • Once a style sheet has been attached to a page, you can add styles to it from the HTML page
  • The styles that are added to the external style sheet will apply to any page that links to that style sheet so every page gets updated automatically

Attaching a Style Sheet

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Apply External Style Sheet to Another Page 0:56
    • Attach External Style Sheet
  • Apply Same Style Rules to Multiple Tags 2:39
  • Troubleshooting Style Problems 4:30
  • Summary 5:44

Transcription: Attaching a Style Sheet

We are now going to take a look at how to attach an external style sheet to a page that doesn't yet have one attached.0000

So, in case you don't have the course files for this section, they are available in the Exercise Files tab underneath the video.0009

I have about-us.html set up; it has styles attached; and these are located on an external style sheet.0020

I have four style rules so far on this external style sheet.0029

Now, from this page I can add more if I like; but if I move over to my Destinations page within our files, notice, there are no styles attached at all--they are not yet available on the page, so I have all of my default text set up on this page.0035

How can I take that external style sheet and apply it to this page?0057

Dreamweaver makes that pretty simple: as long as I have the style sheet already created, what I am going to do is simply attach it to this page.0063

Down in this lower-right area of the CSS Styles panel, you can see, there is a little link here that says Attach Style Sheet: I'll click on that, and Dreamweaver wants to know where that file is located.0074

I'll browse out on my system, and it should take you right to the exact site that is in the Files panel.0090

And here is my file; so I'll go ahead and select that and click OK.0098

Now, the other thing you can set up within this area is the media type; I can determine what media type I want to use.0105

I'll be addressing that later in the course, but for now, I am just going to choose media: screen.0116

If it is being viewed by a screen device, this is the style sheet that will be used.0124

I'll click OK; and you can see, my first two parts of the page look pretty good; but the rest of the page, and my bullets specifically, are very much default font; so how can I get that information to look nice?0131

...because it is only a p tag, or a Header 1, 2, or 3, that we have set up as our default text.0149

I am going to show you a quick little shortcut: what we want is everything in our bulleted list to look the same as our paragraph.0159

We can do that very quickly by clicking on the p; and if I am in my bulleted list (let me open the Properties area here, so it's easier for you to see), notice, when I click in the bulleted list, the last thing in the Tag Selector is the li tag.0170

What I need to do is style that li tag, and it will automatically style everything within my bullets.0192

I can easily and quickly apply the same style as my p tag to the li tag by putting a comma, li.0200

As soon as I click out of that, you can see, my bullets are now properly formatted all the way down.0211

Now, down in this area they are not; I still have to address that; and my copyright doesn't look too formatted either.0219

That may just be the font that I am in; actually, this 3 does look formatted--some of these's somewhat hard to tell.0230

But definitely, this definition list down here is not formatted; and I'll play with that at another time.0238

That is how you can add the same style rules (and that is these rules here) to multiple tags: just put a comma and list the next tag.0246

The way you can read this is: if it is a p tag...think of the comma as being an "or": if it's the p tag or it's an li tag, this is what it is going to look like.0258

Now, let's change the color so we can truly see what isn't styled on the page.0271

I'll click on the blue; just make your text a totally different color, and it makes it really quick and easy to see what has not yet been styled.0279

I'll put this back to black; and we can see, it is only this area of the page that has no styles.0289

But you see how quick and easy it is to work with an external style sheet and CSS in order to format big areas of your pages and have them very consistent across multiple pages within your same website.0297

Now, I am going to do a Save All; it is important to do that, because I had an asterisk on my style sheet, and I also had one on my Destinations page.0315

But notice, now my Destinations has the styles.css, just like my About Us page does.0326

That is my indication that that style sheet has been attached; I can also check the CSS Styles panel and see that it's attached here, as well.0333

That is how you attach an external style sheet to a page that doesn't yet have that style sheet attached.0345

As soon as you attach it, all of the styles that are within your style sheet will apply to that page; and you can do this consistently across your website, and you have very consistent styles on every page.0353

Now, whatever page is using these...and if I had a whole bunch more, it would be exactly the same...every page that has this style sheet attached--if I change a rule in here, it instantly updates.0368

You are starting to see the power of an external style sheet within your website.0382

That is how you attach a style sheet to an HTML page using Dreamweaver.0388