TechNote (Archived)

Using CSS styles with templates

This TechNote discusses how to apply Cascading Style Sheets (CSS) to templates and documents created from templates. A working knowledge of both CSS and templates in Dreamweaver is recommended before following the steps outlined in this TechNote. To gain a better understanding of CSS styles and/or the use of templates in Dreamweaver, consult the TechNotes listed in Additional Information below.

CSS styles
In terms of where the style sheet information is located, Dreamweaver uses two kinds of CSS styles:

	Linked Sometimes CSS styles are applied to a document by linking to styles listed on an independent, external style sheet, thereby making the style sheet available to the entire site. These styles are referred to as linked styles.
	Document-level CSS styles can also be applied to elements of a document using STYLE tags in the document itself. These "internal" styles are termed document-level styles.

Templates
This TechNote compares the application of both kinds of CSS styles to templates and to documents created from templates, as follows:

	Adding styles to templates(DWT files) In either Dreamweaver 3 or 4, you can add both document-level styles and linked styles to the original template (DWT file). Styles added to the template will also be present in documents created from that template.
	Adding styles to documents created from templates(HTML documents) The fact that the HEAD section of a document created from a template is locked may cause difficulties when applying styles, depending on whether you are applying linked or document-level styles, as follows: Linked styles Dreamweaver 3 You cannot add linked styles to a document created from a template. Dreamweaver 4 You can add linked styles to a document created from a template just as you would any other document. Document-level styles After theHEAD section of thetemplate has been modified, document-level styles can be added to a document created from that template (in both Dreamweaver 3 and 4). Adding document-level CSS styles to a document created from a template 1 After opening the template (DWT file), look at the source code. 2 Notice that the`head`section of a template contains the following code: `<!-- #BeginEditable "doctitle" --> <title>Untitled Document</title> <!-- #EndEditable -->` `Note:This code allows the title of each document created from a template to be editable.` 3 To add newstyletags: For a template which doesn't already have document-level styles, you can add the following code to the "doctitle" editable region in the template. `<style> style type="text/css"</style>` Enter the above code so that it immediately follows "`</title>`". After adding theSTYLE tags to the code, the "doctitle" section should look like: `<!-- #BeginEditable "doctitle" --> <title>UntitledDocument </title> <style> style type="text/css"</style> <!-- #EndEditable -->` To move existing STYLE tags: If your template (DWT) file already contains document-level CSS styles, you can cut and paste them into the editable part of the headsection, as described below: a Select the existing STYLE tags and the content in between. b Choose Edit > Cut. c Place the insertion point at the end of "`</title>`." Choose Edit > Paste to enter the preexisting styles code. After adding the STYLE tags and the content in between to the code, the "doctitle" section should look something like: `<!-- #BeginEditable "doctitle" --> <title>UntitledDocument</title> <style type="text/css"><!--.red { color: #FF0000}--></style> <!-- #EndEditable -->` 4 Save the template, and choose Yes if prompted to update documents created from the template. Any document created from the new or modified template will then allow you to apply document-level styles. Â

Additional information:
For more information about CSS styles or templates, consult:

	CSS Styles An overview of Cascading Style Sheets (Technote 15230) How to create document-level Cascading Style Sheets (TechNote 15231) How to create an external Cascading Style Sheet (TechNote 12922) Â
	Templates Understanding editable and noneditable regions in templates (Technote 14804) Important information to consider when using templates (Technote 14627) Adding content to pages based on a template in Dreamweaver 4(Technote 14908) Adding behaviors to templates and to documents created from templates (Technote 14797) Using Library items to add behaviors to documents created from templates (Technote 14852) How to incorporate image maps in templates (Technote 13880)