5 Common CSS Mistakes

There are often a lot of CSS mistakes that beginners, and even experts, make from time to time.

Below, we address the most common CSS mistakes.

1. ID vs. Class

CSS has given us two attributes to declare the style for HTML elements: IDs and Classes. An ID refers to a unique instance in a document, or something that will only appear once on a page. For example, common uses of IDs are containing elements such as page wrappers, headers, and footers. On the other hand, a CLASS may be used multiple times within a document, on multiple elements. A good use of classes would be the style definitions for links, or other types of text that might be repeated in different areas on a page.

In a style sheet, an ID is preceded by a hash mark (#), and might look like the following:

#unique-element{position:relative; margin:0 auto; width:800px; background-color:#000099; font-family:Arial,Verdana,Helvetica;} {margin-top:4px; margin-right:12px; margin-bottom: 5px; margin-left:10px;}

Classes are preceded by a dot (.). An example is given below.

.non-unique-element{font-size:12px;margin:5px;display:inline;}

2. Proper Color Declarations

There are three rules for declaring colors:

1. Hexadecimal Code. While using words for colors — such as red and blue — might be more readable, it is a good practice to use hexadecimal codes. Browsers may render colors differently. A hexadecimal code ensures that red or blue look the same on all browsers.
2. Hash Mark. To be valid, a color’s hexadecimal code must be preceded by a hash mark.
3. Redundancy. It is always a good idea to have smaller files as they load more quickly. To do this, you can condense some of your color declarations. If you use any code that has pairs of identical letters or digits, such as #ffffff or #006699, you can rewrite these codes as #fff and #069.

3. Needless Repetition

To reduce the size of your style sheet, you can condense your style declarations by avoiding repetition. See the examples below.

Shorter Declarations

In your stylesheets, you might have something that looks like the following:

.different{margin-top: 4px; margin-right: 6px; margin-bottom: 0px; margin-left: 7px;}
.same{margin-top: 10px; margin-right:10px; margin-bottom: 10px; margin-left: 10px;}

Instead, you can condense the margin declarations into one statement, as follows:

.different{margin: 4px 6px 0 7px;}
.same{margin: 10px;}

You might have also noticed that the 0 has no units. This is not an error. ’0′ is the same number, whether or not the units are em or %, so no units are required.

Grouping Similar Styles

Sometimes, you will have style declarations that are much alike. In this case, it is possible to group styles. For example, suppose you have heading and paragraph tags which share the same padding, margin, and background properties. It is possible to define the styles for all elements by listing them in a comma-separated list as in the example below:

h1, h2, h3, p{margin:0 0 10px 5px; padding:4px; background-color:#999;}

Additionally, elements and attributes (ids and classes) can be declared more than once in a document. So if you need to add unique styles to an element, you can redeclare that element again.

4. Excess Whitespace 

Most CSS coders include whitespace in their code to make it readable. But a lot of this can be eliminated, all while maintaining readability. Consider removing line breaks and excess spaces. This will go a long way towards condensing your code and shrinking your file size.

5. Margin vs. Padding

For most elements that have neither a border nor background color, margins and paddings can generally be used interchangeably. However, it is important to know the difference, as it will give you greater control over your layouts. Margin refers to the space around the element, outside of the border. Padding refers to the space inside of the element, within the border.

Example: No Padding, 10px Margin

p{border: 1px solid #0066cc; margin:10px; padding:0;}

Result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin a arcu rutrum risus tempus mattis. Quisque et odio. Sed sollicitudin neque in nunc.

Example: No Margin, 10px Padding

p{border: 1px solid #0066cc; padding:10px; margin:0;}

Result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin a arcu rutrum risus tempus mattis. Quisque et odio. Sed sollicitudin neque in nunc.

There are a lot of other CSS mistakes and oversights. So feel free to leave a comment with something that can be added.

Additionally, you can find more information on CSS from the W3C CSS homepage. It is also a good practice to validate your CSS markup. This can be done by using the W3C CSS Validator.