WeblinkIndia logo
+91-9811948545 Get a Call Back

Website Designing With CSS Made Easy

Web Design | Admin | 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.

1 thoughts on "Website Designing With CSS Made Easy"

  • web design
    03 June, 2011 at 6:11 pm

    Good blog post and decent site template design. I am more into web design.


Add a Comment

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

Recent Posts

Why You Need Custom Web Designs To Grow Your Business? [thumb]

Why You Need Custom Web Designs To Grow Your Business?

Web Design | Jul 06, 2022

For owners profit in the business is the main motto. It can be difficult to face loss in your business. Such situatio...

Read Full Story

5 Web Design Trends for 2022 [thumb]

5 Web Design Trends for 2022

Web Design | Jun 01, 2022

Keeping up with the newest web designing trends is a sure-fire approach for web designers to ensure they're ready to ...

Read Full Story

Important factors to consider for improving the website speed [thumb]

Important factors to consider for improving the website speed

Web Design | May 05, 2022

The question related to the speed of a website is always put by every person who goes for website designing. Fast-loa...

Read Full Story