20 Useful CSS Tips For Beginners

In the old days, we depend a lot of on developers and programmers to help

update the website, even when its just a minor one. Thanks to the CSS and
its 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 blogs look and feel a little its always good to
start with the fundamentals to gain a stronger foundation. Lets take a look
at some CSS Tips we thought might be useful for beginners. Full list after
jump.

1. 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 Meyers CSS Reset, Tripoli

2. 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

1.header {<br>
2 background-color: #fff;<br>
3 background-image: url(image.gif);<br>
4 background-repeat: no-repeat;<br>
5 background-position: top left; <br>
}
6

It can be short-handed into the following:

1.header {<br>
background: #fff url(image.gif) no-repeat top
2left<br>
3 }

More Introduction to CSS Shorthand, Useful CSS shorthand

properties

3. 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 dont 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
4. 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

5. 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. Its 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

6. CSS Debugging Tools

Its 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.

o
 o

7. Avoid Superfluous Selectors

Sometimes your CSS declaration can be simpler, meaning if you

find yourself coding the following:

1ul li { ... }

1ol li { ... }

1table tr td { ... }

They can be shorten down to just

1li { ... }

1td { ... }

Explanation: <li> will only exist within <ul> or <ol> and <td>
will only be inside <tr> and <table> so theres really not necessary
to re-insert them.

8. Knowing !important

Any style marked with !important will be taken into use

regardlessly if theres a overwriting rule below it.

1.page {<br> background-color:blue !important;<br>

 background-color:red;<br>}

In the example above, background-color:blue will be adapted

because its marked with !important, even when theres 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.

9. Replace Text with Image

This is commonly practice to replace <h1>title</h1> from a text

based title to an image. Heres how you do it.

1h1 {<br>
2text-indent:-9999px;<br>
3background:url("title.jpg") no-repeat;<br>
4width:100px;<br>
5height:50px;<br>
}
6

Explanation: text-indent:-9999px; throws your text title off

screen, replaced by an image declared by background: {...} with
a fixed width and height.

10. Understand CSS Positioning

The following article gives you a clear understanding in using CSS

positioning position: {...}

More Learn CSS Positioning in Ten Steps

11.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,
heres few articles to help you decide.

More Difference Between @import and link

12. 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

13. 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:

o CSS Remix

o CSS Reboot

o CSS Beauty

o CSS Elite

o CSS Mania

o CSS Leak
 o

Need more? Heres a round up of 74 CSS Galleries.

14. Rounded Corners in CSS

This following article gives you an idea how to create cross-browser

compatible rounded borders with CSS.
 o

15. 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

16. 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

17. CSS Browsers Compatibility Table

We all know each browser has different ways of rendering CSS

styles. Its 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.

 o

18. Design Multicolumns in CSS

Having problem getting the left, middle and right column to align
properly? Here are some articles that might help:

o In Search of the Holy Grail

o Faux Columns

o Top reasons your CSS columns are messed up

o Litte Boxes (examples)

o Multi-Column Layouts Climb Out of the Box

o Absolute Columns
 o

19. 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

o
 o

20. 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.