Why not use the ‘universal selector’ method:
* {margin:0; border:0; padding:0;}

instead of:

html, body {
border:0;
margin:0;
padding:0;
}

that way, you will not need to remove margin, border or padding from anything else (e.g., not from FORM, TABLE, the H-tags, etc etc, as the ” * ” removes the stated declarations of “border, margin, & padding” from everything.) This saves you some KBs in CSS-file size not having to re-state to “zero” for other elements.

Also, this:

body {
font:100%/1.25 arial, helvetica, sans-serif;
}

-Should that ” /1.25 arial, etc ” have some sort of value, in px, em, ex, in, pt, mi, km, ly, -etc?? How is a browser to know if you meant to state “pixels”, “em”, “ex”, “inches”, “points”, “miles”, “kilometers” or “lightyears”? (being blatantly obvious here, -point taken? I assume that a browser would default to show “pixels” if not so stated, but this would fail validation in it’s absence I think )
Sizing fonts to “100%” and immediately re-sizing to the desired font-size is highly effective for cross-browser font-size disparity issues, but the font-size should be implicitly defined by a value and a unit of measure.
Nice article.
-Joel

@Joel: “Why not use the ‘universal selector’ method”

Well, I mentioned in the article that a global reset, which uses the universal selector, is a bad idea because it completely destroys certain elements that are native to the operating system, and cannot be brought back with CSS.

For example, setup a test page and use the global reset, and then create a form button. Look at the styling of that and compare it to a button that hasn’t been globally reset. You lose not only browser styling, but OS styling as well.

That’s ok if you are using custom buttons throughout, and while that’s not a bad thing, it brings up a usability issue as well (not showing a button that people are used to).

There are other elements that are destroyed as well, I would have to actually test them out to come up with a definitive list.

Cameron Adams of The Man in Blue says, “I’m a bit more judicious in my selection of which elements to zero out.”

I suspect because of this very reason. That, and the fact that you are going to have to adjust the styling of these elements anyways, so might as well do it when you need to.

@Joel: “Should that [font size] have some sort of value”

It does actually, it has a percentage amount:

body {
font:100%/1.25 arial, helvetica, sans-serif;
}

I am hoping the percentage sign shows up for you, if it does not, please let me know. That wouldn’t be good at all
Thanks for the comments.

Submitted to Tweako ( http://www.tweako.com )

Just a small thing.

‘Italics’ and to a lesser extent ‘Bold’ are strictly typographical conventions, so they don’t really have any meaning in non-textual media. It’s often recommended that it makes more semantic sense to call that class something like ‘.emphasize’, rather than ‘.italics’

That means:
a) it’s clear what your markup is trying to say.
b) if, at a later date, you wanted to change the way your CSS represented emphasized text (say, in a font variant that is italicized by default), your styling isn’t tied to a classname that wrongly describes what it is.

@Joel: Should that ” /1.25 arial, etc ” have some sort of value?

Ah! I see what you are saying. I misread what you were saying the first time and thought you were talking about the font-size.

Yes, you do not need a unit of measurement after 1.25. You could, for example, have 1.25em and it would be the same thing.

Steve explained why this is so, thanks.

@Alex: […] the way your CSS represented emphasized text (say, in a font variant that is italicized by default), your styling isn’t tied to a classname that wrongly describes what it is.

I can’t think of a font variant that comes nautrally emphasized that isn’t part of the core web fonts, so I’m not seeing your point on that one.

Second, the reasoning behind “bold” and “italics” is for clarity sake. In most word processing units, and for most people who grew up with the obsolete <i> and <bold> tags, that is why the naming convention.

Either way, you are you free to name those as you wish. This is just how I prefer to do it, and “italics” is easier and shorter to write out than “emphasized” and “weighted” or whatever.

You wouldn’t use this in a paragraph though, you should resort to the traditional <em> and <strong> tags, this is more for setting a block element one font style.

The “bold” and “italic” classes are completely pointless. The logical and proper approach would be marking up the elements with <strong> and <em> (or <b> and <i> depending on the doc-type).

(Unless those elements are aimed to supplement other styles and not to be used on their own)

Don’t screenreaders needs the <em> and <strong> tags?

Thanks for the comments and suggestions. I’ve never seen Meyer’s reset or the Yahoo! one either. I will look at them shortly though.

