Whether you are working on your own project or redesigning a theme for your site much of your design formatting will be found in your CSS file. It is important to organize your css file not only so you can find things but also for function. In this howto we will look at a basic layout you should follow when defining elements and ids and where you could run into trouble.

The first rule of a CSS file that you should always keep in mind is that the file is read in by your browser in the same way a HTML file displays your page. This means organization is a must.

Element definitions that are at the top of the CSS Page or file will have more importance then elements lower on the page. You may have run into this problem when you define a font or color for the same element in two different places in your file.

In the example below you will see that the A or Anchor / link color is set at the top of the page along with definitions for the primary html elements. Lower on the page the anchor is defined again. In most cases the second definition of the anchor element will be ignored.

[css]
body, div, a {font-color:#345678}
blah {}
blah {}
blah {}
a {font-color:#abcdef}
[/css]

The best method to cure this problem would be to remove the grouped anchor definition at the top of the page and allow it to be defined lower on the page. Unfortunately while working on the css file you may mix element locations and wind up with a confusing mess.

How should you define your CSS elements?

Personally I do not like groupings of elements as shown in the first example. As you saw the color was applied to a group of elements HOWEVER when the element was redefined lower on the page it was ignored. When the first body definition was provided it defined the color for all other elements on the page the only exception was the font color for items that normally take on their own color.

Defining these base elements that take on their own definitions by default in html such as an anchor tag that normally is blue and red and purple depending on it being a link  or active or visited is easy enough to do individually and will give you more control over your design and allow you to find things quicker.

Grouping is for the lazy or for designers who make themes and expect their designs to be overridden by end users using child or secondary css files. If you are the final designer then you should take control of your project and organize and combine everything you can.

Ordering of CSS Elements in a CSS File

Now that you understand that grouping and location of a CSS Element definition can break the definition or disable it you should look at how you can best order your CSS file for editing and control.

The amount of control and updating you will need will depend on how you run your website. You may find that once you define a website design you won’t come back and edit ever or maybe for months but by establishing your own ordering of elements it will be easier if you need to.

Work with how the page loads defining your major elements first.

[css]
body {}

wrapper {} /* used to define a whole page wrapper*/

header {}

topmenu{}

leftsidebar{}

content{}

rightsidebar{}

footer{}

[/css]

Once you have defined the main sections of your page you can go back and add elements under these sections to fine tune specific areas of the page.

[css]
header{}

header a{}

header img{}
[/css]

After you have defined major areas you may have content that is only available on specific pages that you need to format.

[css]
storetitle img{}

paypal a{}

calender td{}

orderform textarea{}
[/css]

Finally at the bottom of your page you will want to define major html elements that you want styled for your entire site. Most of the time you will only add definitions that are minimal and specific this way the major base html elements can be defined for individual use in areas above.

for instance you may hate underlined links and find you do not want them anyplace on your site so you would add

[css]a {text-decoration:none}[/css]

This would remove all underlines unless you specifically turned them on someplace else. It would also not set a height border color or other definition because you will want to stylize your menu links differently then your content links and if you define the base element too intricately then you will apply it across your entire site.

Final Note

Function should always take place over form and if you find that you are adding !importants to define elements for override then you should take time to take a look at your formatting with hierarchy kept in mind.