20 Useful CSS Tips For Beginners

useful css for beginners

In the old days, we depend a lot of on developers and programmers to help update the website, even when it’s just a minor one. Thanks to the CSS and it’s flexibility, styles can be extract independently away from the codes. Now, with some basic understanding of CSS, even a novice can easily change the style of a website.

Whether you are interested in picking up CSS to create your own website, or merely to tweak your blog’s look and feel a little – it’s always good to start with the fundamentals to gain a stronger foundation. Let’s take a look at some CSS Tips we thought might be useful for beginners. Full list after jump.

Use reset.css

When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli
Use Shorthand CSS

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

Instead of creating CSS like this
```
.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left; 
    }
```
It can be short-handed into the following:
```
.header {
      background: #fff url(image.gif) no-repeat top left
    }
```
More – Introduction to CSS Shorthand, Useful CSS shorthand properties
Understanding Class and ID

These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

More – Class vs. ID | When to use Class, ID | Applying Class and ID together
Power of <li>

<li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>, particulary to style a navigation menu.

More – Taming Lists, Amazing LI
Forget <table>, try <div>

One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>’s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

More – Tables are dead, Tables Vs. CSS, CSS vs tables
CSS Debugging Tools

It’s 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.
Avoid Superfluous Selectors

Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:
- ```
ul li { ... }
```
- ```
ol li { ... }
```
- ```
table tr td { ... }
```
They can be shorten down to just
- ```
li { ... }
```
- ```
td { ... }
```
Explanation: <li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.
Knowing !important

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.
```
.page {	background-color:blue !important;	background-color:red;}
```
In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.
Replace Text with Image

This is commonly practice to replace <h1>title</h1> from a text based title to an image. Here’s how you do it.
```
h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}
```
Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height.
Understand CSS Positioning

The following article gives you a clear understanding in using CSS positioning – position: {...}

More – Learn CSS Positioning in Ten Steps
CSS @import vs <link>

There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.

More – Difference Between @import and link
Designing Forms in CSS

Web forms can be easily design and customize with CSS. These following articles show you how:

More – Table-less form, Form Garden, Styling even more form controls
Get Inspired

If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend:
- CSS Remix
- CSS Reboot
- CSS Beauty
- CSS Elite
- CSS Mania
- CSS Leak
Need more? Here’s a round up of 74 CSS Galleries.
Rounded Corners in CSS

This following article gives you an idea how to create cross-browser compatible rounded borders with CSS.
Keep CSS Codes Clean

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.

More – 12 Principles For Keeping Your Code Clean, Format CSS Codes Online
Typography Measurement: px vs em

Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.

More – Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts
CSS Browsers Compatibility Table

We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser.

CSS support table: #1, #2, #3, #4.
Design Multicolumns in CSS

Having problem getting the left, middle and right column to align properly? Here are some articles that might help:
- In Search of the Holy Grail
- Faux Columns
- Top reasons your CSS columns are messed up
- Litte Boxes (examples)
- Multi-Column Layouts Climb Out of the Box
- Absolute Columns
Get a Free CSS Editors

Dedicated editors are always better than a notepad. Here are some we recommend:

More – Simple CSS, Notepad ++, A Style CSS Editor
Understanding Media Types

There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.

More – CSS and Media Types, W3 Media Types, CSS Media Types, CSS2 Media Types

Comments

abdusfauzi March 16th, 2009

this is nice! need to bookmark this. :)
CincauHangus March 17th, 2009

finally something i wana know for a long long time. =p
Dollar March 17th, 2009

Thanks a lot! This is really very useful.

Bookmarked :)
Steven March 17th, 2009

Submit Css is also a great place to find some good inspiration. It’s my favorite gallery!!!
Remy Overkempe March 17th, 2009

Great resource! Thanks :)
IHeartTopTens March 17th, 2009

Great Article. Added to IHeartTopTens.com : http://www.ihearttoptens.com/view.php?uid=23
Pinky March 17th, 2009

great sharing..thanks
PCStuffBlog March 17th, 2009

CSS tips and tutorials is never enough. There are still the web developing books, what missing CSS chapters. That is wrong! CSS is base and very powerful website tool.
Thanks for this tips!
Jason Bartholme March 17th, 2009

Some good links there. I have been using CSS for years and didn’t know you could combine the background properties as listed.

Thanks!
Klikrnet March 17th, 2009

CSS has been a big mystery to me until I see this post. Things like div, class, float, repeat,… always intimidate me somehow.

So I choose tables most of the same for the sake of familiarity. Thanks a lot for sharing!
Dean March 17th, 2009

List failed as soon as it began. reset.css?
burnz March 17th, 2009

Another useful article… Refresh my memory about css thingy…
Abhilash March 17th, 2009

I like it very much
Brian March 17th, 2009

these are just basics but very important stuffs to know. thank you.
teddY March 17th, 2009

Thanks for the great compilation! Maybe you will want to add another point on reset styles since they’re quite important, as well as CSS frameworks (Blueprint, 960 and etc). It’s enlightening that you touched on the <link> VS @import for importing CSS stylesheets into a webpage.

