CSS Tips for New Web Designers

By On 27, Jul, 2011 |  In: Website Development | Tags: , , , , , , , , , , , , , , , , , , , , , ,  | 1

firebug for cssSurfing the web, I came across a blog discussing the difficulties some designers run into when starting out with “CSS” , so I thought I would post a few CSS tips for new web designers.

The first thing developers seem to have a problem with is the difference between “ID” and “Classes”.  Its not written in stone but ID’s should be unique to the “Page” because  it helps keep you organized.

Next is the difference between how to declare both in the “CSS”. An “ID” needs to have “#” (number sign or pound sign ) before the name, and a “Class” needs to have “.” ( a period ) before it’s name.

Another issue I have seen ( and it can cause  confusion and frustration when designers can’t  figure out why the styling isn’t working ) is when you want to add 2 or more “ID’s” or “Classes” to a styling rule you need to put a “,” ( comma ) after each one. If you don’t do this it will break not only the “Styling” on the last one but the one before, because it joins the 2 together.

There are many ways that you can cause your “Styling” to malfunction or to break. Forgetting the “Comma” is just one of many. Forgetting the “;” ( semi-colon ) after each of the “Styling” rules, using 4 “characters” in your colors ( instead of the proper 3 or 6 ) or misspelling in your “Styling” rules ( like “pz” instead of “px” ) can all cause issues with the CSS .

A good way to check this is use “Firebug” for Firefox.  If you put a style rule to an element and check the element in “Firebug” and the style rule doesn’t show up then you may have a spelling error.

When working on the CSS for your Web Design there are many way to keep it simple and avoid to errors. Check you styling as you work , and before you start to freak out when something is not working look for small issues first.

If you have concerns, you can always contact me here at Wolf21.

One comment on “CSS Tips for New Web Designers

Leave a Reply

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