Create a New Style Sheet in the CSS Styles Panel
How to Apply CSS3 Effects and Transforms in Dreamweaver
CSS Code Hinting in Dreamweaver

How to Create External Styles in CSS3

Most developers use external styles in CSS3 to reduce the amount of work required to maintain a site. A single .CSS file contains all of the styles for the site, which means that changing a style site-wide is as simple as changing that one file (rather than each page). Because the change occurs in just one place, there isn’t any chance of missing one or more changes on individual pages.

Creating and using an external style sheet isn’t much different from using an internal style sheet. The following example uses standard techniques to create an external style sheet:

  1. Create a new HTML5 file with your text editor.

  2. Type the code for the HTML page.

    <!DOCTYPE html>
    <html>
    <head>
      <title>A Simple Page</title>
    </head>
    <body>
      <h1>A Simple Heading</h1>
      <p>Simple text to go with the heading.</p>
    </body>
    </html>

    Make sure you type the code precisely. What you should end up with is the same plain page — one without any styles.

  3. Type the following code immediately after the <title> tag.

    <link rel="stylesheet" href="ExternalCSS.CSS" />

    The <link> tag tells the browser to look for an external resource. In this case, the rel attribute says that it should look for a style sheet and the href attribute provides the name of that style sheet.

  4. Save the HTML5 file to disk.

  5. Create a new .CSS file with your text editor.

    Your editor may not support .CSS files. Any text file will do.

  6. Type the following code in the .CSS file.

    p
    {
      font-family: cursive;
      font-size: large;
      color: #0000ff;
      background-color: #ffff00;
    }
    h1
    {
      font-family: "Times New Roman",Georgia,serif;
      font-size: 40px;
      text-align: center;
      text-decoration: underline;
      color: #ff0000;
      background-color: #00ffff;
    }

    This may be the same code that you used to create your internal file. The only difference is that it now resides in an external file.

  7. Save the CSS file to disk as ExternalCSS.CSS.

    It’s absolutely essential that the name of the file precisely match the name found in the href attribute. Some platforms are case sensitive, so you must use the same case for the filename. For example, externalcss.css might be viewed as a different file from ExternalCSS.CSS.

  8. Load the page in your browser.

    image0.jpg
blog comments powered by Disqus
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
How to Add Special Color Effects on CSS3 Sites
How to Work with CSS3 Event Selectors
How to Work with Datepicker in CSS3
Advertisement

Inside Dummies.com