This  style rule p { margin-bottom: 1em; margin-top: 1em; } added to your external style sheet, would add a top and bottom margin of 1em to ALL of your paragraphs.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus accumsan dolor ac orci? Pellentesque vitae libero in lacus tincidunt ultricies! Nam eleifend ultricies dui! Quisque mattis tempus ligula. Nulla non diam in arcu adipiscing porttitor. Nulla libero mi, suscipit id, semper eu, lobortis non, metus! Sed dui pede, consectetuer vitae, adipiscing et, posuere quis, nulla. Mauris ornare semper justo. Morbi at libero ut justo ultrices dignissim? Cras nunc. Sed metus quam, consequat vel, euismod et, pulvinar ut, sem. Vestibulum euismod massa posuere massa.

Example:

This style rule  p { margin: 50px;  } would add a top, right, bottom, and left,  margin of 50px to ALL of your paragraphs.

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

If you do not want the style rules to apply to all paragraphs within your site, then create a class and apply the class to the <p> tag.

Example:

p.smspace {margin: 2px 0px}

<p class=”smlspace”>Paragraph of text would go here.</p>

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

Experiment with the various styles you create to get the look you want.

1. Group your CSS files into a folder – Perhaps in additional to your main style sheet, you have one for print styles and one for your menu. Create a folder for all of your style sheets. Name it css or styles and make sure you save each of the style sheets within that folder. It may help you improved your website structure.
2. Use efficient selectors – Understand how browsers read your css selectors, from right to left. Note that the use of efficient CSS selectors is a nowadays requirement.
3. Comment and separate your CSS rules -  Do you remember what each of the style rules you created within your css are meant to be used for? Most style sheets contain some reset styles, styles for the header, navigation, content and footer. You can easily separate these and add comments to make them easier for you to work with. If you are using Expression Web and see a lot of style1, style2, style3, etc, etc, this is especially true.
4. Create a simple color scheme to use for your styles – Your css file may use a lot common styles and colors. A css comment as simple as
   /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
   can be helpful to you.
5. Use a meaningful naming convention for your selectors - An example might include #header for the container for your masthead. #header for the imageg that appears within the masthead OR #header .title and #header .tagline.
   
6. Create your own small CSS framework – By doing this you will be able to use these common CSS classes at any time for any elements from your markup.
7. Simple is better

Read 7 tips to organize your CSS complete with more examples.  And while you are there, explore some of his other articles  and tutorials.

NEW: From the Factory Tutorial — Today we are going to look at some tips and tricks you can implement when creating an (x)html & css template. Hopefully these tips will increase the overall quality of your templates.

1. Write clean code with consistent indentation – When writing your XHTML code, be consistent in the amount of spaces you use to indent the various lines. With Expression Web, you can set this under Tools > Page Editor Options > Code Formatting tab. Sent the number of spaces to be used for Indent. You should also limit the number of bank lines you use in between the lines of code.
2. Comments are your friend. Using comments is a good way to keep your code organized. From within Expression Web, you can use Code Snippets to insert comments into both your XHTML code and your CSS Code. Ian Hayes has also developed on add-in for Expression Web 4 Code Comment Add-In.
3. Use folders to organize your files – Rather than sticking all your files in the root directory of your website, create folders for your images, styles, and javascript files. I add the following folders to my websites for organizational purposes:
   1. images
   2. css
   3. js
   4. dwt
4. Write standards compliant code. Make sure to check and see if your XHTML code validates as well as your CSS. This will help ensure that your pages display as you expect in all browsers. Expression Web can help you do this by using the Compatibility Checker on Status Bar.
5. Use semantic code – HTML is used for writing the code, describing the content NOT for styling the content. The basic idea of semantic code is to write markup that describes your sites content. So instead of using <div class=”title”><strong>Title</strong></div> for the title of your page, use <h1>Title</h1> which is semantic markup.
6. Link to your CSS stylesheets in the head of the document. Create an external style sheet and link to it rather than embedding the styles in the head section of your page.
7. Put your JavaScript at the bottom. Placing your scripts right before your closing body tag will allow your sites content to load first, before your JavaScript is loaded.
8. Let Google host your JavaScript framework.
9. Don’t forget about Internet Explorer (Conditional Comments).

Read HTML / CSS Template Creation Tips and Tricks

Browser chrome refers to the borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars. When designing a Web page, the browser chrome must be added to determine the width of the page.

If you look at http://www.expression-web-tutorials.com/browser-chrome/ in both Internet Explorer 8 and Firefox, and Opera, you will see that each of them display a slight margin at the top of the page. This is because of the default setting for each of the browsers.

If I add to the body styles on the external style sheet

body {margin: 0px; padding: 0px; }

and view the same page again in all three browsers, you can see the difference.

http://www.expression-web-tutorials.com/browser-chrome/index-two.html

In all three browsers, the top of the masthead is now flush against the top of the browser.

CSS Reset

Adding {margin: 0px; padding: 0px; } to the body tag is referred to as CSS Reset or Reset CSS. Resetting your style or styles  is the process of resetting or setting the styles of an elements to a baseline value,  This allows you to  avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

CSS Reset is important because it removes inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to display differently across the various browsers. The reset can be as simple as setting the margins and padding for the body tag or more complex as the settings recommended by Eric Meyers in CSS Tools: Reset CSS

Each of the Site Templates offered by Migrating from FrontPage to Expression Web, makes use of the following CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
font-size: 100%;
}

You can read more about CSS Resets at:

• http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
• http://www.css-reset.com/
• http://www.vcarrer.com/2010/05/css-mini-reset.html

Example:

#outerWrapper {
	background-color: #fff;
	width: 80%;
	text-align: left;
	max-width: 1200px;
	margin: 20px auto;

}

Only one problem, Internet Explorer 6 and below does not recognize the max-width property. So I went searching with my friend Google and came up with a number of suggestions for fixes:

• Stu Nicholls | CSSplay | max-width for Internet Explorer IE6 -  a CSS only answer to ‘max-width’ for IE6.
• CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6
• Setting Maximum Width For Image In IE6, IE7 & Firefox ~ Mattias Geniar
• doxdesk CSS minimum and maximum sizes – This script makes these CSS properties work transparently in IE version 5.0 upwards on all platforms except Mac.

My choices seemed to be to use a simple “hack” to get it working, by using expressions (in javascript-like syntax) in CSS which Expression Web 3.0 did NOT like or javascript. I chose the latter and used the last one on the above list as it seemed to handle not only max-width, but min-width, max-height, and min-height. Of course, if the viewer has javascript disabled it will not work.

The three column template that is one of the three offered in this package looks like the image below and should display from 800x600px with no horizontal scroll and for higher resolution monitors will display at no wider than 1200px. A simple solution to a vexing problem.

So if you want to use a minimum or maximum width or height as part of your style sheet, you might give doxdesk CSS minimum and maximum sizes a try. Just download the minmax.js file and publish it to your server. Then add the following line of code to your DWT:

<script type="text/javascript" src="minmax.js"></script>

Make sure you adjust the path to the script to where you have published it to your server. My javascript files are located in a folder called js.

Misty Morn 3 Column Template.