Web Design Training courses, videos & tutorials at DigitalFamily.com
Web design & Internet trends
books, videos, training & consulting
  • Home
  • Store
    • Web Design Books
    • Dreamweaver Videos
    • Expression Web Videos
    • Products
    • Shopping Cart
    • Order Status
  • Consulting Services
  • Web Tutorials
    • Web Design 101
    • Mobile and Responsive Web Design
    • Social Media
    • Online Reputation
    • Dreamweaver
    • Expression Web
    • Cascading Style Sheets
    • WordPress
  • Dreamweaver
    • CS6 Tutorials
    • CS5 Tutorials
    • CS4 Tutorials
    • CS3 Tutorials
  • FAQ
    • Dreamweaver
    • CSS
    • Graphics
    • WordPress
    • Ask the Author
  • About Us
    • About DigitalFamily.com
    • About Janine Warner
  • Contact
Search the site...
Home» FAQ » CSS » How do I change internal styles into an external style sheet?

How do I change internal styles into an external style sheet?

Posted by Janine Warner - August 17, 2012 - CSS, Dreamweaver, FAQ
0

Hello Janine,

I have watched all of your Dreamweaver and CSS training videos numerous times and worked all of the projects, and I am getting the hang of css styles and rules, etc.

However, I have noticed that the pre-made CSS templates in Dreamweaver have <style> in the CSS panel, which I presume is an “internal” style sheet.  You keep saying in your training that adding an “external” <style.css> to the html page is better, but where do these “external” style sheets come from?

Is there a basic external style sheet you can attach?  Can you change the internal style sheet that came with the template to an external style sheet?

Thanks,

Tom

Hi Tom,

Yes, you can change an internal style sheet into an external style sheet. Here’s what you do.

1. Create a new CSS file by choose File > New, then in the New dialog, choose Blank Page on the left, and choose CSS, and then choose Create.

2. Save that file by choose File > Save, and name it style.css, or main.css (or something like that)

3. Open the HTML page that has the internal styles (the ones that are in the <styles> tags), and attach the new blank external style sheet to that HTML page. You can do that by choosing Format > CSS Styles > Attach Stylesheet.

External CSS Style SheetNow you should see the blank external style sheet in the CSS Styles panel, just above or below the list of styles in the page.

4. To move the styles into the new blank style sheet, just click and drag them in the styles panel from the internal style sheet to the external one, as you see in this screenshot.

Note, you can Shift+Click, or Cmd + Click, to select multiple styles and drag them all at once.

 

After you move all of the styles into the external style sheet, save the CSS file, and you can then attach that new external CSS file to any or all of the other pages in your site to apply the sames styles to every page.

If you already have internal styles on a page that are the same as the styles in the external style sheet, make sure to delete them — having duplicate styles can cause conflicts.

I hope that helps you finish your site.

Janine

css, dwcs4, dwcs5, dwcs6

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Share with your friends

Recent Posts

  • How to change the width in a Dreamweaver drop-down menu created with a Spry Widget
  • Should I use a higher image resolution than 72 ppi for my photographs on the web?
  • How do I move my domain name?

Dreamweaver Tutorials

  • Creating websites with Dreamweaver HTML templates (.dwt)
  • What’s the difference between a website & blog?
  • 6 Reasons to Upgrade to Dreamweaver CS6
  • Tracking web traffic: Google Analytics vs other traffic counters
  • Creating Responsive Designs with Dreamweaver CS6 Fluid Grid Layout

Popular books & videos

  • Dreamweaver CS6 Video

    DW-Video-250
    Creating Responsive Designs for small and large screens with Fluid Grid Layouts
    Discover how to create web designs that look great on large and small screens. From smartphones to tablets to desktops, the new Fluid Grid Layout in version CS6 makes it easier than ever to set up media queries and design websites with HTML5 and CSS3. More Info »
    $49.99$39.99

    View Cart / Checkout
  • CSS Basics: A Refreshing Way to Learn Cascading Style Sheets

    CSS-Basics-DVD
    Training video DVD
    Whether you are completely new to designing with Cascading Style Sheets, or you really want to master the basics of CSS, Janine's crash course will get you up to speed quickly. More Info »
    $24.99

    View Cart / Checkout
  • Creating CSS Layouts: Getting More Advanced with Cascading Style Sheets

    CSS-Advanced-DVD-500
    Training Video DVD
    Dive deep and learn more advanced techniques with Cascading Style Sheets in Part 2 of Janine's CSS training series. More Info »
    $24.99

    View Cart / Checkout
© 2001 - 2013 All rights reserved. DigitalFamiliy.com was created by Janine Warner | Terms & Conditions of Use | Privacy Policy
  • Home
  • Store
  • Consulting Services
  • Web Tutorials
  • Dreamweaver
  • FAQ
  • About Us
  • Contact