Dreamweaver Using Styles
Dreamweaver topics:
- Dreamweaver Site Setup
- Dreamweaver Text and Links
- Dreamweaver Adding Images
- Dreamweaver Using Styles
- Dreamweaver Using Layers (divs)
- Dreamweaver Using Templates
- Dreamweaver XHTML Code
- Dreamweaver Frames
Contents
Introduction
To change the looks of your website by changing the appearance of each individual element is very time-consuming and thereby inefficient. Especially when you want to re-design the looks of your website at a later stage, this is not the way to go.
It's recommended to use a so-called CSS Style Sheet. A Style Sheet holds the information that will be used to determine the appearance of your website. It will hold rules that determine the appearance of, for example: background color, text color, font, etc etc.
To do this properly, it requires a structured approach. It may take a some practice and may seem to be tedious at first. But once you've created a proper stylesheet, it will definitively pay off. Especially when you want to apply the same 'looks' to multiple pages or when changes need to be made for your entire website.
All elements in a page should be functional, i.e: the HTML-elements specify the function (role) of an element in the page. For example: paragraphs, Lists, Headings, etc. For more information, see: Dreamweaver XHTML Code
In a style sheet you can specify the appearance for every possible elemnt. You can also create classes to be applied to any tag, allowing you to create 'exceptions' or special cases for your layout.
Style sheets
Styles can be added to a page in two ways: inline and in an external stylesheet.
- An inline style sheet
- is saved in the page itself and can only be applied to that specific page itself.
- An external style sheet
- is saved into a separate file (typically a .css file) that can be linked to multiple pages. This is recommended in most cases.
Open the CSS Panel at the right.
Creating New Styles
Click the button 'New Style Rule'.
Choose the type of style you want to create (more on this further on)
If this is the first style rule in your page and you need to create a new Style Sheet File, make sure you 'Define' is set to 'New Style Sheet File'. If you already have a style sheet file, you can add your rule to this file.
Save the CSS file somewhere in your webroot; directly in the base folder of your Site is fine in most cases.
Now you can configure your style rule.
Linking an existing Style Sheet to your page
If you want to link an existing style sheet to your page, use the 'Attach Style' button in the CSS Panel en choose the css file to be attached. It's possible to link multiple style sheets to a page, but for smaller sites this will probably not be necessary; this will probably only complicate things.
The style in the selected style sheet file (.css) should now be applied to your page.
Style Selectors
You can create different types of styles from the CSS Style menu.
- Class
- one can regard classes as a set of style rules that can be applied to any element. You have to specify an element to use a certain class manually for each element though.
- Tag
- applies style rules to all tags of a specific type within a page. For example: all H1-headings, or all links ('a' tag).
- Advanced
- allows you to create style rules for some special cases.
Tag
When you want to set the appearance of certain elements in general, create a style rule for a tag. It will automatically be applied to all tags of the speecified type. You can use it to set the text alignment in paragraphs, the background color of the page (body) or the font for the entire page (body), etc
You can find the HTML tag(s) for the element your cursor is in, directly above the Properties Panel. This can be a great help to determine the name of the tag you want to create a style rule for. You can also take a look at: Dreamweaver XHTML Code.
Class
This is probably best explained using an example:
If you have a page with several paragraphs. Some of these paragraphs are just plain txt, but some of these could be quotes and therefore need to have a different appearance. When you would add a style rule for a paragraph (p tag), this would be applied to all paragraphs. This is not what we want. Only a few of them should be affected by this style rule.
Classes are the answer here. You could create a style rule for a class 'quote' (you specify the name for a class yourself) that sets the proper appearance. (italic and indented for example).
Once you've created your class, nothing will happen yet: you still need to apply it to the elements (paragraphs in this case) you want. Put your cursor somewhere inside the paragraph and select the class in the Properties panel from the Style pull-down.
Try to use descriptive, clear and functional names names for your classes. Use 'quote' instead of 'italic' for instance; The latter will indeed say something about the appearance, but it's better to use a functional name. especially when you change your mind and won't make it italic after all...
Advanced
The advanced options can be used to set the appearance of links in certain special cases:
- hover
- when hovering your mouse pointer over a link
- visited
- link that has been visited earlier
Hierarchy
HTML is strictly hierarchical. An image might be an element within a paragraph, which itself might be an element within the page (body). Style sheets respect this hierarchy: style rules are automatically inherited by child elements. in the example above: a paragraph will inherit the style rules from the body. When a style rule for the body sets the font, it will be inherited by all elements (paragraphs, lists, etc) within the body. Only when there is a more specific style rule (for example for a paragraph), the inherited rules will be overwritten by the more specific rule.
