CSS is a very simple language, however it can also be the most difficult when considering all browsers. There are five easy steps you can take along the way to help avoid any hacks or problems.
1. Doctype: Always include a doctype in your html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
2. Global Reset: many browsers have different default padding, margin, or border values. This is where most problems occur. To avoid this always use this handy line in the very top of your CSS
*{ margin: 0; padding: 0; border: 0; }
Yes this does make your lists and all look unpleasant, but keep reading!
3. Initialize Elements: Always initialize your elements right after your global reset(padding, margin, and border). This way before you begin any class styles you know all of your elements will react the same. Most importantly your body, ul, ol, li, dl, dt, dd, p, input. Dont worry, if you missed one you will notice right away. Now all of your elements should have the exact same padding, margin, and border.
4. Use the Proper Elements: Pay special attention in your html elements. If its essentially a paragraph, use a paragraph tag. Don’t waist time in your CSS trying to change a div to look like a p.
5. Separate Appearance and Alignment: Try your best to declare things like line-height, padding, margin, font in your elements or in “global” classes. By global I mean a class that you will use on several pages. Then try to do all of your alignment(float, position, top..) in your more local styles to fit that page. This way your theme carries across the site, but your layout is able to change.
6. Use Local or Page Specific Styles: Once you have your basic theme down you don’t want to touch those. Try using local styles so they don’t effect anything else.
form.myloginform fieldset{ }
form.myloginform fieldset legend{}
You may wind up with a little more code that way, but it will be much more organized in the end.
7. Buttons Are Easier: When creating forms consider using a button(type=submit) instead of input(type=”submit”). Buttons are more consistent to style across all browsers and will give the same functionality.
8. Occasionally Validate: Occasionally validate your CSS and html. If nothing else this will let you know if you have any ending tags missing, and can save you a big headache when you’re a million lines deep in code!
There you have it, 8 ways to Improve your CSS life. Now go delete those ie5.css, ie6.css, and ie7.css stylesheets!