p/s: A good recommendation of those who’re an FF user and is too lazy to get accustomed to a CSS editor is to get a plugin called Firebug. So far it works just fine for me :)
teddY March 17th, 2009

Sorry about the reset styles, I missed out the first line lol. Oh, and just another note: I’m glad that you didn’t dwell into the CSS formatting debate, whether to use single-line, multiple-lines, with tabs or without tabs. It’s just personal choice, not professional ethics heh.
Mickael Pinto March 17th, 2009

Thanks for all !
Woodstock real estate March 17th, 2009

Thanks for the great CSS tips!!
Amelia Vargo March 18th, 2009

Thanks for all this, it is really useful! I didn’t know you could use css for rounded corners, I’ve always just used javascript in the past, I think I’ll have to give css a try!

I don’t think there should be a choice between ems and pixels. Ems are a little harder to work with, but the benefits for people who need /want to resize their text outweigh (for me anyway) the benefits of using something that is easier for the designer. Nuff said….
joe March 18th, 2009

Finally, something usefull again, thanks!
dlv March 18th, 2009

really nice post, good starting information
i like it
Online Resources March 19th, 2009

Another great post. This is not only for css beginners but old time css users will find this compilation very useful. Bookmarked it.
dev March 19th, 2009

Great post
Webmaster Blog March 20th, 2009

Thank you.Very nice post.
faruksal March 20th, 2009

Thank you very much:))
ladyfox14 March 20th, 2009

This is an awesome post. Extremely useful and very clear to understand. +1
unie March 20th, 2009

kerennnnnnnnnnnnnnnnnnnnnnnnnnnnnn………… :D
Laith Ibrahim March 22nd, 2009

Great List. Thanks!
Rahul March 22nd, 2009

These are great tips for CSS for beginners as well as CSS coders as well.
爱月 March 24th, 2009

i’ve translated it into Chinese , if u don’t like ,tell me & i’ll dellete it immediately ~ the address is : http://moon-blog.cn/20_useful_css_tips_for_beginners/
Liza March 29th, 2009

Grate list!
I cant agree on nr.2 but otherwise it’s top notch :)
flikteoh March 29th, 2009

Thank you ! Very informative post!
Gompyi March 29th, 2009

Nice!
anarm March 31st, 2009

great! thank you because share this great tips. 2 thumbs up.
Luiz April 1st, 2009

I’ve translated your post.
Callum Chapman April 3rd, 2009

bookmarked for future reference (i.e. when I have time to learn css!). Sure this will come in handy though, thanks!
fonso gfx April 5th, 2009

Wonderful post.
Przemek April 7th, 2009

Fantastic jobs!
CMS Themes April 7th, 2009

One hell of a list! Thanks for rounding them up.
YSlove April 11th, 2009

Thanks! This is has more help to me!
koronghejo April 11th, 2009

thank you…..:)
Dyvantity April 20th, 2009

Nice tips, I used them for my French website http://www.dyvantity.com.
Dugg and Thumed Up
Serkan April 21st, 2009

Wonderful and Fantastic! post.
WORDPRESSGALA April 22nd, 2009

Very useful! Great resource. Thanks!
Jason April 23rd, 2009

Great resource, pity about the ads though it slows down the entire site.
jonmulholland April 24th, 2009

Some very handy tips here. Thanks for the great article!
baloot April 24th, 2009

very nice collection mate!
thanks a lot.
i bookmark this for my future resource… :D
Keith April 24th, 2009

Great list. I’ve been looking for a list like this. Thanks!
jelumalai April 24th, 2009

Good post, this for experience guy also not only beginners, Keep it up.

I book marked this URL
Sin April 27th, 2009

I like Crimson Editor to replace notepad.
Thanks for the great post!
Digging now
M.Major Karthik May 4th, 2009

Very useful and impressive .
saravana Kumar May 4th, 2009

very use full tips.Want some more…Thanks.:-)
Syed Nisar May 7th, 2009

thanks a lot, its really helpful for me……………..
Adrian June 4th, 2009

Thanks for the article, it is very resourceful. Very well done.
hslOLa June 21st, 2009

nice!
Jas July 27th, 2009

this is great stuff – i didnt know the difference between ID and Class, thanks for clearing that up
Türk's Bilişim; Web Tasarım September 2nd, 2009

this very thank you.

Your Web Site professional…
Ertan (Erkasoft Web Tasarım) September 7th, 2009

Thank you, this is very good tips for the beginners.
Scot Hacker September 22nd, 2009

FYI “li” stands for “list item,” not “link list”. Lists don’t need to include links…
ravi September 25th, 2009

Thanks a lot! This is really very useful.
Gsm Tamircisi September 27th, 2009

this is thank you..

very good..
WebpageLottery October 13th, 2009

I agree with div is a lot more flexible than table. I use div to replace table most of the time now.
Ezuca October 17th, 2009

Thanks. I have learned a lot.
Desarrollos Web October 25th, 2009

Thanks a LOT.

Keep going on.
Alsen de Bak Eğlence Merkezi October 26th, 2009

this very thank you..

your web site very good..
Hery November 3rd, 2009

nice man…