CSS Rules & Tips for Beginners

CSS is a very strong language with many nuances that can help or even hurt the designs. It is a language that is utilized by almost every developer at one point or the other. It can also be taken for granted sometimes. Here we present some of the best CSS practices, which will keep you away from making costly mistakes and help you write solid CSS.

Making it Readable – Very Important

The readability of the CSS is very importance, though most of the people overlook why it’s so important. If the CSS is readable it will make it much easier for you to maintain in the future as it will enable you to find elements quicker. Also, one never knows who might need to be looking at your code in the time to come.

Note by Editor: When writing CSS, developers come under one of the two groups.

First Group: All styles on one line

[code lang="html"]
.className{ background: #fff; padding: 5em; border: 1px solid #333; }
[/code]

Second Group: Each style in its own line

[code lang="html"]
.className{
background: #fff;
padding: 5em;
border: 1px solid #333;
}
[/code]

Both groups/practices are perfectly acceptable by everyone, though it’s generally seen that the second group looks down on the first group. Just remember one thing – choose the method that you think is the best. That’s all that matters.

Consistency

When looking to keep your code readable, make sure the CSS is consistent as well. Start developing your own “sub-language” of CSS, it will make things easier for you and will also allow you to quickly name things. Create classes for the themes you are working on, and use the same names every time. For instance, I use “.image-left” for floating images which contain a caption to the left.

When you create your own standards for CSS, you’ll become a lot more proficient at it. Decide it before hand whether or not you’ll be using dashes “-” or underscores “_” in your class names and IDs, and in what cases you’ll be using them.

Get Started with Framework

Frameworks should never be used in all instances, but if correctly used then they can be definitely of help. Some purists do not like the idea of using CSS framework with every design, but the question is that if someone has taken time to invent something that’s useful and speeds up production, then why reinvent the wheel?

There are designers who create their own framework over time, and that is a very good idea. It helps maintain consistency within projects.

Note by Editor: For those who know how to utilize CSS frameworks, they are a great tool to use.

“It’s more about knowing how the wheel works rather than reinventing it”.

We’d suggest that you stay away from using frameworks for at least one year, if you are a CSS beginner. Otherwise, you will just end up confusing yourself. Learn CSS first, become good at it then think about taking shortcuts.

Using Reset

In most CSS frameworks “reset” is built-in. If you are planning on not using one then at least consider using it. The “reset” makes your layout look consistent in all the browsers. It essentially eliminates the browser inconsistencies such as font sizes, headings, heights, and margins, etc.

The MeyerWeb along with Yahoo’s Developer reset are some of the popular ones. You can always roll in your own reset, if it appeals to you.

Organizing Using Top-down Structure

It’s always a good idea to lay your stylesheet in a manner that it quickly allows you to find the parts of your code. We suggest a top-down format that tackles styles in the source code as they appear. Below is an example of how a stylesheet might be ordered:

  1. Generic classes (body, a, p, etc.)
  2. #header
  3. #navigation
  4. #main-content

Note by Editor: Don’t forget to make a comment on every section, to make things easier for you.

[code lang="html"]
/****** main content *********/

styles goes here...

/****** footer *********/

styles go here...
[/code]

Combining Elements Sharing Same Properties

You will see that sometimes the elements in a stylesheet share same attributes. It is always a good idea to combine them rather than re-write the old code. For instance, the headings h1, h2 and h3 could well share the same typeface and colors:

[code lang="html"]
h1, h2, h3{font-family: tahoma, color: #333}
[/code]

Distinctive characteristics could be added to every header style if desired i.e. h3 ({size:1.2em}) in the stylesheet.

Create the HTML first

Mostly CSS and HTML are created simultaneously by the designers. It definitely seems like a good idea to create CSS and HTML at the same time, but actually creating the entire HTML mockup first will save you even more time. The logic behind this process is that you know all the elements of your site lay out very well, but you never really know what CSS will be required for the design. Coming up with the HTML layout first will enable you to visualize the whole page, and will definitely allow you to think of the CSS holistically and in a top to down mode.

Use of Multiple Classes

On occasions it is a good idea to add multiple classes to an element. For instance, there is a div “box” that you want to see float to the right, but there is already a “.right” class in your CSS that performs the same function. You can just add an extra class, like below:

[code lang="html"]
<div class="box right"></div>
[/code]

Desirable number of classes can be added to the declaration (separated by space).

Note by Editor: Be measured when looking to use classes like “left” and “right” and IDs. They can be used, but for things such as blogs. Why? Let’s imagine, after the coding is complete, down the road, there is a need to change the code. In such scenarios, you will have to change the class name by returning to your HTML, all that work just in order to adjust the presentation of the page. This is not the right approach, if you have to return to the HTML to alter the styling of the page. The thing here to remember is that CSS is for presentation and HTML is a markup language.

Use the Correct DOCTYPE

The declaration of DOCTYPE matters a great deal whether the CSS or the markup will validate it. As a matter of fact, the complete feel and look of the site can vary depending on the DOCTYPE that has been declared by you. Have a look at A List Apart if you want to learn more about DOCTYPE.

Note by Editor: We prefer HTML 5′s DOCTYPE for our projects.

[code lang="html"]
<!DOCTYPE html>
[/code]

The best part about the latest DOCTYPE is that all the top browsers Internet Explorer, Firefox, Opera, Safari will change the content to standard mode, despite the fact that they don’t use HTML 5. Hence, you can start creating the code for your design using HTML 5 and have them last a very long duration.

~ John Resig

Utilizing Shorthand

While creating CSS, you can shrink the code to a great extent by utilizing shorthand. The styles can be combined into one line for elements such as typeface, padding, margin and few others. For instance, a div might have the following styles:

[code lang="html"]
#divID{
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}
[/code]

or you can also combine as:

[code lang="html"]
#divID{
margin: 8px 7px 0px 5px; // top, rightright, bottombottom, and left values, respectively.
}
[/code]

