WeblinkIndia logo

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.

1. 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}

2. 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.

3. 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;

4. 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;}

5. 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;}

6. 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

Simple WordPress Security Tricks To Keep Your Website Secure in 2021

Web Design | Dec 29, 2020

It is common that many website owners complain about the security of WordPress. The idea is that an open-source scrip...

Read Full Story


7 Boss Tips for Converting Leads & Improve Rankings

Search Engine Optimization | Dec 29, 2020

Just imagine- you own a website that runs fine. One day, the conversion rate drop, and the bounce rate increases. You...

Read Full Story


That's How You Save Budget for The Magento Website Development

Web Development | Dec 28, 2020

The online retail industry is a growing challenging market, including the e-commerce platforms that power it. Accordi...

Read Full Story