For the novice to CSS and web development, troubleshooting styling problems can be very frustrating. You make additions and edits to your style sheet and the web page either does not show the changes whatsoever or the changes that you made cause problems throughout your site. Here are a few tips on how to troubleshoot your web styling in a methodical manner to save time and reduce stress.

Do your styling on a development web site

It is best to get your basic layout and styling done on a local site (a web site developed on your own computer or a local server). The reasons for this is that the world does not need to see your site until it is ready for the public. A poorly done site can cause visitors to quickly leave the site. This is bad for the SEO, Search Engine Optimization, for the site with a high bounce rate.

Load a reset.css file before applying any other styling

There are pre-written style sheets available that will reduce the amount of cross-browser incompatibility. Each browser, Chrome, Firefox, Internet Explorer, Safari and Opera, each have their own interpretation and presentation of HTML elements. The reset.css file will do its best to place all browsers on an equal playing field as far as margins, font-size, padding, etc. You want to load this file into your web site in the <head> section of the pages BEFORE the style sheet that styles the pages. You want to be sure that you load this file right off the bat as it can cause havoc with the styling if you wait until after you have spent hours developing the main style sheet.

Find out more about a reset.css style sheet with the article: CSS Topics: Level the playing filed between browsers

Only style a bit at a time

One mistake that inexperience developers make is to tap out multiple styles for multiple selectors at one time. There can be conflicting styles in these lines and this can cause headaches. Just do a little styling at a time, refresh the browser and see what the new style has affected your page. You will quickly see if this new style creates problems.

Constantly look at your site in different browsers and devices

You may find yourself doing all the styling in your browser of choice. You then go and look at the site in a couple other browsers or on a tablet or phone and find that you are going to have to fix all sorts of styling issues. You should frequently check the other browsers and devices throughout your development time. This will save a great deal of frustration.

Organize your style sheet in a logical manner

Place your site wide styling near the top of your style sheet and the styling for more specific elements farther down. Place your @media calls near the bottom or in a style sheet that is loaded after your main style sheet. Make notes in your style sheet for the different sections or for specific styles with a slash and star symbol such as this /* HEADER SECTION */. This will organize you page in a more logical manner and will help enormously when you go to look at the styling 6 months later or for others that are editing the styles.

Use diagnostic tools

There are many diagnostic tools for troubleshooting and debugging web sites. One of these is Firebug that works with the Firefox browser. These tools allow you to quickly see conflicts in your styling and allow you to specifically look at a single element on the page to see if a certain selector is overwriting the style that you want to apply.

Minimize the use of !important

If you place !important in your styling, it will not allow other styles to overwrite it. This may seem like a great tool, but it can cause all sorts of issues and is a lazy way to style your web pages. There are certain situations when the use of !important is acceptable, but this proctice should be minimized.