How To Use CSS
In-line styles
In-line styles are entered directly into an HTML tag. There is little use for in-line styles, because a) the styles are not available for other pages on your site; and b) the styles cannot be maintain/edited from a central location. In-line styles are most often used for declaring a specific attribute of an element that will not likely be changed. A good example would be declaring the width of a caption for a photo -- the photo has a fixed width, so the caption width will not likely change. The following example creates a paragraph that is restricted to 200 pixels wide.
<p style="width: 200px;">Photo caption text here...</p>
Internal styles
Internal styles are declared on an individual page. The block of code specifying the styles is inserted in the <head> section of the document. These styles are available only on the individual page. The following example creates a page with blue paragraph text and red link text.
<head>
<title>CSS Example</title>
<style type="text/css">
p { color: blue; }
a { color: red; }
</style>
</head>
External style sheet (CSS) file
The most useful way to use CSS is to create a central style sheet file (.css file) and your style declarations are maintained in this file that is external to your web pages. The external .css file is linked to your pages.
Within the <head> section of your document, add a link to the external style sheet. Note that when you create a new style in Dreamweaver, the style sheet is automatically linked to that page IF you specify a "New Style Sheet File" in the "Define in" option of the New CSS Rule dialogue box. The following example is a link to an external style sheet file.
<link href="stylesheet.css" rel="stylesheet" type="text/css">
The style sheet file is read into browser memory before the content of the page downloads. Those styles also stay in the browser memory as visitors browse from page-to-page on your site, so subsequent page visits do not require the external style sheet file to be downloaded again.
|
