Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Dreamweaver Tutorials > Dreamweaver CSS Styles Tutoriall  


Featured Fireworks & Dreamweaver Template

Learning Template 9
Learning & Education

Dreamweaver CSS Styles Tutorial

Written by

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:

  1. Open the CSS Styles palette by clicking on Window>CSS Styles
  2. 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.
  3. 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.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

Looking for high-quality Website Design? Choose from over 60000 templates!

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver


Best Wordpress Themes of 2017

best wordpress themes of 2017

Featured Template
Template # 58987
Type: WordPress
Price: $75