Website Designing With CSS Made Easy

The concept of Cascading Style Sheets or CSS is the hottest one doing the rounds in the web designing circuit. Designing websites through CSS is much easier when compared to the earlier techniques but can be a little complex with so many features to use. With this write up, we hope to simplify all the issues that Web Designers come across and make web designing with this advanced tool an excellent experience.

• Keep It Simple To keep a proper format, use HTML body style for all pages. This not only makes things easier but also makes the page compliant with the set standards. Also, keep the body tag plain i.e. without any special classes etc. HTML style: {Margin: 0px; Padding: 0px; Border: 0px}
• Absolute Positioning For Absolute Positioning you must keep the container div as position:relative, while the position:absolute; should be kept for the element inside the container. This makes it easier as now you just have to position the element in relation to the parent div by adjusting the co-ordinates.
• Bullet Points Using Background Images A better way for handling Bullet points is to use a non-repeating background for the list in place of the list-style-image. You can later declare the needed gap by padding. With this, there is an added advantage of getting a cleaner finish as the lines following this text in the list item will be padded in the same way. But you should still take care to remove the list image which is default, using the following snippet: List-style-type:none;
• Don't Over Use Classes Use classes judiciously and keep the clutter out. You can do this by separating the site into different sections of div id's and have various tags for styling within the div. The following snippet illustrates this: #news-column h2 {font-weight:bold;}
• Reset Your CSS To avoid having to reset each element separately as you go, you should use a basic reset operation at the starting itself. Another handy tip to avoid various browsers from interpreting default margins and padding is to manage the stylesheet coding with this: * {padding:0; margin:0;}
• Use Shorthand CSS Brief coding in CSS not only decreases the file size but also improves the efficiency and speed of the coding, resulting in faster execution. You can do the following for the same:
  • You can merge #box p {margin-top:5px; margin-right:10px; margin-bottom:5px margin-left:10px; } Into #box p {margin:5px 10px 5px 10px; }
  • Or you can combine view sourceprint? With #box p {margin:5px 10px; }

Using these handy tips, your websites will look much cleaner and have a smarter appearance while loading properly as well. In addition, the whole experience of designing with CSS becomes much more interesting as you use lesser efforts and get better results.