For more assistance, here’s a comprehensive guide on CSS shorthand properties.

Properties Alphabetized

This time might not be of great importance and be a little frivolous; but it can still be really useful for quick scanning.

[code lang="html"]
#div-ID{
color: #fff;
float: left;
font-weight:
height: 200px;
margin: 0;
padding: 0;
width: 150px;
}
[/code]

Note by Editor: Would you sacrifice speed for a marginal improved readability? I’d rather not, but the decision is yours.

Use of CSS and Optimizer Compressors

CSS compressors can reduce the file size to a great extent by removing the white spaces, combining elements and line breaks which speeds up browser loading. CSS Compressor and Optimizer are two CSS shrinking tools of the highest quality.

Shrinking CSS can definitely improve the performance, but at the same time you can lose a bit of the readability of your CSS.

Making Use of Generic Classes

You’ll realize that there are few styles that you use over and over again. Instead of adding that same style repeatedly to each ID, you can just produce generic classes and add them to other CSS classes or the IDs.

For instance, if you are using float:right and float:left repeatedly in designs. You can just add both the classes to the stylesheet, and reference them in the elements.

[code lang="html"]
.left {float:left}
.rightright {float:rightright}

<div id="coolbox" class="left">...</div>
[/code]

This will save you time and you will not have to add the same classes to the elements that need to be floated.

Utilizing “Margin:0 auto” to center the Layouts

Many new CSS users can’t seem to figure out why they just can’t simply use float: center to get desired center effect on block-level elements. It’s not that easy! You’ll have to use:

[code lang="html"]
margin: 0 auto; // top, bottombottom - and left, rightright values, respectively.
[/code]

to center paragraphs, divs or other elements in the layout.

Note by Editor: By saying that both left AND right margins of the element should be identical, you will not be left with any other choice but to center the element within its containing element.

Do Not Wrap a DIV Around it

In the beginning, there’s a temptation to wrap a div around the ID or create an element and a style for it.

[code lang="html"]
<div class="header-text"><h1>Header Text</h1></div>
[/code]

It might look like an easier option to create the unique element styles but that’s not really the case like in the example given above. You’ll just end up cluttering the stylesheet. This would work fine if the following example is followed:

[code lang="html"]
<h1>Header Text</h1>
[/code]

A style can be conveniently added to h1 instead of having to add it to a parent div.

Making Use of Firebug

This little but very useful tool is a must have for all web developers. If you haven’t taken the time out to download Firebug yet, just stop doing whatever you are and download it. Amongst all the features (inspecting HTML, debugging JavaScript, looking for errors) that Mozilla Firefox extension offers, you can also edit, and visually scrutinize CSS in real time. If you want to know more details about Firebug, visit the official Firebug website.

Avoid Using Hacks

There is a lot of pressure of making the design look consistent across all the popular browsers, which leads to using hacks, but using hacks will only make your task difficult to maintain in the future. So, avoid using hacks if possible. Additionally, if you use a “reset” file as it can eliminate almost all the irregularities between browsers.

Do Not Overuse Absolute Positioning

Absolute positioning is a very useful CSS aspect that enables you to define where exactly an element should be placed on the page. If there are multiple absolute positioning running on the page, its overuse can make your page look quite messy.

Because of absolute positioning’s disregard for other elements on the page, its overuse can make the layout look quite messy.

Use of Text-transform

Text-transform is a very handy CSS property that enables you to “standardize” text formatting on your page. For instance, let’s imagine that you are looking to create headers with lowercase lettering only, simply put the text-transform property to the header like in the example below:

[code lang="html"]
text-transform: lowercase;
[/code]

Now the lettering will be lowercase by default in the header. Text-transform is a simple and useful property which allows you to customize your text in the following manner: First letter capital, all letters lowercase and capitalized.