Wellesley College
Dreamweaver Documentation


Cascading Style Sheets

| What is CSS? | Creating CSS | Links |
| CSS in Dreamweaver MX: Internal Style Sheets, External Style Sheets |
| Hand-Coding Basics: Coding CSS, Rules, Properties, Attaching Style Sheets |


 

Attaching Style Sheets
-------------------------

For any style sheet to affect an HTML document, it must be attached. This can be done in several ways, depending on which kind of style sheet you're attaching. For inline CSS, you would add style rules using the inline method. For an internal style sheet, which is created within the HTML document, you can use the embed method. For an external style sheet, where you create a separate CSS file, there is the link and import methods.

 

  1. Inline: Adding CSS style rule/s to individual HTML tags within the body of the HTML code. Using CSS on a single tag will only affect that tag in that one particular instance.

    2. <p style = "

    /* In the body of your HTML code, add the style attributes that CSS is defining to the HTML tag i.e. */

    font-size:10pt;
    line-height: 18pt;">

    </p>

    /*Close the tag pair with the corresponding end tag.*/

     
  2. Embed: Style rules are nestled within a style container in the head of the HTML document.

    3. <head>

    /* The code below opens a CSS style container within the head of your HTML document */

    <style type="text/css">

    <!--

    Put your CSS Rules here, i.e.

    h1 { font-style: bold }

    -->

    </style>

    /*close the style definition by typing one end tag */

    < /head>

  3. Link: The most common way to attach an external style sheet, a separate file that contains all the style rules. External style sheets can be attached to any number of HTML files throughout an entire website.

    4. Linking an external file sheet to an HTML document.

    <head>

    /* Within the head of your HTML document, include this code. It tells the browser that a style sheet is being linked and it's of a certain type */

    <link rel = "stylesheet" type="text/css" href=" cssFileLocation/URL/Filename.css" >

    /* In the place of "cssFileLocation/URL/Filename.css", specify the location, either global or local, of the CSS file to be used. Below are two examples.*/

    /* local location */
    fileName1.css

    /*global location*/
    http://www.mysite.com/css/filename1.css

     

    </head>

    Link as many style sheets as you like.

  4. Import: Another way to bring external style sheets into a document.

    5. To import a CSS document into an HTML document

    1. Within the head of your HTML document, open a style container.

    <style type = "text/css">


    2 . Type @import url and then the local or global location of your file. Type a semicolon, ;, to close import statement.

    /* local location */
    @import url (fileName1.css);

    /*global location*/
    @import url(http://www.mysite.com/css/filename1.css)


    3. Repeat step 3 for all the external CSS files you want to link.

    @ import url (fileName2.css);


    5. Include additional CSS rules here, if needed.

    blockquote { font: italic }


    6. Close the style definition with a style end tag.

    </style>

 

Computing at Wellesley

Macintosh Documentation

PC Documentation