Perfecting the Stylesheet: Common Errors Made by CSS Beginners

As web design continues to transition from a professional occupation to a worldwide hobby, an increasing number of people are becoming acquainted with creating designs which are controlled by extensive stylesheets. While it’s true that these files are often much simpler to create and maintain than vast XHTML documents, it’s also true that CSS is a notoriously “picky” programming language that requires exact punctuation, minimal spacing, and a strict adherence to perfect semantics from start to finish.

With so many new web designers taking up this hobby and committing themselves to creating standards-valid website with deep stylesheet formatting, a few patterns have emerged in terms of common errors. Whether it’s the forgotten semi-colon or the standards-incompatible lack of quotation marks around font names, those new to the field of web development can enjoy greater success by avoiding these common CSS pitfalls that are made all too often.

1. Don’t Forget Those Quotation Marks!

It’s something that most developers feel they can ignore, mostly because forgetting quotation marks through out a CSS file will not alter the appearance of a website like the same error would when by an XHTML document. However, since the early days of stylesheets, the W3C, has directed that all font names with a space in them be surrounded by quotation marks when placed into a CSS document.

This comes into play when crafting the “font-family” line of code which determines which fonts will be used by the browser to display blocks of text. Typically, web designers are encouraged to use several font names so that the browser has plenty of fallback options in the case of missing fonts.




2. Remember to Comment a Stylesheet


/* This is a CSS Comment */


Using this feature of CSS is especially helpful to young web designers, who can comment on exactly what each class, ID, or form element does as they write it. That will save them confusion in the long run and it will make things easier to edit and repair during the W3C validation process that all developers should run their stylesheets through.

3. Don’t Forget the Punctuation


.class {
margin: 0;
padding: 0 3px 0 3px;
color: #000;

Notice that every line of code within the brackets ends with a semicolon which indicates that a new element has begun. Failure to include this semicolon can actually have disastrous effects on the rest of the stylesheet. Some browsers interpret a lack of semicolons as an indication that the entire stylesheet is invalid, and they will thus refuse to apply its instructions to a website. Still others will consider every element after the lost semicolon to be invalid, while some browsers will only stop parsing the CSS code until the closing bracket of the affected element.


4. Use Shorthand Whenever Possible

The key to a great CSS file is to cut down on the actual size of the file and make it perform all of its functions in the most efficient way possible. The best way to do this is to simply use shorthand wherever possible. Stylesheets actually have a robust number of elements that can be cut short and, as any web designer should know, less characters equals a smaller file size. This is especially true in text-only documents like stylesheets and raw XHTML files.


Another great way to save on space is to leave out unnecessary elements like the “px” operator for margins and padding designations of zero. Many novice developers write things like “0px” throughout their documents, indicating that the size of the border is zero pixels. This is largely because every other definition of element size throughout the stylesheet is denoted in pixels and ends the “px” suffix. However, when the margin or padding element is zero, no pixel designation is needed. The stylesheet simply infers that this is a zero-pixel element and fills in the blanks automatically. This is a huge space-saver in many stylesheets which intricately define the size of elements, borders, and spacing.


The novice developer often assumes that each side of a box — top, left, bottom, and right — must be styled and defined separately. In fact, CSS even include such indicators in its specification. That’s why elements like “margin-right” and “padding-left” exist and are used so frequently. And while there is nothing invalid about this method of writing a stylesheet, it’s needlessly wasteful in terms of file size and can extend a page’s loading time significantly when used throughout the document. Here’s what a beginner’s stylesheet might look like when defining the padding of an element:

.class {
padding-left: 0;
padding-right: 0
padding-top: 0;
padding-bottom: 0;


.class {
padding: 0 0 0 0;


6. Too Much Whitespace? Eliminate It.

Here’s an interesting fact about CSS: This common programming language does not require a single space between lines of code, classes, or other design definition elements. Those blank lines are permitted, however, and there is nothing preventing developers from using them. It’s not considered invalid or a bad practice at all. It is, however, considered a waste of space and the file’s size, and this can lead to slower page loading times. When in doubt, remove spaces and use comments to indicate the purpose of elements rather than spacing them out and causing the stylesheet file to become so excessive.

Remember to Code Carefully and with Common Sense



Author: (40 Posts)
