I’ve been working with CSS for a while and tables even longer. Having worked for so long to figure out the tricks and workarounds for tables, I’ve mostly used tables for structure and CSS for styling. That’s not a bad thing. But you’re only using part of the power of CSS.

Also, I recently had a project that required a tableless design. If you find yourself in this situation, don’t panic. If you can understand the purpose of CSS and learn or know the basics of CSS syntax, it can be a fairly simple process.

The main thing to keep in mind is that you’re trying to end up with a site that has pages that contain mostly just data. It will also have one or more style sheets that contain the entire structure and layout of the site.

Since there are already books, sites, and courses that cover all the details of CSS, I won’t go into the syntax and details of CSS. I’ve never found any aspect of CSS complicated enough to need outside instruction or even a book, but I wasted my time going over the details without seeing the big picture. This article will only cover the main aspects of CSS and what areas of CSS need to be understood before going into the details.

For practice, I took a site that was done mostly in tables and converted it to all CSS. The basic layout of the site is a header, a sidebar, a main content area, an advertisement section, and a footer. This is a fairly common design, but these guidelines will work for just about any new design or layout.

You must first truly separate all data from any structure and format. This seems obvious if you know anything about the reason for CSS. I’m only pointing this out, because it’s very easy to include some formatting with the data if you’re new to the process. That wouldn’t be the end of the world, but he would be missing the point of the exercise. Remember, the goal is to change the way you currently build pages and start using CSS wherever possible. The reason: so that major changes can be made to the look and feel of the site without having to make changes to every page.

Second, always try to think if there is any possibility that you will reuse the code.

NOTE: This may not make much sense if you have limited or no knowledge of CSS, but write it down and keep it in mind when you start using CSS.

If it’s code you’re going to use, make sure you make it a class. Also, try putting it in your main style sheet. As you get further into CSS, you will most likely have multiple style sheets. Having site-wide elements in your main style sheet will make it easier to edit them in the future. Also, since all pages will call the main style sheet file, the class will always be available when you call it.

Now, I will go into the main issues, problems, etc. which I found when I removed all tables and other formatting from web pages.

The main problem with CSS is cross-browser compatibility. Most designers and users know that browsers render pages differently. Unless you specifically code the site to display the same, or as close as possible, in all browsers, the site will almost certainly not display the same.

There are a couple of lines of code that need to be added to each page.

– First declare a document type. If you’re not familiar with a DTD (document type declaration), it looks something like this. The three main types of DTDs are soft, transient, and strict. I highly recommend strict. Do your research to see what works best for you, but being strict is the surest way to ensure cross-browser compatibility. Declaring a DTD or CSS just won’t work the same in most popular browsers.

– You’ll also want to add this line:
. This helps fix the IE compatibility error and will help with some size issues. It is not essential. However, I have had no problems with the IE meta tag. So I would recommend adding it for now.

Next I recommend studying the CSS box model. If you’re used to using .gif spacers, tables, and many other workarounds, this can be a difficult habit to break. But once you have a good understanding of the box model, you no longer need these workarounds for formatting and layout. Also, if you start using CSS without understanding the box model, you’ll most likely spend a lot of time stuck trying to fix things you never would have broken in the first place.

I’ve always hated the expression “Think outside the box.” I can really say with CSS don’t just think inside the box. Learn to work inside the box.

Which brings us to our next fundamental. In CSS, just like HTML, you can use many kinds of units of measure. Working with pixels is generally fine, but the EM drive seems to be the most reliable. If you don’t use a strict DTD for your pages, definitely consider using EM instead of PX. Percentages are fine in most cases, but I’ve seen some minor issues with using percentages. As you do your own research on this, you will find more information. The most important thing to remember is that 16px = 1em, and not all unit types will work in all browsers. Since pixels are more familiar to web developers, and EM is supported by all major browsers, these are the two main units to use.

Heredity is also very important. Basically, CSS can change colors, fonts, and much more. Changes are applied through an external style sheet, an in-page style sheet, or even a style applied directly in the HTML. Since the last applied style will be used, make sure you understand how inheritance works. Also, any default browser settings will be overridden by external, internal, or inline styling.

A good example is the HTML H1 tag. I like to restore the default size and color of the title tag. Although the default font is usually times and the default color is black, the font size tends to change slightly from browser to browser.

For example, if I want most of the H1s to be Arial 20px and red, I would apply it in my main style sheet, probably external. But let’s say I have a page where I want the H1 tag to be a different size. I can override the size of the external style sheet with some inline styling. So for this example, I really want my title to stand out, and I resize it to 30px. But the title color is still red and the font is still Arial.

Why? Even though I reset the size with an inline style tag, the color and font family never reset. So, until you override the color, or any other parameter defined by another style sheet, the H1s will inherit, in this case, the Arial font and red shading from the external style sheet.

Note: If you import multiple style sheets, the last style applied to the page will be used. When you use external style sheets, the page renders as if the code were on the page. So if you’re having trouble, make sure you don’t import multiple style sheets that conflict with each other. A best practice is to make sure you use unique names for all classes and IDs, even if they are in separate style sheets.

Lastly, the default settings such as margins, padding, colors, etc. may vary slightly from browser to browser and between different versions of the same browser. Also, as new browsers are released and updated, it would be nice to know that your pages won’t break. So at the beginning of my main style sheet, I like to declare some global settings.

In general, you’ll want to override the default padding, margins, and borders at a minimum. Padding, margin, and border are the main things that vary from browser to browser. Once again, it depends on your needs. But, due to inheritance, this will override the browser default settings on all your tags and elements automatically. I personally like to zero everything with a default color of white. I’ve never had any issues with cross-browser compatibility using this setup.

As I said, there is a lot of information about CSS available online and from other sources. This is just a guide to the main areas to focus on first as you become the next expert CSS developer.