One point I’d like to make out, this stylesheet is not a global reset. It is a master stylesheet that happens to reset commonly used items and apply appropriate styling to them after they have been reset. Apples and oranges here.

Meyer’s version, after looking it it, does not add styling, it’s just removing styling. Second, his version is not cross-browser compatible because it uses the psudeo :before and :after.

This is a very good format to follow. Good job

Alex,

I see what you’re saying, and I would not use the class to put emphasis on text within a paragraph, just as I would not use the bold class that way either. I would use the respective HTML markup.

Either way, the “Global Classes” section is up to your own preferences. Add or remove things from there as you wish

Actually, in that case, I would use the <cite> tag and style accordingly
And I never took your comments as argumentative, you brought up a very valid point that I did not consider.

Come to think of it, I’ve actually never used the italics class on an element. I have used the bold one on a few occasions, but it’s rare.

Thanks for the comments though, I’ll be revising this stylesheet based on the comments or new methods of doing things (such as the addition of the sup and sub tags).

Yansky,

Nope, that doesn’t bring back the styling either. Once it’s removed with the global reset, it’s destroyed for good. Basically, don’t use the universal selector reset. I don’t know how much simpler to state that.

Question: Why does my browser ask me if I want to display ‘active content’ when I load this stylesheet into an html file?

What makes this ‘active content’? Sorry I’m a noob. Please let me know or email me drewsecret at gmail dot com thanks!

Drew,

My only guess would be you are trying to view the file locally in Internet Explorer? Other than that, I have no idea why it would do that, I’ve tested this code by itself and have never had that come up before (in any browser).

Try it live and see what happens.

I agree wholeheartedly about using XHTML for markup of information and CSS solely for style. When you start putting in your XHTML documents, that’s not describing the data; it’s describing the style.

would more accurately describe the data and let you make an important item whatever you wanted it to look like using CSS without confusion.

Great post. I’ll be adopting your concept.

That didn’t work either. Forget it.

forgot to add…great article! very informative, very helpful - i do start with a master sheet, but it doesn’t have nearly this much stuff in it. i will definately be adopting some of your techniques - thank you!

I’am a Chinese, please forgive my for my poor English,
I think you some “Global Classes” is not good idea

for example:

<span class=”text-center”> … </span>

same as

<center> … </center>

Great discussion!

Is it better to use <strong> and <em> or <span class=”bold”> and <span class=”italic”> etc? Granted that the idea is to separate form from content, one must ask “when is the form part of the content?” When the author of a text says “this is important” that is part of the content. When the designer says “I think the emphasized text ought to be 18px bold green” that’s form. So put the em tag in the html and style it in the css.

When you have a class called “float_left” and all it does is float an element left, are you really removing the style from the structure? You’re embedding the style in the structure in a way that makes the browser refer to the CSS to do what it could have done faster had the “float_left” been inline, without adding any semantic value. What are the chances that you will globally change “float_left” to really “float_right” or not float at all, or have a 5px padding…?

Is em the thing to use for margins and padding? I used to think so. But if you put your font sizes in pixels and use ems for margins, then IE6 users enlarging the font size (which adjusts the em to px ratio) will see the design expanding without any change to the font size.

And the global reset versus targeted resetting in the master stylesheet. I like the approach presented here, in that Kyle only tears down what he means to rebuild, and does so immediately resetting the margins. It’s a more circumspect way of saying “At the beginning of this project I’m going to sit down and decide what I want the colors margins etc of these basic tags to be, before I move on to the layout, individual sections, etc.

@Stephen: if i give something <div class=”box float-left”> how is that any different than <div class=”box” style=”float:left”>?

That’s just a personal preference, I personally don’t like using style=”" on an element, unless I’m debugging or coming up with a layout. Why not just store common things like that in classes and use them when necessary?

A good example is the floating of an image to the left, you could just apply the float-left class, or use the preferred image-left class, which adds padding to align the top of the image with the top of the text, because ordinarily it doesn’t line up.

Does it defeat the purpose of CSS? I don’t think so.

CodeBit.cn,

The reason you wouldn’t use the <center> tag, is because it’s deprecated. It’s the same reason you wouldn’t use the <b> tag, or <br> tag, but instead the <strong> and <br /> respective tags.

