WeblinkIndia logo
+91-9319740538 Get a Call BAck

Website Designing With CSS Made Easy

Web Design | Admin | Last Updated: 2011-03-28

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.

Add a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

How a Dynamic Website Can help your business to grow? [thumb]

How a Dynamic Website Can help your business to grow?

Web Design | Aug 02, 2021

After the World Wide Web went live to the world on 6th August 1991, businesses soon started to realise the fact that ...

Read Full Story


Why Choose Static Website? [thumb]

Why Choose Static Website?

Web Design | Jul 20, 2021

Static websites are again used by many. The days when the business used to have moving characters all over their land...

Read Full Story


Why Website Design Portfolio is Important in 2021? [thumb]

Why Website Design Portfolio is Important in 2021?

Web Design | Jul 14, 2021

Marketing is difficult. Self-marketing is perplexing. Getting on the mat to lock horns, in a competitive mark...

Read Full Story