<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://unfoldingneurons.com/"
	>

<channel>
	<title>Web Design Tutorials &#187; Design the CSS Style Sheet in Dreamweaver CS4</title>
	<atom:link href="http://bestwebdesignz.com/tips/tag/design-the-css-style-sheet-in-dreamweaver-cs4/feed/" rel="self" type="application/rss+xml" />
	<link>http://bestwebdesignz.com/tips</link>
	<description></description>
	<lastBuildDate>Mon, 23 Apr 2012 11:48:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Design the CSS Style Sheet in Dreamweaver CS4</title>
		<link>http://bestwebdesignz.com/tips/dreamweaver/design-the-css-style-sheet-in-dreamweaver-cs4/</link>
		<comments>http://bestwebdesignz.com/tips/dreamweaver/design-the-css-style-sheet-in-dreamweaver-cs4/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 09:19:06 +0000</pubDate>
		<dc:creator>clement</dc:creator>
				<category><![CDATA[Dreamweaver]]></category>
		<category><![CDATA[Design the CSS Style Sheet in Dreamweaver CS4]]></category>
		<category><![CDATA[Dreamweaver CS4 Tutorials]]></category>

		<guid isPermaLink="false">http://bestwebdesignz.com/tips/?p=517</guid>
		<description><![CDATA[Now it is time to specify the styles for your header div tag. In the screen that opens. Select &#8216;Background&#8217;. Browse the header background image. Select &#8216;Box&#8217;. For the Width, type &#8217;100&#8242; and select &#8216;%&#8217; from the drop down. For the Height type &#8217;94&#8242; and select &#8216;px&#8217; from the drop down. Click ok. You will [...]]]></description>
			<content:encoded><![CDATA[<p>Now it is time to specify the styles for your header div tag.</p>
<ul>
<li>In the screen that opens. Select &#8216;Background&#8217;. Browse the header background image.<br />
<img class="alignnone size-full wp-image-518" title="header-css" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/header-css.gif" alt="Design the CSS Style Sheet in Dreamweaver CS4" width="505" height="393" /></li>
<li>Select &#8216;Box&#8217;. For the Width, type &#8217;100&#8242; and select &#8216;%&#8217; from the drop down. For the Height type &#8217;94&#8242; and select &#8216;px&#8217; from the drop down. Click ok.<br />
<img class="alignnone size-full wp-image-521" title="header-css-box" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/header-css22.gif" alt="header-css-box" width="505" height="393" /></li>
<li>You will come back to the &#8216;Insert Div tag&#8217; screen. Click OK.</li>
<li>In your template page you will see the &#8216;header&#8217; div displayed with the background image and the height/width specified in the css style sheet.<br />
<img class="alignnone size-full wp-image-523" title="template-div-css" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/template-div-css.jpg" alt="Design the CSS Style Sheet in Dreamweaver CS4" width="505" height="191" /></li>
</ul>
<p>You will see that there is a white margin around the &#8216;header&#8217; div. This is because html pages have a default margin/ padding. To remove this we will give new properties to the &#8216;body&#8217; tag within the css stylesheet. To do this:</p>
<ul>
<li>Bring up the &#8216;CSS Styles&#8217; panel [Window &gt; CSS Styles]</li>
<li>Click the &#8216;New CSS Rule&#8217; icon at the bottom.<br />
<img class="alignnone size-full wp-image-524" title="new-css-rule" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/new-css-rule.gif" alt="Design the CSS Style Sheet in Dreamweaver CS4" width="364" height="441" /></li>
<li>Choose the following:<br />
- Selector type: Tag<br />
- Selector Name: body<br />
- Rule Definition: styles.css<br />
Click OK<br />
<img class="alignnone size-full wp-image-525" title="body-tag-css" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/body-tag-css.gif" alt="Design the CSS Style Sheet in Dreamweaver CS4" width="364" height="433" /></li>
<li>In the CSS Rule Definition screen that opens, select Box and type &#8217;0&#8242; for both Padding and Margin. Click OK.<br />
<img class="alignnone size-full wp-image-526" title="body-css" src="http://bestwebdesignz.com/tips/wp-content/uploads/2009/04/body-css.gif" alt="Design the CSS Style Sheet in Dreamweaver CS4" width="503" height="282" /></li>
<li>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.</li>
</ul>
<script type="text/javascript"><!--
                    google_ad_client = "pub-7099335855422733";
                    google_ad_slot = "4729128935";
                    google_ad_width = 336;
                    google_ad_height = 280;
                    //-->
                    </script>
                    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
                    ]]></content:encoded>
			<wfw:commentRss>http://bestwebdesignz.com/tips/dreamweaver/design-the-css-style-sheet-in-dreamweaver-cs4/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<series:name><![CDATA[Dreamweaver CS4 Tutorials]]></series:name>
	</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.355 seconds -->

