Tip 1: Keep it simple
Keep your code simple. Webmasters who go to great lengths to create some fancy design, usually end up irritating the end user. Work through your code logically and systematically. Try to work your code from the top down, starting with the header, menu, main content and footers. Simple coding will also make it easier for you and others to change or update the coding in the future.
Tip 2: Carefully code your margins and paddings
Every browser presents margins and paddings differently. For example, the same margin code may look different on Internet Explorer than it does on Mozilla Firefox. As a result, ensure that you control the padding and margins on all the elements that you use.
Tip 3: Avoid divitus
Divitus refers to websites that have too many divs and not enough semantic html. Semantic html means using the correct html code for the job and not just using divs for everything. Be sure to use the h1, h2, p1, etc codes.
Tip 4: Avoid classitus
Classitus refers to the overuse of classes or ID codes. The following is an example of this type of overuse:
CSS
a.button{color:blue;text-decoration:none)
HTML
<ul>
<li><a class="button" href="about us">Page1</a></li>
<li><a class=”button" href="products">Page2</a></li>
<li><a class="button" href="contact us">Page3</a></li>
A better and more efficient way of coding the above is shown below. By applying an ID, you can style each anchor without having to use individual class codes.
CSS
#nav a {color:blue;text-decoration:none}
HTML
<ul id="nav">
<li><a href="about us">Page1</a></li>
<li><a href="products">Page2</a></li>
<li><a href="contact us">Page3</a></li>
Tip 5: Validate Your Code
Use the validator (http://jigsaw.w3.org/css-validator) to validate your CSS at every opportunity. If you are fairly new to CSS, try to use the validator as frequently as possible to ensure that you get your code right.
|
