Dreamweaver users can easily insert a link tag to an external Cascading Style Sheet (CSS) without having to commit to memory all the required code or the proper syntax. Moreover, when creating links to an external CSS file in Dreamweaver, you can also use that opportunity to select a CSS media type, if desired.
In the following steps, you find out how to link an external CSS file with the all media type to an open HTML file in Dreamweaver.
To complete all the steps, you need Dreamweaver along with sample HTML and CSS files, which you can quickly create on your own.
Place both copies of the saved files into a folder on your computer and then proceed with the following steps:
Launch Dreamweaver and set up a managed site by choosing Site→New Site.
The Site Setup dialog box appears, showing the Site category, which displays fields for the Site Name and Local Site Folder.
In the Site Name field, enter the name of your site.
Enter a name that matches the name of the client or indicates your site’s purpose is best, such as ABC Company or My Blog.
In the Local Site Folder field, verify that the path points to the folder on your computer that you want to use for this site.
For example, if you have a folder on your computer dedicated to local websites and you want to create a folder inside that to house the files for a new ABC Company website, your Local Site Folder path might be something like this:
UsersyourusernameDocumentslocal-sitesABC web
Click Save to close the dialog box.
Your new managed site opens, displaying all the existing files and folders (if any) in the root folder in the Files panel.
From the Files panel, open the HTML file that you will be adding the CSS link to.
The file you use should have some type inside of it and be marked up with paragraph, h1, and list tags.
To add the link, click the Attach Style Sheet icon (which looks like a little piece of chain) at the bottom of the CSS Styles panel.
Clicking the icon opens the Attach External Style Sheet dialog box. If you don’t see the CSS Styles panel in the Dreamweaver workspace, choose Window→CSS Styles to open it.
In the File/URL text field, type the name of the CSS file you’d like to link to or click the Browse button to find and select the desired CSS file.
If you’re using the sample files you just downloaded from the web, click the Browse button to navigate to the location where you saved the sample files and select the file cssdemo.css.
In the Add As area of the dialog box, click the Link or Import radio button to select the desired method for adding the CSS file to your HTML page.
The Link option adds the CSS as an external file by using the tag:
<head> <link href="cssdemo.css" rel="stylesheet" type="text/css"> </head>
The Import option specifies the external CSS within a style link inside the head of the page by using the @import at-rule. Keep in mind that this method is not recommended for CSS3 media queries:
<head> <style type="text/css"> <!-- @import url("cssdemo.css"); → </style> </head>In the Media drop-down menu area, type the word all, or click the menu’s down arrow and select the all media type.
To specify multiple media types rather than just one, enter the names of each of the desired media types, separated by commas and no spaces, as in screen,print,tty.
If desired, click the dialog box’s Preview button to see how the newly linked CSS file styles your sample HTML file.
Click OK to complete the attachment of the external CSS file.
Dreamweaver’s CSS Styles panel now displays the newly attached CSS file and lists all the styles inside it, and the sample HTML file is styled with the style rules on the linked CSS.