Dreamweaver CSS Styles Tutorial

Written by Rachna

Learn how to use CSS Styles to format text in your web site. Cool tips included.

CSS Styles are the easiest and best way of formatting text in a web site. Instead of using 'font' tags for each paragraph and cluttering your HTML code with endless font tags you can simply make a style with the a specified font type, size and color and use it throughout the site. Styles can be used in tables, rows, cells and even more interestingly it can also be used for form objects. The possibilities are endless when you use style sheets. We'll discuss the various ways you can use styles in this tutorial.

The first step is to learn how to create a style sheet

Here's how you create styles in Dreamweaver. Simply follow these steps: Open the CSS Styles palette by clicking on Window>CSS Styles Click on the '+' icon to create a new style. You'll get the pop-up box as shown on the right. Write the name of your style e.g. 'text', choose 'Make Custom Style' and click OK. Now create your own custom style giving by choosing the font type, size, weight, color etc. Click on Ok. You have successfully created a style. Repeat these steps to create more styles for titles, subtitles, links etc.

Applying styles to text

Once you have completed creating your styles you can apply the style to your text. All you need to do is select the text and click on the style in CSS Styles palette.

HTML Code: While using styles you have to set a 'class' e.g. <td class = "text">. Here, all the contents of the cell will take on the style called 'text'.

Cool CSS Style Tips!

• Use the a:hover attribute to make cool text rollovers. Learn more
• Remove the underline in links by using the attribute 'none'. Learn more.
• Customize form objects by giving them a background color and font. Learn more.
• Try out the 'Line Height' properly in your style to give more space between lines.
  
• Apply the default text style to the the table cell. All the text within the cell will automatically take the default font. The code will look like this: <td class="Name of Style">
• It would be better to link your pages to an external style sheet rather than creating a style within a particular document. If you ever need to change a commonly used font you'll only have to change it in the style sheet and the change will automatically be reflected in all the documents that use that style.

Social Bookmarking