I’ve been working with CSS for a while and tables even longer. Having worked so long figuring out the tricks and workarounds for tables, I’ve mostly used tables for structure and CSS for style. That is not a bad thing. But is only using part of the power of CSS.
Moreover, I had a project recently that required a table free 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 are trying to end up with a site that has pages that contain mostly just data. You will also have one or more style sheets that contain all the structure and design of the site.
Since there are already books, sites and courses that cover all the details of CSS, I will not be going into the syntax or details of CSS. I’ve never found any aspects of CSS complicated enough to need outside instruction or even a book, but I have wasted time going over the details without seeing the big picture. This article will just cover the main aspects of CSS and what areas of CSS should be understood before you get into the details.
For practice, I took a site that was mostly done in tables, and converted the site to all CSS. The basic lay out of the site is a header, sidebar, main content area, advertising section and a footer. This is a fairly common lay out, but these guidelines will work for almost any lay out or new design.
First you must truly separate all the data from any structure and formatting. This seems obvious if you know anything about the reason for CSS. I only point this out, because it is very easy to throw some formatting in with the data if you are new to the process. That would not be the end of the world, but it 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 to the look and feel of the site can be made without having to make changes to all the pages.
Second always try to think if there is any possibility that you will be reusing the code.
NOTE: This may not make much sense if you have no or limited knowledge of CSS, but make a note of it and keep it in mind as you start using CSS.
If it is code that you will be reusing, make sure you make it a class. Also, try to put it in your main style sheet. As you become more advanced with CSS, you will most likely have multiple style sheets. Having site wide elements in your main style sheet will make them easier to edit in the future. Also, since all pages will be calling the main style sheet file, the class will always be available when you make a call for it.
Now, I’ll go in to the main issues, problems, etc. that I came across as I removed all tables and other formatting from the web pages.
The main problem with CSS is cross browser compatibility. Most designers and users know that browsers display pages differently. Unless you specifically code the site to display the same, or as close as possible, in all browsers, it is almost guaranteed the site will not display the same.
There’s a couple lines of code that should be added to each page.
– First declare a document type. If you are not familiar with a DTD (document type decleration) it looks something like this . The three main types of DTDs are loose, tranistional and strict. I highly recommend strict. Research to see what works best for you, but strict is the safest way to insure cross browser compatibility. It is necessary to declare a DTD or CSS simply will not work the same in the most popular browsers.
– You will also want to add this line:. This helps fix the IE compatibility error and will help with some sizing issues. It is not a must have. I have had no issues with the IE meta tag though. So, I would recommend adding it for now.
Next I recommend studying the box model of CSS. If you are used to using spacer .gifs, tables and the many other workarounds, this can be a tough habit to break. But once you have a good grasp of the box model, you will no longer need these workarounds for formatting and lay out. Also, if you start using CSS without understanding the box model you will most likely waste a lot of time bogged down trying to fix things that you would of never broken in the first place.
I’ve always hated the expression, “Think outside of the box”. I can truly say with CSS not only think inside the box. Learn to work inside the box.
Which brings us to our next fundamental. In CSS, just as HTML, you can use many types of measurement units. Usually working with pixels is fine, but the EM unit seems to be the most reliable. If you do not use a strict DTD for your pages definitely look at using EM instead of PX. Percentages are fine in most cases, but I have seen some small issues with using percentages. As you do your own research on this you will find more information. The main thing to remember is that 16px = 1em, and not all unit types will work in all browsers. Since pixels are most familiar to web developers, and EM is supported by all major browsers, these are the two main units that should be used.
Inheritance is also very important. Basically, colors, fonts and much more can be changed by CSS. The changes are applied via an external style sheet, a style sheet on the page or even a style applied directly into the HTML. Since the last style applied will be used, make sure you understand how inheritance works. Also, any default browser settings will be overridden by an external, internal or inline style.
A good example is the H1 HTML tag. I like to reset the default size and color of the headline tag. Although the default font is usually times and the default color is black, the font size usually changes slightly from browser to browser.
For instance, if I want most of the H1s to be a 20px Arial font and red, I would apply that in my main, most likely external, style sheet. But let’s say I have a page where I want the H1 tag to be a different size. I can override the external style sheet size with some inline style. So for this example, I really want my headline to stand out, and I change the size to 30px. But the headline 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 was never reset. So, until I 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, it will use the last style applied to the page. When you use external style sheets the page is processed just as if the code were on the page. So if you run into issues, make sure you are not importing multiple style sheets that are in conflict with each other. A best practice is to make sure that 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. can 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 will not break. So at the very beginning of my main style sheet, I like to declare some global settings.
Generally, you will want to override the default padding, margins and borders at a minimum. The padding, margin and border are the main things that vary from browser to browser. Once again, it depends upon your needs. But, because of inheritance, this will override the default browser settings on all of your tags and elements automatically. Personally, I like setting everything to zero with a default color of white. I’ve never had any issues with cross browser compatibility using these settings.
As I said, there is a lot of information about CSS available online and from other sources. This is just a guide on the main areas to focus on first as you become the next CSS expert developer.
