CSS Snippets Every Style Sheet Needs
After writing CSS for a while, you start to develop your own style in a seemingly mundane brigade of pink and blue. Every style sheet I write includes some little things that if taken out would destroy the site, as they’ve become crucial to me over time.
First thing’s first, if you want maximum control over everything, you have to take out some of the browser set defaults.
* { margin:0; padding:0 }
That takes off all the default margins and paddings so that you control the styles, not the browser. Next, you want to control the font sizes in a way that all browsers can resize.
body { font-size:62.5%; color:#333 }
Now with that, you can use EMs as if you were using pixels, just divide by 10. I also set the main text colour right at the top, but not the font itself. Fonts throughout will vary for me so I set them like this, for a specific portion:
.post p { font:normal 1.2em/1.6em "Lucida Grande" }
This way nothing will interfere with the headings or anything else that may have a different font. Next is a class that you can use over and over after some floating.
.clear { clear:both }
This is something that I thought of while figuring CSS out for myself, and found out later it’s actually use very widely, and for good reason. After having something floated, if you want the next element to not be totally misaligned, just drop this above it.
Also, when coding a layout from scratch, it’s good to have standard names for classes of things that appear very often. Use IDs for items that will only ever appear once, like your logo, header or footer, even columns and for things that could appear more than once, use CLASS. In a layout, I use these standard names:
- #logo - <div> that holds the logo
- #masthead - the header of the page
- #nav - usually an unordered list containing the navigation links
- #wrapper - this comes right after the <body> tag, and holds everything
- #content - where all the content and columns will go
- #footer - the end of the page.
For the columns in a page, it will vary. It depends how many columns there are, what goes in them, where on the page they are, etc…
These things may seem simple, but when removed the layout will totally deform. Random space, font sizes and things all over the page definitely don’t reflect very well. If you have some CSS that you can’t live without, post it in the comments. Don’t forget the <code> tags!
Leave a comment
Razor
July 5th, 2007 at 10:59 AM
even though the websites i make are “web 2.0″ style code, i still use a simple table for aligning parts. not that i cant use floats, just that if i want column a’s background to be as long as column b or vice versa then i use tables cos it streches each td to the size of the parent tr which inturn resizes teh table
Connor Wilson
July 5th, 2007 at 11:06 AM
There’s such thing as “web 2.0 code”, really. Even “web 2.0 design: is pushing it.
But there is never a need for tables, even for what you want. It can still be done very simply with CSS.
Andy
July 5th, 2007 at 3:40 PM
I find tables useful when .. I need tables? :p
I’ve used them for layouts a lot before and no problems really.
Nice tip with the fonts, I’ll try and employ that sometime
Razor
July 5th, 2007 at 5:23 PM
although i could achieve the same effect with clear:both; im targeting http://www.micade.com at a wider audience then the web dev world. i mean not everyone has firefox or opera or anotehr standards complient browser. by using tables, even if some css is messed up, the main layout is still intact.
Ben Bleikamp
July 5th, 2007 at 11:12 PM
Web standards != web2.0.
The reason for not using tables goes beyond keeping people interested in web 2.0 happy. Tables are unnecessary for making a background of a sidebar different from the page - just use a background image. Standards compliant pages look great in IE6 & 7, Firefox, Opera, mobile browsers, and future browsers - laziness is not an excuse for using tables to make a sidebar color repeat down an entire page.
Of course, if you have tabular data, i.e. something that would look good in an Excel spreadsheet, then go ahead and use tables. Otherwise, you’re coding wrong - there is no other way to say it.
Ben Bleikamp
July 5th, 2007 at 11:15 PM
Also, just a note, * { margin: 0; padding: 0; } is not the best way to reset all the styles.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Connor Wilson
July 5th, 2007 at 11:17 PM
That sums it up as well as anyone could. The way you code your website should have no relation to the audience, content or what have you.
The only tabular displays on that entire site should be the forums. And get some thumbnails beside those games
Connor Wilson
July 5th, 2007 at 11:19 PM
That’s an interesting article, Ben, and though I only tend to reset the margins and paddings, resetting everything would really be the way to go in terms of total control.
cherries
July 6th, 2007 at 1:38 AM
I use:
* { margin:0; padding:0;border:0; }
instead of:
* { margin:0; padding:0 }
L3ggy
July 6th, 2007 at 12:50 PM
Very nice. I use { margin:0; padding:0 }. I’m god at CSS though. I can code almost anything in CSS, unless its impossible. The only thing i don’t understand is the z-index.
Connor Wilson
July 6th, 2007 at 12:55 PM
z-index is very simple, actually. You know how a graph has a Y and X axis that go up and down. There is also an Z axis which comes out.
Its like how a cube has length/height, width and depth. Depth is the Z axis. Now, z-index just refers to the order elements sit on that axis. The higher the number the “closer” they are to you.
For example, something with a Z-index of 10 will be in front of something with a 5, if they overlap. It’s used in conjunction with position a lot.
.class { z-index:10 } /* just an integer */
For usage.
L3ggy
July 6th, 2007 at 1:03 PM
Ohhh thats how my mate did those tabs. He used z-index and had it with a minus margin to over lap them. I see simple, thanks Connor.
Andy
July 6th, 2007 at 1:28 PM
I tried using the Z-Index with Javascript once to display, it didn’t work out so well
Do you have to set the Z Index for both elements and can the Z Index be as high as you want?
Connor Wilson
July 6th, 2007 at 1:35 PM
I believe the defualt z-index is 0, so if one element has it (higher) it will be in front. It goes as high as you want, I think.
A graphic designer
July 14th, 2008 at 1:44 AM
I think the point razor is making is that sometimes fighting CSS is so maddening that you just want to take the easy way out and use a table. Also table layouts are WAY more backward compatible than CSS layouts. This may not matter to you if you’re targeting IE6+ and FF2+, but I personally try as far back as IE3, NS3, and Opera 5. The code you’re talking about totally falls apart in old browsers like that.
Login »