CSS 3 is the new hotness, but this series of posts is going to be a bit of a throwback to CSS 1 and 2. I don't believe you can really take advantage of CSS 3 without knowing your way around its predecessors.
I will refrain from the standard "Tables are the devil, CSS is our savior" introduction. I'm sure most know this by now. So I will begin with how I write my stylesheets:
Step 1: Reset CSS
Open your favorite editor. Create a webpage with "Hello World"
Save it and open it in your favorite browser. Notice the size of the font and its position on the page. It may seem like a standard webpage to you, but that is misleading. As I am sure you know, browsers have built-in default stylesheets and users can change that on a whim. Personally, I like my text big and I have my browser automatically increase text size at least 200%.
If you are a web designer with your heart set on a pixel perfect design that looks the same on every browser, you can't assume that every browser, or every user is starting from the same place. So your stylesheet needs to reset the default page style. I have two places bookmarked for this purpose.
The code at both sites are in the public domain, you can copy and paste on your stylesheet to your hearts content. You need to make sure that it is the first thing at the top of your stylesheet or else your actual styles will be overwritten.
Your stylesheet is now reset! You might want to add back the styles for some basic elements like <strong> or <em> which no longer bold or italicize your text. If you want to make sure all your bases are covered, I have included some placeholder text that uses a lot of the usual formatting tags below. Feel free to copy and paste.
If I am missing any tags that you feel should be included, please comment and let me know so I can make the necessary edits.
Part 2 tomorrow will be on Classes and Ids. There will even be a bit of CSS 3 thrown in there, so hold on tight.
No comments:
Post a Comment