Here’s a perfect example of where something like this would come in handy:

See the yellow “highlighted” boxes on the top and bottom of the article? Those are used all over the site, except everywhere else (and perhaps one or two other places) the text is aligned default to the left.

I’m still using <div class=”highlight”> … </div> to bring up the box, but in the case of the social bookmark links, I wanted the text to be centered, so I just apply the class and voila, it’s centered. See the above post for why I just don’t do style=”text-align:center”.

Should I keep this master.css file separate from my other style sheet? Or just continue filling your master.css file up with my styles I make for the site?
How would I call the file(s) then from within the HTML document?

@Henrik: Should I keep this master.css file separate from my other style sheet [or] just continue filling your master.css file up with my styles I make for the site?

I don’t like using multiple stylesheets, but I know some people that like to split them up into like header.css, navbar.css, footer.css, and so on. Not really the best idea in my opinion. You have more files to call and it’s a hassle to open up multiple files to edit something.

I would keep it all in this file, but call it screen.css since it’s only used for the web. Make sure you keep it organized though, and split up sections with the little comment dividers. Oh, and always keep the global classes at the very bottom of the stylesheet.

So basically, right after #wrapper is where you would place your other styles. I personally like to keep it organized by the flow of the document, so it would follow like so:

#wrapper
#header
#navbar
#breadcrumb
#content
#sidebar
#footer

Just as an example. It makes it easier to remember where things are if you organize your stylesheet in a “visual” sense of how a web page breaks down.

@Henrik: How would I call the file(s) then from within the HTML document?

<link rel="stylesheet" href="/path/to/screen.css" type="text/css" media="screen" />

Kyle,

The example give in my previous post:

<span class="text-center">…</span> and <center>…</center>

Just like David Furber said “it still puts the style in the HTML”, the meaning isn’t suggest use <center instead of <span class="text-center">.

In you current design, the yellow “highlighted” boxes on the top and bottom of the article, the text to be centered, but in next design or other theme, the text should be set to right, then you have to edit the XHTML tag to:

<div class="highlight digg">
    <p class="text-right">...</p>
</div>

my method:

<div class="highlight digg">
    <p>...</p>
</div>
 
.digg p {text-align:center;}

if the text should be set to right, we just edit the css to:

.digg p {text-align:right;}

I can design multiple theme, and no need to change the xhtml.

forgive me for my poor English, do you understand what I meaning ?

Very nice article, and some great feedback too. A good starting point for any web project.

The issue of pixel versus em is a tricky one. You’ll find people on all sides saying different things, it really comes down to what you are most comfortable with, and how far you want to take things.

I have no problem using pixels for structural elements, like a sidebar, and using ems for font sizes. My sites look the same no matter what browser is being used—aside from the minor differences that all browsers have, which you really can’t nitpick over.

Part of me actually likes how Internet Explorer 6 will not resize an element if it’s in pixels. Why would a user need to resize, for example, your sidebar? The only thing a user would ever want to resize would be the text. At least, that’s what I imagine, correct me if I’m wrong.

It would be nice of future revisions of CSS allowed the author to specifically declare that an element could not be resized, that it had to hold it’s value no matter what.

Then you get into different browsers and how they handle this. Firefox will resize everything, even pixels. And that’s great and all, but as a designer, the main focus right now still lands on Internet Explorer 6.

On the flipside, Opera approaches resizing completely different than other browsers. It treats a web page more like a PDF document, where you’re not simply resizing, but zooming in and out. The layout never breaks because of this.

It’s a wonderful feature of Opera (I’m an Opera user if you couldn’t tell), and I really wish all browsers would come to an agreement on resizing, but I’m not holding my breath.

I have no problem using pixels as a measurement for layout elements. I would not use it for fonts though because of IE6 since it won’t resize it. But keep reading and you’ll see why this shouldn’t matter either.

If you want to set all of your elements with a variable cross-browser unit like em or percentage, then by all means do so. You’re now crossing over into elastic layouts though, much different than fixed or liquid.

Elastic layouts are actually really tricky, because you lose a lot of control, just like you do with liquid layouts, which I strongly advise against. The liquid layout should die, I would rather have a fixed versus elastic debate any day of the week. Yahoo! actually has an elastic layout, and they do an alright job with it.

