Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exporting existing styles into an external style sheet

From: Creating a CSS Style Guide: Hands-On Training

Video: Exporting existing styles into an external style sheet

We have gone about as far as we can go using our embedded styles. It's time to create an external style sheet, but before we do that, let's save our document. Go up to File > Save As and let's change this to version 04. Version 04 will be our example of how external style sheets work. There are many, many reasons for using an external style sheet. One, it's a best practice and two, it certainly will make your work a lot easier when you are working with a team or publishing a large website.

Exporting existing styles into an external style sheet

We have gone about as far as we can go using our embedded styles. It's time to create an external style sheet, but before we do that, let's save our document. Go up to File > Save As and let's change this to version 04. Version 04 will be our example of how external style sheets work. There are many, many reasons for using an external style sheet. One, it's a best practice and two, it certainly will make your work a lot easier when you are working with a team or publishing a large website.

The idea of an external style sheet is that you have one style sheet and in the head of the document, you link your HTML page to that style sheet. You can link it to as many HTML pages as you want. So if you have a large, large website, say 20 pages and you need to make one change, you make that change in your external style sheet and it will apply itself across that entire website. It saves you a lot of time and a lot of work. Yes, websites and pages can have multiple style sheets, but again, an external style sheet makes it easy to keep your presentation and your structure separated. You can have one team working on structure, one team working on presentation and if you need to update, edit, maintain a site, it's all in one location and spreads itself across and applies itself across the entire website.

So let's remove our embedded styles and place them inside an external style sheet. Select the Code button to go into Code view, scroll to the top and as I have said before, all of the styles that we have created so far appear between the opening style tag and the closing style tag. Let's just select the styles, nothing else. I'll select the body tag, all the way down to the last tag, the class tag that we created. Make sure you include the curlicue bracket that closes the blue tag.

Once you have selected that, make sure just visually check that you have all those styles in their pink. It's easy to see if you have got them or not. Make a right-click, scroll down your dropdown menu to CSS Styles, move to the right and then scroll down to Move CSS Rules. This is the trick to get it into an external style sheet. A dialog box will say, Do you want to move to an external style sheet? And the answer is yes, you do. Now for you had already started an external style sheet, at this point we could go out to our directory and browse for one, but we do not have any external style sheets. So let's create a new style sheet. Select this button and then click OK.

Dreamweaver opens up its directory. It says you are working inside this project folder. Where would you like to save your style sheets? We have already created a folder for our style sheets. Select that folder. Write the name of the style sheet up at the top. We will call this styleguide.css. CSS stands for cascading style sheet. Make sure that the directory is right in the folder CSS, the document name is styleguide.css. Keep it relative, which means it's linked to the document and then click on Save.

Now in Code view you see that all the styles have been removed. Let's take a look at the CSS panel on the right. There is our external style sheet. If we click on this triangle, it shows us that all of the styles that were embedded are now contained in that style sheet. This is terrific! However, when I click on the Style tag at the top and I look over in Code view, I see that I have now code that's really doing nothing. There is no content in that tag and I need to remove that and clean up my document. The easiest way to do this is to select the Style tag at the top of your CSS panel, go down to the bottom of your CSS panel, you will see a trash can, click on the trash can and Voila! You have cleaned up your code.

A couple other things I want to point out before we save. Now that we have saved our document as styleguide_04. html, there is an asterisk behind it, meaning we are working in it but it's not saved. That asterisk always means you have an unsaved document. We now have not only source code appearing here, but we also have styleguide.css. This is a new feature in Dreamweaver CS4. That any documents that are linked or related to your document, your HTML document, will appear up here so that you can understand how your file structure, your code files for JavaScript, your style sheets, all of those things that need to be there to make this HTML document preview correctly in a browser.

I am going to click on the styleguide. css, because I'm in Code view already, and what's great about this is right here inside of Dreamweaver by just a quick toggle I can see my HTML code, structure, see my style sheets, presentation. You don't need to know a lot of code to be able to understand a CSS style sheet, you just need to know that these are the tags and these descriptors or descriptions separated by a colon and followed by values are what's defining the look and feel of your website.

When you have multiple pages open like this, if you do a save, which I'm going to do right now, it only saves the document that I have open. Notice it just saves the style sheet. My style guide is still not saved. The easiest way to save all the documents that you are working on is to go up to File > Save All. That will save every document that's related to the project you are working on. Let's click on the Design button. Let's make sure that our linked style sheet works properly inside the browser, click on Preview in Firefox. Yes, it looks just like it did before and let's just use our web developer toolbar to see what appears now when we say CSS > View CSS.

Great! It's showing our external style sheet. Notice that it's in our CSS folder and notice that it is in our main project folder. All of the styles that we have created so far exist right here. So we have done a great job of doing it just like the pros. Let's go back into Dreamweaver, close out Firefox. I just want to show you where that link to the style sheet exists. I'm going to choose the Split button, choose Source Code. At the top of your document, in the head tag, you will now see something right here called link.

The href. Remember an href is a location on the Internet. It says that it's within this directory that we are working in, a folder called css/styleguide.css. So we have done our work, we are working with our linked external style sheet and we are now really practicing separation of structure and presentation.

Show transcript

This video is part of

Image for Creating a CSS Style Guide: Hands-On Training
Creating a CSS Style Guide: Hands-On Training

35 video lessons · 28082 viewers

Laurie Burruss
Author

 
Expand all | Collapse all
  1. 6m 58s
    1. Welcome
      1m 9s
    2. Objective of this course
      3m 38s
    3. Using the exercise files
      2m 11s
  2. 28m 26s
    1. Starting Dreamweaver for the first time
      3m 38s
    2. Defining a website
      4m 3s
    3. Understanding the Dreamweaver interface
      9m 43s
    4. Setting up a custom workspace
      4m 10s
    5. Setting essential preferences
      6m 52s
  3. 56m 54s
    1. Laying out a page in a text document
      3m 40s
    2. Creating and saving a new document
      3m 27s
    3. Inserting an image
      8m 22s
    4. Marking up text using the Property Inspector
      6m 48s
    5. Marking up text by hand
      9m 21s
    6. Inserting, formatting, and selecting a table
      8m 16s
    7. Creating links
      12m 26s
    8. Styling a footer
      4m 34s
  4. 22m 15s
    1. Using Modify Page Properties to create embedded styles
      12m 22s
    2. Creating links with CSS
      4m 55s
    3. Working with Code, Split, and Design views
      4m 58s
  5. 8m 52s
    1. Defining browsers to test a web page
      2m 24s
    2. Previewing a web page in a browser
      6m 28s
  6. 16m 44s
    1. Using a span tag to add a class and customize appearance
      10m 34s
    2. Using the Tag Inspector to create and edit additional styles
      6m 10s
  7. 48m 42s
    1. Exporting existing styles into an external style sheet
      7m 0s
    2. Using the CSS Styles panel to add a new style
      5m 43s
    3. Using the div tag to create a content container
      11m 8s
    4. Overriding the default browser styles
      2m 46s
    5. Applying padding and margins
      4m 57s
    6. Styling header tags
      5m 34s
    7. Creating and styling compound tags
      5m 12s
    8. Editing preexisting rules
      6m 22s
  8. 19m 36s
    1. Improving the Footer
      5m 12s
    2. Commenting a CSS style sheet
      7m 0s
    3. Creating a custom color palette
      7m 24s
  9. 3m 6s
    1. Style sheet final review
      3m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a CSS Style Guide: Hands-On Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.