Common CSS Errors Made by Beginners

With so many new web designers 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 web design can enjoy greater success by avoiding these common css errors that are made all too often.

You might also like to learn more about the best CSS practices for beginners.

1. Don’t Forget Those Quotation Marks!

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.

Just for clarification, the example below is how quotation marks should be properly used in a stylesheet when a font name containing spaces is used within the “font-family” element:

font family: "Times New Roman", "Times Roman", Roman, serif;

Notice that the quotation marks surround only the font, and do not surround the comma which separates each font name from each other. That’s an important distinction, as including the comma within the quotation marks would essentially inform the browser that the comma is part of the font name. That would result in a large number of “lost” fonts in most browsers, and most users would probably end up viewing content in only the most basic serif or sans-serif system fonts.

2. Remember to Comment a Stylesheet

Most web designers new to stylesheets are actually unaware that they can add brief “comments” to their document as they create it, helping to break this large set of styles in to easy parts that can be searched, moved around, and deleted when they are no longer needed. Comments are denoted by slashes and asterisks both before and after the comment itself. When it’s put together, it looks like the following:

/* This is a CSS Comment */

The comment code is a “mirror image” of itself. It must be opened and closed by the same forward slashes, with the asterisk appearing directly afterward. No spaces can be between the two punctuation marks, though there can be spaces between the opening and closing indicators and the text that actually comprises the comment.

3. Don’t Forget the Punctuation

The number one thing that causes a stylesheet to stop functioning is the lack of punctuation that can cause elements and classes to run together. While stylesheets are inherently rather basic and pragmatic, they do make extensive use of commas, brackets, and semi-colons when indicating the closure of an element, class, ID, or form element.

A well-designed CSS class looks like the example below:

.class {
margin: 0;
padding: 0 3px 0 3px;
font-family: "Times New Roman", "Times Roman", Roman, serif;
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. Browsers will interpret the lack of semicolons as an indication that the entire stylesheet is invalid, and they will thus refuse to apply its instructions to a website.

Furthermore, most web browsers will treat a lost bracket the same way, refusing the parse the rest of the stylesheet’s information until the bracket is replaced and the affected class is closed. And, of course, there are those browsers which, upon seeing an invalid punctuation mistake, will simply disregard the entire stylesheet.

4. Use CSS 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 CSS shorthand wherever possible.

Stylesheets actually have a robust number of elements that can be made shorter and, as any web designer should know, less characters equals a smaller file size.

The first way to execute shorthand is to cut short the color codes for black and white. These are typically six-digit hexadecimal codes that simply repeat themselves; white is coded as “#ffffff” while black is formatted as “#000000.” Because most stylesheets can simply infer that these color codes are being used after the first three characters, designers can actually chop them in half.

That means black can be written as “#000” while white is placed into a stylesheet as “#fff.” Cutting these hexadecimal color codes in half, especially in a document that is rich in blacks and whites, can actually cut a stylesheet’s file size down considerably — and that isn’t the only way developers can save space in the document.

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.

5. Use the TROUBLE Method to Avoid Repetitious Elements Throughout CSS Classes

The novice web designer often assumes that each side of a box — top, left, bottom, and right — must be styled and defined separately. In fact, CSS even includes 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;
}

Looks wasteful, right? And it is, in fact, quite a waste of space. To resolve this problem, simply use the TROUBLE method when composing the size of margins and padding elements throughout the stylesheet. This method is so named because it corresponds to the order of pixel definitions: top, right, bottom, and left — in that order.

The significantly condensed stylesheet element for the same class above would be reduced to one line, and it would look like the example here:

.class {
padding: 0 0 0 0;
}

Three lines of code are effectively eliminated, while the function of the element is maintained. Of course, this example overlooks the fact that, if all of the padding destinations are zero, only one number is required in the condensed element. Still, this serves to illustrate the point that it’s easy to designate the most common multiple-line CSS elements to just one line.

6. Too Much Whitespace? Eliminate It.

Here’s an interesting fact about CSS: It 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

The key to mastering CSS is simply to code deliberately and carefully from start to finish. The programming language itself is quite picky, and the number of ways to cut down on the amount of work and blank lines are numerous. Code with good common sense, always test new classes and lines of code before closing the file, and remember to double-check for any missed brackets, semicolons, commas, or quotation marks.

With good, deliberate coding, CSS errors can be avoided and websites can be made stunning.