Forgot your password?

Home > About Us > Modern Signal Blog >CSS 101

CSS 101

Posted by David Hammond

Despite the title, this is not an intro to stylesheets. This is, rather, a few pointers for web developers that have worked with stylesheets before, but never really got them, which is not as uncommon as you might think. The concepts behind stylesheets are simple enough, so I think many developers, including myself in the past, figure that they pretty much understand them even though they sometimes have no idea why the code they just wrote works. The fact is, stylesheets are pretty simple, but they are devilishly difficult to troubleshoot, especially if you don't have a few pieces of information and the right tools.

So this is intended to be a list of those pieces of information and tools that a developer needs to demystify the most intricate stylesheets. Keep in mind that this page is a work in progress...

Get the doctype right

First of all, we'll all be happier if we are using a strict doctype that tells the browser to follow CSS standards. If we don't we're starting out on a rocky playing field. This does not mean, necessary, that you have to convert everything to well-formed xhtml. It's perfectly acceptable to use old-fashioned transitional html, as long as you put this at the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

See here for more info and a list of acceptable doctypes: http://www.alistapart.com/articles/doctype/

Understand the Cascade

Now with the right doctype your styles will cascade properly. What does that mean? Well, now, if you set the font size for the body tag, the font-size will cascade down to all elements beneath it, until it encounters a tag that has a different font-size specified. That's the way it's supposed to work. You should not need to specify the font-size for all of the elements in your document. Doing so only makes your stylesheet more complicated and harder to debug.

But sometimes you want to use stylesheet selectors that are a bit more advanced then a simple element. Something like:

td#leftNav ul.li li {font-size: 10px}

In layman's terms, you want to set the font-size of the second level of list items in a list in the left nav of your page. Simple right? It is until you have other styles that are competing to set the font-size of list items. So the next big thing is to understand the cascade. I.e. how does the browser decide which style to use? Well, it has to do with how specific the selector is and where it is declared. Then there's the "!important" keyword. To get an idea, read through this:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

One word: Firebug

Now that you have read the specifications for how the cascade works, you should have no problems troubleshooting your next stylesheet problem, right? Wrong. A complex stylesheet can make knowing the rules only the first step in an arduous process of trial and error, unless you have Firebug. Firebug is probably the best single piece of software for debugging html, css, and javascript ever invented. If you don't have it, get it, and if you aren't using it to its full potential, learn more about it. Need to know how a particular style is being applied to a particular element in a page? Just inspect the element in Firebug and it tells you. See here:
http://www.getfirebug.com/css.html

Browser Compatibility

Okay, so far I've been pretending that all browsers follow the stylesheet rules just as they should. The latest versions of Firefox, IE and Safari (the three browsers worth testing in) are pretty compliant with the standards. If you concentrate on making your stylesheets as simple as possible, that helps. Of course there will be times when special issues will popup in particular browsers. So first make sure the browser supports the particular stylesheet property that you are using. Here's one place to look:
http://www.quirksmode.org/css/contents.html

Then, well, maybe you're back to the old method of trial and error, hacking, and beating your head on the table :-) Perhaps I will use this space in the future to post about common problems and workarounds.

Testimonials

  • We wouldn’t have gotten where we are today without your support over the years.  Modern Signal has always been a great partner to us.

    - Kirk Gillis, Managing Director at Zoom Tanzania

  • Modern Signal significantly enhanced our site to be more efficient and user-friendly. They provide excellent customer service with timely and cost-effective solutions.

    - Center for Medicare Education

  • I felt as if my company was their only client. They responded to my needs quickly and efficiently despite short turn around time and intense demands.

    - Teaching Strategies, Inc.

  • I love working with Modern Signal! Their CMS is very easy to use and they are incredibly responsive to questions or challenges I bring them.

    - NALP

  • Modern Signal has a professional staff that was very responsive to our needs during all phases - scoping, developing, implementing and maintaining - of our project.  We have been pleased with their ability to deliver quality work on time and on budget. If given the opportunity, I would work with them again.

    - The National Center for Safe Routes to School

  • Modern Signal has been a great partner for us for over the past 10 years.  As our business grew and our needs changed, Modern Signal was able to work with us to adjust our website platform in the ever-changing online world.  Their service and response level has been second to none, and we've been never been happier with our relationship with them.

    - Charm City Run

  • Modern Signal worked with us to understand our needs and figure out what solution would work best for us. Our Lighthouse CMS is perfectly suited to our website goals. When we later needed to modify the CMS, they again took the time to understand exactly what was  needed and then built that functionality rather than delivering a cookie cutter solution.   

    - Ecosystem Investment Partners

  • This was by far the smoothest website redevelopment I have ever experienced. Modern Signal was a wonderful company to work with and we greatly value our working relationship. 

    - National Association of Student Financial Aid Administrators

  • Modern Signal understands our business - from future needs to current limitations - so their solutions are always scalable, solid, and service-oriented.

    - National Association of Home Builders