gradient
 
gradient
 
 
 
 
title

4. Adding A Link To The External CSS File

title
sign
 

 

It is recommended to use an external CSS file in which you define all the style for your entire web site because any change in the CSS file applies to the entire web site So if you want to change the text color for example you only have to modify a line in the CSS file not to open all the pages of your web site and modify the text properties.

Let's open the styles.css file from template/html/html_version/css to see how this external CSS file looks and how we link it with our html pages.

As you can see this file can only be viewed in Code view and all the code you see is CSS code. The purple texts defines the elements/tags from the html code to which are applied the characteristics above each defined tag (the blue text).

You have to know little about CSS to directly modify the styles in the file. But if don't know much about CSS you can create and manage styles from within your html page using a more attractive interface.

Open the index.html file from template/html/html_version. We have already shown you in a previous tutorial which is the CSS panel in Dreamweaver but let's remind it (we have already written the line of code which links the index.html file with the styles.css file so you can see the content of the styles.css file when you open the index.html file. If the link is not established the CSS panel doesn't display the contents of the external file but only the inside html file defined styles if exist):

As you can see in the CSS panel you can modify any property without editing directly the CSS code. Try to change the color property of the "td, textarea, input, select" class and you'll see that the entire text that corresponds with this class will change its color.

Now let's take a look at the index.html file's code to see the line of code that defines the link to our external css file:

You can add link to more than one external css files. You only have duplicate this line of code and each time to change the path to the external file href="css/styles.css"