For a really good example, check out the Elastic Lawn at the Zen Garden.

I personally like to use pixels for layout elements (header, navbar, sidebar, footer, etc.) and ems or percentages for fonts, or things that need to be adjusted.

You’ll notice that in the above stylesheet, textual elements like heading tags, paragraphs, and certain styling of text (like the small tag) use ems for their size, but the spacing (padding) is set in pixels.

Could it be in ems? Sure. Feel free to do that actually. You should develop your own master stylesheet that you’re comfortable with. That’s the whole point of a master stylesheet, to give you a base to start with that you can use on every site you make.

I think designers need to take a different approach though. Why should a user have to resize your website in the first place? Shouldn’t you, as the designer, come up with a font size that pleases everyone? I can guarantee you that no one who comes to this website has had to increase the font size of a page. You can sit back in your chair and read comfortably.

I would take a look at the following article, where they dub this technique as 100E2R, or 100% Easy-2-Read standard. Don’t forget to read Web Design is 95% Typography either.

The first rule they offer makes perfect sense: don’t tell me to adjust the font size! Why should I have to resize my text for one website, and then resize it for another? Why should I ever have to do this? The designer should be the one to come up with a usable layout, column width, font size, and line height, not the other way around.

Sorry this comment is really long and probably all over the place. My thoughts were jumping around and it’s late. I’ll probably have to revise this later, or hell, at least organize my thoughts and write an article about it

Michael,

Ah, but I was talking about the actual sidebar, not the text in the sidebar. I understand why people need to resize text on a site, but “structural” elements like the sidebar and footer do not need to be resized.

That’s what I meant when someone asked if those kinds of elements should be used in ems instead of pixels, or why CSS should allow the author the ability to “anchor” the dimensions of elements if they want.

That brought me to the main point though: why should you have to resize text in the first place? Shouldn’t the designer be the one to set the font size to a reasonable amount?

Font sizes definitely have gone through trends. I remember when small was “big,” and everyone wanted like 8-10 pixels for text (and people still do this with Flash, but you can’t resize text in Flash).

Now we’re realizing that there’s nothing wrong with a big font size, the 100E2R Standard.

Nice article. Two questions:

1) I tried your recommendation to do the global reset and create a form. It didn’t flatten out the button like you showed, unless I did the border: 0;. What is it that exaclty breaks if i just do the global on margin & padding?

2) “Sizing fonts to ‘100%’ and immediately re-sizing to the desired font-size is highly effective for cross-browser font-size disparity issues, but the font-size should be implicitly defined by a value and a unit of measure.”

I am not familiar with this gimmick. As per Zeldman’s recommendations, I always use px on fonts. I understand the potential benefits of ems, but always steered clear because of the issues with doffering base sizes. Does this trick fix that somehow?

Great idea. It is much better than a global reset. Thnx.

XHTML 1.1 Transitional is a good DTD to use, I see no reason for going Strict.

And here’s a list of the core web fonts:

http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

You could obviously add the Lucida and a few other families in there. Safe web fonts would also be good to look at:

http://web.mit.edu/jmorzins/www/fonts.html

great one. thanks..

Great articles dude, i have saved it to my favorites.

A very interesting article, and also some very interesting comments too!

Reading in to what Alex said about the 100%/1.25 Arial stuff, I’m believe he has a point about putting a unit of measurement at the end of it, it’s better to use common practice and always specify units of measurement whether you have to or not (whether it validates or not) it might be anal to do it, but if people get into the habit of remembering to specify, then they are less likely to forget in other times.

A quick helpful hint too: Always reset your font sizes in the body element to 62.5%, this sets and standardizes your page fonts to 10px, and alows for very very easy use of decimal measurement with em. As it is best practice to use em’s for everything, I advise that this is always done. I used to have nightmares about developing the CSS for my clients sites until I adopted this method, then the sun came out and made it sooo much easier to measure things.

I’m going to be integrating your master style sheet into our framework that we are currently working on….

Good info. Thanks for sharing.

Some good CSS, thanks for posting. However, you lose credibility when your own website doesn’t render well in Firefox. The numbered listed is mucked up…

Great article, i love css
Profesional web hostin service http://www.totoidc.com

Nice article…..

Однако… А чо это за сцылки?