MENU
Backgrounds
Tools
Tutorials
What Is
About
 


CopyScape

Dreamweaver C S S Styles

   
Other Categories In Dreamweaver
Anchors
Flash Rollover
Links
S S I
Behaviors
Form Tips
Photo Album
Site Live
C S S Rollovers
Image Maps
Play Sound
Templates
C S S Styles
Jump Menus
Pop-up Windows
Define Site
Layers
Quick Tips

CSS Styles Tutorial for Dreamweaver MX 6.0


CSS or Cascading Style Sheets determine the façade of contents on a web page by formatting its rules. They are really useful especially when maintaining web sites for the appearance is managed through just a single file. CSS styles also make your sites look better, make it more accessible and reduce the file sizes. Plus you can reuse them by just assigning the style in the class property. Add to that, the fact CSS styles can be stored in every document in an external file sheet. This provides better control and versatility.

CSS styles have 3 types; Custom CSS styles which creates a configured style and sets its characteristics, HTML Tag Styles which changes the format of a given tag and Advanced CSS Selector Styles which also configures the format but for a variety of fields –combination tags and ID attributes.

Here are instructions on how to create and apply CSS styles on Dreamweaver MX 6.0.

Creating a New Style Sheet together with a new CSS Style

  1. Begin by selecting Window from the menu bar then under it, choose CSS Styles and click on New CSS Styles which is characterized by the ‘+’ icon.
  2. From the pop up window that would appear, select Class from the Selector type. Then redefine the HTML tags using Tag Selector Type or Advanced Selector Type. This is used for hover, combination tags or id attributes.
  3. Name your new style after defining the style in the New Style Sheet. Then save it under the root files of your site. After that, click OK.
  4. On the pop up window that appears, configure the formatting attributes – fonts, background, list, etc...

How to apply the NEW Style

  1. To use the New style all you need to do is select and do a right click on any tag in the tag selector located at the bottom left corner of the Document window. For Set Class, just select bullet from the list.
  2.  Use styles by setting theclass propertyfor any tag (example: <ol class = "bullet">) typing the HTML code

Original Authors: Roz
Edit Update Authors: M.A.Harris
Updated On:
05/05/2009


Program Software Development © Globel Limited UK LOGON