Some Useful CSS Tips For Beginners

Cascading Style Sheets (CSS) is the style sheet used to define the HTML elements. This can be also applied to any kind of XML document, including plain XML, SVG and XUL. These styles are normally saved in external .css files. These external style sheets can save lot of your time while editing the layouts of all the pages in a website.

Here are some important and useful CSS tips and tricks that can be helpful for developers.

1. The Use of Reset.css

When it comes to styling your web page, it can get really confusing at times as most browsers have different ways of handling web pages as they all have some default styles whicg are automatically applied to even your bland pages.
reser.css will help reset all the default styles which were applied by browsers so you can work with a plain blank un-styled page.

One of the most commonly used reset.css is one by . You can grab a copy of the css file from Here.

2. The Use of Shorthand

Shorthand way of writing CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearer and easier to understand.

Instead of writing a CSS like this:

It can be short-handed into the following:

3. Understanding Class and ID Selectors

This two selectors confuse alot of beginners as they tend not to know when to use them, in summary when you have an element with ID like <div id="myDiv">....</div> then on css you will style it like this #myDiv{} and when you have a div with class <div class="myDiv2">....</div> then in CSS you will have .myDiv2{}

Basically you use ID on a element that is unique and use class to style elements that can be re-sue or styles that can be shared.

4. Table Tags are Obsolete, Try Divs for Layouts

For those who have being designing websites for a while must have learnt laying out your contents in tables, yes! that was the way around it then but that method is obsolete.

DIV have greater flexibility compared to tables and i expect all web designers to make use of DIVs rather than tables for layout of their websites.

5. Use CSS Debugging Tools

It is always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

Leave a Reply

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