Category «CSS»

How to remember CSS Shorthand properties

Using margin or padding properties of CSS in the following syntax is straight forward. { padding-top:5px; padding-right:12px; padding-bottom: 15px; padding-left: 20px; } But the shorthand version of these properties may be a little difficult to remember for CSS beginners. The above CSS declaration can be written as; {padding:5px 12px 15px 20px;} Now how do you …

Reset CSS: A simple solution to browsers’ inconsistencies.

One of the challenges web designers face is to get various web browsers render their web pages in a consistent manner. The reason is every browser assigns slightly different default styles to certain page elements. A simple approach to handle this cross-browser inconsistency is to overwrite browsers’ default styles. This technique is known as resetting …

Make your stylesheet a work of art.

Jina Bolton at Vitamin.com has an excellent post for all CSS developers. She described how you can write well structured stylesheets which are more efficient and easy to maintain. Some of the tips may look intuitive but many times we all need reminder to get the basics right. In my experience lot of developers do …

CSS Rounded Box Generator

A nice little tool to create rounded boxes for your website. You can choose the background color for your box. The tool will generate the CSS code and a sample HTML page. Generating rounded-box has never been easier. CSS Rounded Box Generator

Creating Cross Browser Compatible CSS Text Shadows

Sometimes it is nice to jazz up your website by giving text some graphical looks without actually using images. The CSS2 text-shadow property allows you to create shadow for your text. Unfortunately so far the only browser that supports this property is Safari. You can find tutorials on the web that show you how to …

Dynamically Resize Text

CSS, combined with little JavaScript, offers great flexibility to web designers. For instance, let say you want to allow visitors to change text size on your website. Now how do you do it? Using CSS is the easiest solution. All you need is few style sheets and a JS script to dynamically enable those style …

Cascading Style Sheet Cheatsheet

If you need quick reference CSS guide, look no further. This CSS cheat sheet is a comprehensive list of all CSS properties. Accompanying brief explanation adds value to this cheat sheet. You may want to bookmark this page. Cascading Style Cheatsheet