Writing CSS can be a pain and can give you headaches. The truth is that CSS ain’t rocket science and you should just have in mind some CSS pieces of code (snippets) you can use everytime.
In the following rows I’ll try to present you some important snippets I often use in my project and I hope these will help you too.
1. CSS Reset
The best way to start a CSS file is to choose a CSS reset method from a various list of existing ones.
2. Clear floated elements without any extra markup
border-radius instead of
Since Chrome and Safari began to use border-radius property, you no longer have to use -webkit-border-radius anymore. So, for your rounded corners just add:
4. CSS3 Box-shadow, text-shadow, gradients and transform properties
Define complex box shadow declarations so you can tune up your website:
Text shadow as a 1px white stroke effect:
Nice gradients using CSS:
Use CSS transform for hover effects:
5. Image replacement technique
This CSS technique is very common and easy to use, you can keep text for search engines and also style the element as you wish by adding an image instead. Here you have a quick example:
6. Centering a div of unknown width
Here’s the simple CSS for that:
The main advantages of this method
- It’s valid
- and it’s also a cross-browser solution
A disadvantage would be the fact that includes extra HTML markup and you should consider that before using it.
7. Advanced selectors
You may use these selectors to target easier your elements like text inputs or to style links to pdf files for example:
The IE6 browser threats last declaration like min-width.
9. Fix IE6/7 double margin/padding bug
This problem appears when a left/right floated elements has a margin/padding value defined. To fix that just target these browsers as you earlier learned in this article and add “display: inline” declaration.
Note that you can use these IE6/7 hacks or you can use conditional comments.
10.The font shorthand
As always this is very handy as it merges multiple lines of code.
11.Change text selection style
If your get tired of the default blue background selection and white text when you highlight text on a browser then you can try the following.
These are just some example I had in mind at the time I wrote this article but for sure there are a lot of CSS snippets worthy to mention about, let me know which one you use from this list and not only.
How to fix wrapping text around floated elements
Feature table design with CSS3