Dreamweaver ® Tutorial

Tag Styles

There are different types of styles: Class, Tag and Css selectors. There are 3 places that styles can be positioned: inline, in the head section and as an external linked file. This tutorial will show you how to change the default style of the links on one page (Redefine the a tag). You can watch a movie demo here: click

  • Type the word you want to make into a link.
  • Highlight it and type the URL you want to go to in the Link box in the Properties Box.
  • Click on the Design drop down arrow
  • Click the +
  • Select as shown below:

  • Click OK
  • Choose the style you want. If you want to remove the underline from your links then select none.
  • Click OK.


Linked Styles

  1. We are going to make a CSS file which we can use to apply a style to all the text that has the Heading 1 formatting on different pages that we make.


  2. Create a new page or open one that you want to attach a style to.







  3. In the CSS Styles task pane, click + to add a new style. You want to make it a separate file so select new Style Sheet File.


  4. Give your new file a name and make it relative to the Site Root.



  5. Choose the formatting you want for your size 1 headings.


  6. Now if you check the code you will see this code: <link href="/heading1_style.css" rel="stylesheet" type="text/css">


  7. This links to a new CSS style which has been created in your site folder.



  8. Now go back to the design view and type in the words you want for your heading.


  9. Select the text.


  10. Choose H1 from the Format dropdown list.


  11. Notice how the heading automatically changes. The style has been applied.


  12. You can now attach this style to any page where you want the same style headings for your H1 formatted text, by clicking the Attach Style Sheet icon (or right click on the page for options).


  13. You can edit the style and add more styles for other tags by opening the page (double click on it in the file list) and clicking on the Edit Style Sheet icon.

 

Class Styles
The benefit of a Class style is that you can select the area that you want to apply the style to.

  1. Create a new page or open one that you want to apply a class style to.
  2. In the CSS Styles task pane, click + to add a new style.
  3. Give your class a name. I have called this class happy
  4. Choose Class (can apply to any tag) and This document only unless you want to put the style into a separate CSS file and link it.
  5. Choose the formatting you want for text.
  6. You can now attach this style to any text on your page by selecting it then right click. Choose CSS Styles and click on the one called happy.
  7. You can also click on it in the CSS Styles panel.
  8. In some versions of Dreamweaver, when you double click on the style the box will open and you can edit it. In others you select the Edit Styles radio button.