I’ve been working with CSS for a while and with tables even longer. After working for so long discovering the tricks and solutions for tables, I have mostly used tables for structure and CSS for style. That is not a bad thing. But it only uses part of the power of CSS.
Also, I recently had a project that required a tableless layout. 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 pretty 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 the entire structure and design 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 or details of CSS. I’ve never found any aspect of CSS complicated enough to need external instruction or even a book, but I’ve wasted my time going through 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 made mostly of tables and converted it to all CSS. The basic layout of the site is a header, a sidebar, a main content area, an advertising section, and a footer. This is a fairly common design, but these guidelines will work for almost any new design or layout.
You must first truly separate all data of any structure and format. This seems obvious if you know anything about the CSS motif. I’m just pointing this out, because it’s very easy to add some formatting to the data if you’re new to the process. That wouldn’t be the end of the world, but you’d be losing the sense of exercise. Remember, the goal is to change the way you currently create pages and start using CSS whenever possible. The reason: so that major changes can be made to the appearance of the site without having to make changes to every page.
Second, always try to think if there is any chance that you are reusing the code.
NOTE: This may not make a lot of sense if you don’t have or have limited knowledge of CSS, but write it down and keep it in mind when you start using CSS.
If it is code that you are going to reuse, be sure to convert it to a class. Also, try putting it in your main stylesheet. As you progress through CSS, you will most likely have multiple style sheets. Having site-wide elements in your main stylesheet will make them easier to edit in the future. Also, since all pages will call the main stylesheet file, the class will always be available when you make a call.
Now, I will go into the main problems, problems, etc. which I found when I removed all the tables and other formats 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 closely as possible, in all browsers, the site almost certainly won’t display the same.
There are a couple of lines of code that need to be added to each page.
– First declare a standard document. If you are not familiar with a DTD (document type declension) it looks like this . The three main types of DTDs are flexible, transient, and strict. I highly recommend the strict one. Do your research to see what works best for you, but strict is the safest way to ensure cross-browser compatibility. You need to declare a DTD or CSS that just won’t work the same in most popular browsers.
– You will also want to add this line: . This helps to fix the IE compatibility error and will help with some sizing issues. It is not essential. However, I have had no problems with the IE meta tag. Therefore, I would recommend adding it for now.
Next, I recommend studying the CSS box model. If you are used to using spacer .gifs, tables, and many other solutions, this can be a difficult habit to break. But once you have a good understanding of the box model, you will no longer need these solutions for formatting and design. Also, if you start using CSS without understanding the box model, you will most likely waste a lot of time stuck trying to fix things that you never would have broken in the first place.
I’ve always hated the expression “Think outside the box.” I can really say that with CSS don’t just think inside the box. Learn to work inside the box.
Which brings us to our next foundation. In CSS, as in HTML, you can use many types of units of measure. Usually working with pixels is fine, but the EM unit 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 have seen some minor issues with using percentages. As you do your research, you will find more information. The main thing to remember is that 16px = 1em, and not all types of drives will work in all browsers. Since pixels are the most familiar to web developers, and EM is compatible with 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 on-page style sheet, or even a style applied directly to 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 an external, internal, or inline style.
A good example is the HTML H1 tag. I like to reset the title tag to the default size and color. Although the default font is usually time and the default color is black, the font size usually changes slightly from browser to browser.
For example, if I want most of the H1s to be a 20px red Arial font, I would apply it in my main, probably external stylesheet. 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 stylesheet with an inline style. 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? Although I reset the size with an inline style tag, the color and font family were never reset. So until you override the color, or any other parameter defined by another stylesheet, the H1s will inherit, in this case, the Arial font and the red shading from the external stylesheet.
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 rendered as if the code were on the page. So if you have problems, make sure you don’t import multiple style sheets that are in conflict with each other. A best practice is to ensure 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. it 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 stylesheet I like to declare some global settings.
Generally, you’ll want to override the default padding, margins, and borders at the very least. Padding, margin, and border are the main things that vary from browser to browser. Again, it depends on your needs. But, due to inheritance, this will override the browser’s default settings on all your tags and elements automatically. Personally, I like to zero everything with a default color of white. I’ve never had a problem with cross-browser compatibility using this setting.
Like I said, there is a lot of information on 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.