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