Expression Web Tips

Cascading Style Sheets – or CSS for short – allows web designers to separate the presentation of their sites from the content. CSS can be used to style any element of your page or place the elements on the page.

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is only as good as the principles that are being followed by the designer creating the code.

While you may think that anyone can crank out CSS, there is a big difference between writing CSS and producing top notch CSS.

To ensure that you are on the right track, here are eight CSS principles that every web designer should be following.

Are you following these principles for CSS?

1. Take the Time to Validate – Many of us take the time to validate  our HTML/XHTML code BUT do we do also validate our cascading style sheets? Is the doctype you use up-to-date and correct?
2. Document (but not in your code) – Adding comments to your style sheets will help you understand why you did what you did a week or a month from now. It will also help if someone else needs to take over the project at a later date. Adding comments directly to your CSS code will increase the size of the file and, as a result, increase load time. To avoid this, comment your css in a separate file.
3. Say No to Hacks
4. Don’t Abuse Divs – Use the appropriate HTML tag instead of automatically creating a new div.
5. Put Thought Into Your Class Names -
6. Embrace Shorthand
7. Don’t Forget About Printers – It’s important to use CSS to make your content printer friendly.
8. Never Stop Learning – continue to work on learning more about css.

Read Are You Following the Principles of Top Notch CSS Design? in its entirety.

Browser chrome does NOT refer to Google’s addition to the browser market – Google Chrome.

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