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.

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.

    Cancel

Add a Comment

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

Recent Posts

Benefits Of Using Custom Web Designing For Your Online Business Platform [thumb]

Benefits Of Using Custom Web Designing For Your Online Business Platform

Web Design | Jan 12, 2022

Today, the Web is widely used all over the planet, and it is easy to find a remedy to any problem using it. As a resu...

Read Full Story


Smart Tips And Tool To Execute And Pass Googles Core Web Vitals [thumb]

Smart Tips And Tool To Execute And Pass Googles Core Web Vitals

Web Design | Jan 10, 2022

 Core Web Vitals are the set of the important metrics that Google terms as essential for your webpage’s overall u...

Read Full Story


The Primary Methods for Internet Marketing [thumb]

The Primary Methods for Internet Marketing

Web Design | Dec 10, 2021

With the advent of digital transformation, marketing strategies have morphed into internet marketing strategies, and ...

Read Full Story