Cascaded Style Sheets (CSS) are used for formatting the various web objects in the web page. Usually the tags for formatting the text, font type, and color, size of the web pages' form, tables and other objects are specified within the main HTML body. This creates a lot of over head in the editing and updating process. Also the code will be bulky. CSS eliminates these problems by separating the formatting codes from the HTML code and keeping it separately as style sheets in CSS files. With CSS the job of text formatting, size, shape, type, color of the various elements in forms can be changed in an efficient way. Also we could change the style sheets to change the overall style of the web page; Thus CSS styles creation is an easier way to stylize your site. With Dreamweaver the creation of CSS style sheets have become more and easier to every designer. This tutorial will teach you hoe to create CSS Styles in DreamweaverMX.

Cool Steps for creating CSS style

1. Create a new CSS style by opening the CSS styles palette (Press Windows>CSS styles) and Pressing the '+'button. Name the CSS style and choose 'Make Custom Style' as its behavior and click OK.

   

2. In the style definition window for the new CSS style you created you could specify the font size, type, color etc and click OK. You have successfully created your new CSS style. For each type of items like titles, subtitles and links you could create separate CSS style sheets.
3. It won't be useful unless you apply the CSS style you created applied to the web objects. We will now look into the simple procedure of applying the CSS style to text. Select the text you want to apply the CSS style. Click on the text and select the CSS style you would like to add from the CSS Palette and Click OK. You have added a CSS style to the text. Note that while using styles set the class. The sample HTML code for this will look like



 

<td class = "text">

 

4. Some more tips related to CSS styles are given below.
5. Customize the form objects by giving a background color and font. Use a: hover attribute for making text rollovers. Create line-less links by using 'none' attribute. To know more about text rollovers, lineless links and customizing form objects see our Dreanweaver tutorials
6. For more spacing set the 'Line Height' accordingly in your style. The entire test within the table cell will be taking the default font if the text style applied to the cell is default. And most importantly link you web pages with external CSS styles to enhance better editing and updating. If you need to change the style you could simply change the CSS style and all the related documents' style will be changed.