Design the CSS Style Sheet in Dreamweaver CS4

Need a Website? Contact Us Now!

This entry is part 5 of 19 in the series Dreamweaver CS4 Tutorials

Now it is time to specify the styles for your header div tag.

  • In the screen that opens. Select ‘Background’. Browse the header background image.
    Design the CSS Style Sheet in Dreamweaver CS4
  • Select ‘Box’. For the Width, type ’100′ and select ‘%’ from the drop down. For the Height type ’94′ and select ‘px’ from the drop down. Click ok.
    header-css-box
  • You will come back to the ‘Insert Div tag’ screen. Click OK.
  • In your template page you will see the ‘header’ div displayed with the background image and the height/width specified in the css style sheet.
    Design the CSS Style Sheet in Dreamweaver CS4

You will see that there is a white margin around the ‘header’ div. This is because html pages have a default margin/ padding. To remove this we will give new properties to the ‘body’ tag within the css stylesheet. To do this:

  • Bring up the ‘CSS Styles’ panel [Window > CSS Styles]
  • Click the ‘New CSS Rule’ icon at the bottom.
    Design the CSS Style Sheet in Dreamweaver CS4
  • Choose the following:
    - Selector type: Tag
    - Selector Name: body
    - Rule Definition: styles.css
    Click OK
    Design the CSS Style Sheet in Dreamweaver CS4
  • In the CSS Rule Definition screen that opens, select Box and type ’0′ for both Padding and Margin. Click OK.
    Design the CSS Style Sheet in Dreamweaver CS4
  • You will see that the header is now sticking to the top, left and right of the screen in template.dwt. The deafault margin and padding has been removed.
Series Navigation«Design your template in Dreamweaver CS4Insert Images in Dreamweaver CS4»
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • E-mail this story to a friend!
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati

Tags: ,
Posted in Dreamweaver | 1 Comment »


One Response to “Design the CSS Style Sheet in Dreamweaver CS4”

  1. By Aniket on Nov 26, 2009 | Reply

    Thanks for This information

Post a Comment


online pharmacy usa