CSS is a fantastic tool that has made creating websites infinitely easier and more interesting since its introduction. (Does anyone remember the bad old days of the 90s?) But with such a huge scope offered by CSS, even people who might consider themselves experts on the subject might still not be aware of these few handy tips and ways of working with it. There may be some items on this list of tips to make CSS coding easy that might surprise even the most experienced users.
10. Master Stylesheets
Perhaps the most common mistake that rookies, novices, and experienced users—even people who might consider themselves well-versed in CSS—make is not removing the default browser styling. This leads to inconsistencies in the styling and appearance of any website when viewed on different browsers. It's easy to blame the various software, but it's usually just a case of not resetting the default styling.
Using !important to mark any style means that it will be used regardless of any overwriting or conflicting message further down the code. This is great way of forcing a style without overwriting it with something else. However, be warned that it might not work with Internet Explorer.
8. Organize using flags
Your stylesheet should ideally be divided into specific sections, that is, Global Styles, Header, Page, Structure, Headings, Text Styles, Navigation, Forms, Comments, and Extras. By dividing it up logically like this, it is much easier to find the various bits of code when you need them.
7. Isolating your most-used properties
If you use a single property style over and over again, you can save yourself from needless repetition (and RSI) by isolating the property. This also enables you to change the display of all parts of the site that use it.
6. Covering all the bases by defining generic font families
This one gets missed a lot. When you decide on a specific font for the website, you are relying on the user having that font installed. This is less a tip, and more of good coding practice, but when you remember to define font family hierarchies, it can add a level of professionalism to your code that is easy to spot.
5. Adding CSS-styling to RSS-feeds
Obviously XSL stylesheets are much more powerful, but CSS can be a lot less scary for the non-technical crowd.
4. Adding a print style
You can add print stylesheets in exactly the same way as a regular stylesheet. The benefit here is the ability to remove extraneous features to allow printing without affecting the style of the display when on screen.
3. Force IE to make PNGs transparent
For people still using IE6 this could be an important fix that allows PNG to support varied levels of transparency.
2. CSS Browsers Compatibility
Of course, in an ideal world, people wouldn't be using browsers from the Internet's dark ages. However, code can be changed easier than people so it’s useful to have a couple of crib sheets for CSS compatibility. Find them here, here, here and here.
1. The most important tip
The most important tip is to just play with code as much as possible, try different combinations, mess around with floats and inheritance rules, and above all, learn from others. When you see something good on a page you've visited, check the source code to figure out how it was done and apply it to your own work in the future.