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 Educator.com

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!

Working with an External CSS File

  • We are going to create and work with an external style sheet
  • There are internal styles on this page
  • We will move those styles onto an external style sheet
  • We can then build additional styles to use across the site
  • Dreamweaver makes this process very easy to do
  • Open about-us.html
  • Select the rules within the CSS panel
  • Right click & choose Move CSS Rules
  • Choose a New Style Sheet & name it styles.css
  • This process not only creates the new style sheet but it attaches it to the HTML page
  • We need to delete the <style> tag that remains on the page
  • To delete the <style> tag, select it in the CSS styles panel & click the trash can
  • That process converts internal styles to external ones

Working with an External CSS File

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
  • Move CSS Rules to External Style Sheet 0:32
  • CSS File in Styles Panel 2:00
    • Remove Style Tag
  • External Style Sheet 2:46
    • Related Files Toolbar
    • Adding Additional Styles
  • Summary 8:56

Transcription: Working with an External CSS File

We are now going to take a look at taking our internal style rules (in other words, they are only available for this single page) that we created on the About Us page (and there is one for Header 1 and one for a p tag).0000

And what I want to do is take these rules and move them out to an external CSS file, instead of having them only available for this page.0015

It is fairly easy to do this in Dreamweaver; so that is what we are going to take a look at.0027

Now, I only have two rules; so I am going to hold Ctrl or Command down and select those two; and when I do that, I will do a right-click, and I am going to say Move CSS Rules.0032

What that is going to do is open up a dialog here, as you can see; and I want to move these rules out to a style sheet.0048

But I don't have one created yet, so what I want to do is create a new style sheet; and I will let Dreamweaver do that for me.0057

I'll select a new style sheet; I'll click OK; and Dreamweaver says, "What do you want to name it, and where do you want to put it?"0066

Now, my standard naming convention for a style sheet for a web page is styles...now, because Dreamweaver does not have a CSS file as its default format, notice, it says "Save as type," but once in a while, I find that doesn't always register.0076

So, what I am going to do is add the .css myself: that always works.0097

The filename is styles.css; I want to make sure it goes inside my Wanderlust Travel website, which should be automatically showing, because we have that defined in our Files panel.0104

I'll click Save; and you can see, it looks a little different in our Styles panel now.0118

I have a styles.css file, and it has our two rules inside of it; and notice, my style tag that was sitting on the page with those two rules is gone.0125

Dreamweaver does not automatically remove this style tag; there are instances where you may want to keep some styles on the page and move the rest.0138

So, since we can choose exactly which styles we want to move, what I am going to do is manually remove this style tag.0149

To do that, I will select it and hit the trash can down in the bottom right corner.0159

There are my styles now, nice and neat, on an external style sheet: what does that mean?0166

Let me double-click to close this up: you can see, there is literally a new file in our Files panel that Dreamweaver placed here, and I can double-click and open it, and it has our two style rules on it.0174

Now, I don't need to keep it open (I'll go ahead and save that), because Dreamweaver has what is known as the Related Files toolbar.0189

If you notice, above my Code, Split, and Design View, I now have these two options: one says source code, and if I click on that, I move into Code View--you can see the source code for the HTML page.0199

But I also have this one: because the CSS file is attached to this page, I have access to looking and changing those styles without needing to go down here, dig around, find my style sheet down here, and open it up and modify, like we used to.0215

I really like this toolbar; and it is automatically added when you have a style sheet attached.0238

If I go out to another page (so I'll go out to...let me go to headings)--when I go to headings, notice, that does not have that Related Files toolbar; as soon as I click into about-us, it does, because I have another file that is needed by the browser in order to view that web page.0246

I'll close up headings up here--we don't need it--and I'll go back to the source code and Design View.0270

It can get a little confusing at first if you accidentally bump this; just know that source code always represents the main HTML file.0278

We have those styles on our page; what we are going to do now is: we are going to add a couple of other styles to this external style sheet.0290

As long as it is attached to this HTML page (in other words, it is showing up here), I can add additional styles to it.0301

I am going to duplicate my Header 1 and just make it a little bit smaller for a Header 2.0310

I'll select the H1; I'll do a right-click to duplicate from this menu; and it is going to be a tag--this time, it will be a Header 2 tag.0317

We are going to create the exact same rules for a Header 2; I'll click OK and move down to the Header 2 (notice, it didn't automatically move me to that new rule), and I'm going to set this one to be a little bit smaller.0330

I'll close up my Files here (I have my Styles and Files both open); and that Files--since I don't have too much space here, I'll go ahead and close it, so you can see a little bit better.0348

Make sure both pieces of your Styles panel are showing; and I am going to click on the font size.0362

I select H2 and click on the font size; when I click on the right side, I am going to change this and drop down my Header 2 to a 1.2 em instead of a 1.4 em, so it will be smaller.0368

Now, nothing is going to change on my page, because we don't have a Header 2 at this point; but I am preparing for when we do.0384

I'll do that same thing one more time--duplicate: this time, I am going to make it a Header 3; I am preparing for when these headers get added to the page.0393

There is my Header 3: notice where we are placing it by default now--in the styles.css.0405

Now, I do have the option to put it only in this document, or I can have Dreamweaver create another whole style sheet besides this one.0412

I am just going to leave it in this external style sheet; I'll click OK, move down to my H3, and I'm going to set the size for this one to 1.1.0422

I want each level of header to get a little bit smaller in font size.0434

So right now, I have a Header 1 and 1.4 ems; I have a Header 2 at 1.2 ems and a Header 3 at 1.1 em.0440

Now, I didn't change any of the other properties on these, but what is nice about an external style sheet is: if I decide to change them later, every page automatically gets updated.0453

So, I just change the rule in my external file, and every page attached to it automatically gets those styles updated, as well.0465

Now, notice: my styles.css has an asterisk on it--not my HTML page; and this is where we want to start using the Save All.0476

And notice, my Save All does not have a keyboard shortcut attached to it, so I have to manually go and change this.0490

It is possible to assign a keyboard shortcut to it, but by default, it doesn't have one.0499

I did a Save All: now, both my tab and my styles.css file do not have asterisks attached.0506

So, that is how you can take your style rules that might be used only on that page (as internal style rules)--you can move those out to an external style sheet.0516

Once that style sheet is attached to an HTML page, you can always add additional styles to that external style sheet, or you can modify any of the styles on any of the rules within that style sheet that is attached.0529

That is taking our internal (or embedded) style rules and moving them out to an external style sheet.0548

We also added additional styles to our new external style sheet within Dreamweaver.0559