Free technical help for digital creators - music, video, art, photography, graphic & web design

Linking & importing a CSS to an html doc by Matt Ottewill

Planet Of Tunes TV

Creating and linking a CSS to an html doc
YouTube button

There are 2 ways to attach a stylesheet to an html page ... 1) Link, and 2) Import

Link

This will link the style sheet to the page but ... pre version 5 browsers which do not recognise CSS properly may have problems displaying the html coherently. The linking code will appear in the <head> tag and look like this ...

<link rel="stylesheet" href="styles.css" type="text/css">

Import

This will link the style sheet but hide it from any non css compatible (pre version 5) browsers which will simply ignore it. Your end-user will then see simple but logically formatted html. The linking code will appear in the <head> tag and look like this ...

<style type ="text/css">
@import url(styles.css)
</styles>

 

How to attach a CSS in Dreamweaver

Method 1

Open each HTML page you want to attach the CSS file to and use the Attach Style Sheet button at the bottom of the CSS palette to attach the CSS file to each page.

Dreamweaver will attach (link) the CSS file to the html page currently selected/in focus.

Method 2 (easier!)

  1. Open a page to which the style sheet is already attached, and in code view, select and copy the line of code in the head tag which links/attaches the style sheet to the page. If the stylesheet is linked (rather than import) the code will look something like ...
    <link rel="stylesheet" href="styles.css" type="text/css">
  2. Switch to the page you wish to attach the style sheet to, and in code view paste the line of code into the head tag.