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

 

Featured Fireworks & Dreamweaver Template

Beauty Template 8
Beauty Template
Inner Page Design
$59.95

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:

  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 58000 templates!

create a free html5 website

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

responsive_website

Best Website Templates of 2015

best website templates

Featured Template
Template # 59438
Type: Moto CMS 3 Templates
Price: $199