When starting coding a Photoshop layout or whenever you work for something, you should always be aware of some CSS tips that will make your life easier.
1. Place CSS in a separate file
When you’re working with CSS code you should always use an external file to load CSS from. It’s very important to have your project files well organized and this helps you doing that.
2. Reset CSS
You need to reset CSS because as you’ve seen, browsers assign different styles to some elements and the best approach is to clear(reset) all styles from the beginning. In this way you’ll be sure you made a good start.
The best method I know since I work in this area is the Eric Mayer’s Css Reset method .
For those of you who think his method is too complex I suggest you to create your own reset method. You can start by resetting the elements you think you’ll use most like in this example:
body, div, h1,h2, h3, h4, h5, h6, p,ul
{
margin: 0;
padding: 0;
}
3. Always style inputs
There is no reason why you must use the predefined styles for the inputs, so always try to customize the inputs. If you don’t do that you will experience different looks for different browsers.
4. Use CSS comments
This is a good way to organize your code and you should do that especially when you have more than let’s say 100 css lines.
p
{
margin: 10px 0;
}
/*This is a css comment*/
div
{
height: 20px;
}
5. Center horizontally
Here you can see how to center horizontally an inline element:
text-align: center;
To center horizontally a block element you must set the width for it and also auto for the left and right margins:
width: 200px; margin: 0 auto;
6. Use inline and block elements correctly
This mean it’s recommended for you as a designer/developer to use the block elements like “div” when you need a block element and not use a “span” element for example with “display: block” style. This is available also for the inline elements like “b” or “i”, they must be used as inline elements when possible.
7. CSS text-transform property
Avoid writing with capitalized letters and use instead the text-transform property to do that:
text-transform: uppercase;
8. Background sprites
Using sprites avoids causing flickering when using hover effects, try using all the time this technique because it’s awesome.
Two excellent articles about CSS background sprites I’ll recommend are alistapart.com article and the smashingmagazine.com one.
9. Font properties in one declaration
Instead having these three four lines declaration block:
font-family: Arial; font-size: 12px; font-weight: bold; line-height: 20px;
you can use this single line declaration:
font: bold 12px/20px Arial;
10. Validate, validate and validate again!
You must always validate your css code to be sure that your code is W3c valid. A valid code means a good developer.
What other CSS tips you are using that are mandatory in your design/development?
If you enjoyed this article, you might also like:
Great advice.
Looking forward to see a list with Css techniques that we shouldn’t use.
Thanks!
your quick clean uncomplicated tutorial style is appreciated ….keep the css and photoshop tricks coming …
Thanks, I am glad you found this article useful.
I can’t agree less with #10…
Valid code is over rated. Sure it looks nice to see your code validate, but it doesn’t make a difference to the user of your webdesign. Often you have to write invalid code to make your design cross-browser using unofficial properties and hacks (ie. _background:red; to target <IE6).
So no valid code does NOT mean a good developer, but a developer too caught up in validations.
The same applies for HTML validations.
For #9 you might mention as well that you can include line-height in the font shorthand like this:
font-family: Arial;
font-size: 12px;
line-height:1.29;
font-weight: bold;
font: bold 12px/1.29 Arial;
The whole specification can be found here: http://www.w3.org/TR/CSS2/fonts.html#font-shorthand
Cheers,
Emil Melgaard
Tixz
Thanks for your comment Emil!
Indeed, sometimes you must use hacks for IE, OR you can use conditional comments for it and you can keep your main CSS valid.
Regarding the #9 I’ve probably missed that at the time I wrote this article, thanks for pointing this, I updated that.
Good tips. I have problems with validation. I forget to do that. Sometimes i am just happy that everything works and don’t want too see all those errors that validation will show me :).
I think the more experience you get the more you start thinking about accuracy of your code.
Exactly, as you become more experienced, you will commit increasingly less mistakes when writing HTML and CSS code.
At a time, validating code will be just for fun, to see that everything is correct.
Question for you about tip #1. When you install new plugins on your WordPress do you move code from external stylysheets to your main style.css?
When it comes about WordPress plugins, I personally prefer to install/uninstall a plugin without manually add/remove styles. Now it’s up to you if you can live with 1-2 extra HTTP requests :)
why W3C doesn’t recognize border-shadow and transitions, since they take a real action in most browsers they gonna appeal in the court to get their rights and to be well-known, and respect by others as well….!o!