Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the [...]]]> Found this interesting and informative post on the Six Revisions blog which is part of his CSS Tips series.

Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the element.  Presentational naming describes the location and/or appearance of web page elements.

The post discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.

First he gives an example (1) of a presentational naming layout and then discusses what is wrong with this approach. The presentational naming layout inlcudes:

• #top-div
• #left-col
• #right-col
• #bottom-div

The next example (2) uses a structural naming convention and includes the following:

• #header
• #main-content
• #secondary-content
• #footer

Example 3 really uses structural naming conventions which includes:

• #branding
• #main-content
• #secondary-content
• #site-info

The last example,using  fully-structural in naming conventions,  describes what the div’s and other elements are for, instead of where they are or how they look.

The second part of the post offers a few guidelines which include:

1. When assigning a class or id, ask yourself “What is this element for?”
2. Avoid using names that rely on locational or visual aspects of the particular element.
3. Use names that are intuitive to you.

He also includes some Further reading resources on this same topic:

• Structural Naming
• Standardizing CSS class and id names
• Build for the Future: Bend, Don’t Break

You can read  CSS Tip #2: Structural Naming Convention in CSS in its entirety.

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is [...]]]> 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 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 [...]]]> 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

The CSS box model lies behind everything you do in CSS. Every element is defined by a rectangular box that encloses that element. Understanding how the box model works is a key to understanding CSS and having greater control over your layout and presentation. . . . .In nutshell, the box [...]]]>

CSS Box Model Illustration

The CSS box model lies behind everything you do in CSS. Every element is defined by a rectangular box that encloses that element. Understanding how the box model works is a key to understanding CSS and having greater control over your layout and presentation. . . . .In nutshell, the box model in CSS describes the boxes which are being generated for HTML-elements. ~ Steven Bradley ~

Details covered in the article include:

• What is the CSS Box Model?
• Differences Between Block Boxes and Inline Boxes
• Floats, Positioning, and the Normal Document Flow
• Calculating the Widths and Heights of Boxes
• Issues with IE6 and the Box Model

Read  CSS Box Model: The Foundation For Improving Your CSS and you will learn the tips and techniques for working with the CSS box model.

Additional Resources for Understanding the CSS Box Model

• Interactive CSS Box Model Demo
• The Box Model
• The CSS Box Model by Chris Coyier
• CSS Box Model by W3Schools
• Escaping the Box Model
• <!Doctype html> & IE Box Model by Barry Carlson

If you are using Expression Web, you will see an example of the css box model reference in the Modify Style or New Style Dialog Box when you select the Box category.

Expression Web CSS Box Model Reference.

Sometimes it’s the little things that can make all the difference and there are plenty [...]]]> I’m always on the lookout for CSS Tips that might help you with your site design and make your work a little simpler. Simple CSS Tips that Go a Long Way has a few suggestions you might want to try out.

Sometimes it’s the little things that can make all the difference and there are plenty of neat little CSS tips that can help with all aspects of design and development. Here are a few great tips that will help you improve your CSS work and help you get the most out of your code.

Included are the following:

1. Reset Browsers’ Default Styling  – many of the F REE Expression Web DWT’s that I offer are based on Eric Meyer’s CSS Sculptor for Expression Web and make use of Eric Meyer’s Reset CSS
2. CSS Cursor Tip
3. CSS Sprite Images
4. Focus States for Form Fields
5. Useful Comments
6. Center Elements Horizontally
7. Override Inline Styles
8. Easily Find Elements to Fix Problems
9. Print Style Sheet

You can read Simple CSS Tips that Go a Long Way by Tom Kenny in its entirety and get the css for each of the suggestions listed above to try out on your own site.

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general [...]]]> Smashing Magazine is a great online resource. Todays offering is Mastering CSS Coding: Getting Started.

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.

Covered in the article are:

1. Padding vs. margin
2. Floats
3. Center alignment
4. Ordered vs. unordered lists
5. Styling headings
6. Overflow
7. Position

Once the basics are covered, they add some enhancements:

1. Background images
2. Image enhancement
3. PSD to XHTML

Read Mastering CSS Coding: Getting Started complete with examples.  If you are a beginner using CSS and Expression Web, this may help you to better understand the styles created.

You can [...]]]> One question that seems to reappear again and again is “How can I center my table or div on my page?” It’s really fairly simple. First remember:

• Use a valid doctype on your page
• The <table> or <div> has to have a width less then 100%
• The left and right margins need to be set at auto

You can read a more detailed tutorial Center Pages in Browser Window