10 essential tips to get started with CSS

by harshit on July 23, 2009

As we discuss about CSS Sprites (a very handful technique for web performance) in earlier post,here I am going to discuss about some useful basic CSS tips for beginners.Now a beginner who is going to design web interface found it easy to deal with CSS.It can be extract independently and provides flexibility to designer.
10 essential tips to get started with CSS
One should have a clear structure of design before starting with its CSS, if structure doesn’t match standard rules than you might face difficulty in cross browser compatibility and your css create different layout in various browsers.

1.Use <div> avoid< table>

As many beginners who starts working with css and html go for table based structure to achieve a coherent and consistent look.Using CSS and DIV tags reduces markup code, separates content from its visual presentation, speeds up page downloads, and brings your code closer to Web standards compliance–all while making your website more appealing to search engine spiders.
Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.
The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages.With the use of CSS and DIV tags, we can achieve the effected layout, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation.

2.Debugging tools for CSS
CSS bugs are difficult to find ,and when you have large css file and there are numbers pf css file including in layout than it become more difficult to sort out the problem,because you stuck between error and bug.Debugging tools provide easy tweak to handle with these typical conditons.

3.Role of <id>and<class>

ID and Class are two major selectors in css.
It is often hard to decide when to use a class versus an id for an element. Here is an easy way to think of the difference:

Use a class tag if:

1. The style is used in various places throughout the document.
2. The style is very general.

Use an id tag if:

1. The style is only used once ever in the document.
2. The style is specific to a certain area of the document.

Remember that an id can only appear once in any HTML document. Once you’ve used the id, it should not be used again on that page.
class vs id
4.Use Shorthand CSS
10 essential tips to get started with CSS
Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property.

5.list with CSS

<ol>for an Ordered List (where the order of items is important, so items are numbered)
<ul> for an Unordered List (normally shown as items with bullets)
<li> for each item in a list, ordered or unordered.
You find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

list 10 essential tips to get started with CSS 6.Use measurelt tool for typography measurement: px vs em

Measurelt tool provides help in creating a pixel perfect design layout.This measurement gives an idea of how tall lowercase letters are and how large the bodies are of characters with ascenders and descenders.
measurement in css
htmlgoodies

7.Specify multiple fonts

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
Defining font family is a good habbit for every css designers,as different platforms use different fonts.Each time you are not supposed to define same font again and again, instead of it would be a good prctice define it in a body,and if you want to use special font for specific display then define it seperately.

8.CSS reset sheet

Some tag has default value..for example in tag padding-left:40px; has default margin value. So it would again be a good practice to reset all these value to “zero” and set them as per need of design.

9. Always code for Firefox

This may seem a little weird because the majority of users use IE as a browser. However it is a lot easier to code for Firefox (or any other standards compliant browser) and then fix for IE using conditional statements such as…

10.Keep CSS Codes Clean

Whenever you start writing css always remember one thing that use minimum number of classes and div for your design,try to define similar property in one class and div.
If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.