1. Not Using a Proper CSS Reset

Web browsers are our fickle friends. Their inconsistencies can make any developer want to tear their hair out. But at the end of the day, they’re what will present your website, so you better do what you have to do to please them.

One of the sillier things browsers do is provide default styling for HTML elements. I suppose you can’t really blame them: what if a “webmaster” chose not to style their page? There has to be a fallback mechanism for people who choose not to use CSS.

In any case, there’s rarely a case of two browsers providing identical default styling, so the only real way to make sure your styles are effective is to use a CSS reset.

What a CSS reset entails is resetting (or, rather, setting) all the styles of all the HTML elements to a predictable baseline value. The beauty of this is that once you include a CSS reset effectively, you can style all the elements on your page as if they were all the same to start with. It’s a blank slate, really.

There are many CSS reset codebases on the web that you can incorporate into your work. I personally use a modified version of the popular Eric Meyer reset and Six Revisions uses a modified version of YUI Reset CSS. You can also build your own reset if you think it would work better.

What many of us do is utilizing a simple universal selector margin/padding reset.

* { margin:0; padding:0; }

Though this works, it’s not a full reset. You also need to reset, for example, borders, underlines, and colors of elements like list items, links, and tables so that you don’t run into unexpected inconsistencies between web browsers. Read more…

• Top Useful CSS Tips For Beginners
• Top 15 CSS articles
• 150 CSS Examples
• How to design css sitemap Tree
• CSS tricks
• Write a CSS Syntax
• How CSS3 works
• Benefits of CSS
• What it’s all about CSS3
• CSS QUOTES

1. Use Reset.Css

   When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

   Here are few commonly used reset.css frameworks - Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Use Shorthand CSS

   Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all - it makes the code clearner and easier to understand.

   Instead of creating CSS like this

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background-color: #fff;  
   3.       background-image: url(image.gif);  
   4.       background-repeat: no-repeat;  
   5.       background-position: top left;   
   6.     }  

   It can be short-handed into the following:

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background: #fff url(image.gif) no-repeat top left  
   3.     }  

   More - Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Understanding Class And ID

   These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

   More - Class vs. ID | When to use Class, ID | Applying Class and ID together

4. Power Of <Li>

   <li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>, particulary to style a navigation menu.

   More - Taming Lists, Amazing LI

5. Forget <Table>, Try <Div>

   One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>’s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

   More - Tables are dead, Tables Vs. CSS, CSS vs tables

6. CSS Debugging Tools

   It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, andFirebug.

   Read more…

   

   • Top Useful CSS Tips For Beginners
   • Organizing Your CSS Files
   • 100 CSS Examples and Tutorials
   • 150 CSS Examples
   • Top CSS Tips
   • Introduction to CSS3
   • Margins and Absolute Positioning
   • Top reasons sites break in IE 7
   • Write a Clean CSS
   • How to design css sitemap Tree

    

First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an empty keyword that clips out the middle part. B) Make the middle part clip out by default. Add afill keyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?

Second Issue: The syntax is particularly arcane. One commenter suggested breaking up border-image into multiple properties, leaving border-image itself as a shorthand. For example,

border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;

would be equivalent to

border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;

This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand? Read more…

• No Related Post