’s cell. It’s safe to say most and proper styling, well maybe except massive tabular contents. More - Tables are dead, Tables Vs. CSS, CSS vs tables 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, and Firebug. 
Avoid Superfluous Selectors Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following: -
ul li { ... } -
ol li { ... } -
table tr td { ... }
They can be shorten down to just Explanation: will only exist within Knowing !important Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it. - .page { background-color:blue !important; background-color:red;}
.page { background-color:blue !important; background-color:red;} In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer. Replace Text with Image This is commonly practice to replace title from a text based title to an image. Here’s how you do it. - h1 {
- text-indent:-9999px;
- background:url("title.jpg") no-repeat;
- width:100px;
- height:50px;
- }
h1 { text-indent:-9999px; background:url("title.jpg") no-repeat; width:100px; height:50px; } Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height. Understand CSS Positioning The following article gives you a clear understanding in using CSS positioning - position: {...} More - Learn CSS Positioning in Ten Steps CSS @import vs There are 2 ways to call an external CSS file - respectively using @import and More - Difference Between @import and link Designing Forms in CSS Web forms can be easily design and customize with CSS. These following articles show you how: More - Table-less form, Form Garden, Styling even more form controls 
Get Inspired If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend: 
Need more? Here’s a round up of 74 CSS Galleries. This following article gives you an idea how to create cross-browser compatible rounded borders with CSS. 
Keep CSS Codes Clean If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly. More - 12 Principles For Keeping Your Code Clean, Format CSS Codes Online Typography Measurement: px vs em Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units. More - Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts CSS Browsers Compatibility Table We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser. CSS support table: #1, #2, #3, #4. 
Design Multicolumns in CSS Having problem getting the left, middle and right column to align properly? Here are some articles that might help: 
Get a Free CSS Editors Dedicated editors are always better than a notepad. Here are some we recommend: More - Simple CSS, Notepad ++, A Style CSS Editor 
Understanding Media Types There are few media types when you declare CSS with More - CSS and Media Types, W3 Media Types, CSS Media Types, CSS2 Media Types | 
Under Create Tab, click on the Text button.
Write a text watermark. Click Add. You can further customize the font type, style, size, color and opacity.
Your watermark will now on the photo. Drag to reposition wherever you like. Hit the Save button, fill up the necessary description and settings and your Flickr image now comes with a watermark whenever it’s displayed.
