Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

CSS Source Examples

June 14, 2004

A quick tip that anyone who would put together a CSS example page for an article or a demo should follow: embed your CSS in the HTML, don’t link it.

Linking or importing a CSS file is a good practice when finalizing a production site of course, but when you expect people to view the source of your demos and learn from your CSS, don’t make it a four step process.

Do this:

<style media="all">
 body {color: #000; background: #fff;}

And not this:

<link rel="stylesheet" type="text/css" href="example.css" />

Instead of making I and everyone else wishing to understand your code 1) view source, 2) hunt down the path, 3) select and copy the filename, then 4) paste it into the address field, we will appreciate your simplifying the process to a single step. And we thank you for it.

Reader Comments

Claus says:
June 14, 01h

I would go with Ben Hollis and use the webdeveloper toolbar for firefox/moz. It even let’s you handpick a specific object on the page and only shows the css for that object, really nice in a crowded stylesheet!

June 14, 03h

For some reason, I prefer having the two in separate documents. I guess that is just the way I am used to working now, but when I am editing HTML + CSS, I can’t stand having them in the same document and having to scroll up and down to see different elements and the style that corresponds to them.

I love having the two side by side, one in my HTML editor of choice (bbedit) and the other in my CSS editor of choice (CSSEdit). I can them line them up to see the html and what it is doing while I am looking at the CSS for that element, while changing it if need be.

If you are just making a demo you want people to learn from, as this article talked about, then I would definitely consider using imbedded styles as the preferred method. This makes it easy for people to just hit “View Source,” take a look at it, and learn.

For a demo you plan to have the user play around with and edit on their own however, a method like the garden with the “Link to this page’s CSS file” is perfect.

June 14, 05h

A pretty good advice there Dave. I’ve never thought of it that way before, but on my latest post I used inline styles on the examples:

stylo~ says:
June 14, 08h

By far the wost offense on examples is using @import because then you don’t get the css when saving the page (unlike linked css), you have to separately track it down and file it away. What a hassle.

Brandon says:
June 14, 08h

If all else fails, you could use the ‘Edit CSS’ favlet, which does all that work for you.

kadavy says:
June 14, 09h

And as a CSS newbie, I thank you for passing on that advice for all of the great tutorial writers.

June 14, 09h

I completely agree with you on this. Although most of my CSS articles are a little old now, they all had embedded CSS (with one necessary exception). It makes life an awful lot easier for the “punters”.

On an off topic note, your “remember me” cookie doesn’t seem to ever remember me. At first, I thought this might be a consquence of your recent rebuild; however, now I am beginning to feel isolated and unimportant LOL.

June 14, 09h

Ignore my last paragraph. It appears that I am now a real person, with plenty of cookie pleasure!

June 14, 09h

While we wait for everyone to take Dave’s advice (and they should), I like to use the Web Developer’s Toolbar for Firefox/Mozilla. It has an Edit CSS button, but what’s better, has a View CSS button that pulls together all the external, internal, and maybe even inline (haven’t seen inline styles in a while) styles into one nice formatted page. Great for looking up the “how’d they do that” on your favorite CSS wonders.

Meashman says:
June 14, 09h

I use the Web Developer Toolbar all the time for this specific reason!

June 14, 09h

If you’re a TopStyle ( user, you can use the Open from Web function to load a page, and all of it’s linked files (CSS, JS) in the editor.

Not nearly as handy as embedded CSS, though.

Maybe we need Demo Standards? :)

Anon says:
June 14, 09h

I fear this advice is *obvious* to those who know CSS.

Secondly for those that don’t, they might feel inclined to try embedding CSS inline like they did with stylistic elements such as FONT before.

June 14, 10h

Good advice. I would also recommend that all CSS that is superfluous to the example be stripped away or placed in a linked file, so the reader sees only that which is relevent to the example.

Terry says:
June 14, 10h

I agree totally Dave. Its bound to keep happening however and the best solution I have found is a bookmarklet from Liorean.

The “ViewStyles” bookmarklet. It is a long script and hosted from the site itself. It has the ability to load external style sheets in link tags and from @import.

markku says:
June 14, 10h

Well said. CSS tutorials are most helpful to those just starting out, and they would benefit a lot if they don’t have to send another HTTP request just to get the stylesheet.

Some don’t even know how to do that.

June 14, 10h

The problem with that is eventually you’ll get a whole host of people using inline styles - thus violating one of the bigger advantages of using CSS.

As a best practices point, it’s a good idea to create a link to the CSS file as a reference so that one doesn’t have to hunt for it, but especially in a situation where you expect someone to look through the code you might as well follow through on other best practices rather than break them for the sake of convenience.

Max says:
June 14, 11h

I completely agree. When I was just starting to learn CSS I found it unbearably frustrating having to look at external CSS files in tutorials.

I can’t imagine it would cause people to use inline CSS when publishing either, though I might be wrong.

Scott says:
June 14, 11h

A simple “View this page’s CSS” link (with the “view-source:” prefix) would satisfy this need, while keeping CSS external - much like the CSS Zen Garden pages.

sil says:
June 14, 11h

I’m with Scott on this. My little tutorials tend to have links to the CSS file directly in the text, since they’re, well, tutorials. Adding CSS to the pages encourages some people (who see and are impressed with the technique outlined, but aren’t fully into the whole Zen of CSS) to do the same on their own sites, so perhaps a link in the body is a reasonable compromise?

June 15, 01h

I couldn’t really remember which way I did it. Apparently I also keep everthing on one page. But that’s because I’m lazy.

In fact I always work this way when setting up a new page. I transfer everthing when I get to the styling phase.

Haunani says:
June 15, 06h

Thanks Dave for making it practical for those of us trying to learn and those of us trying to pass on the knowledge.

completely appreciated - Haunani

jixor says:
June 16, 08h

I don’t know, I think the best way is to have the explanation separate with the code printed out on the page, even if you have what you are talking about in html/css with on the explanation page. Then have a stand alone page with just what you are talking about in the tutorial/example (within reason). I just did a little css thing and I focused in on only the code specific to what I was explaining. The css file contained a lot of basic styling, layout, etc. stuff and the example wasnt really about that side of things. I felt that the explanation of the code was enough and a stand alone version wasnt required as it was just a proof of concept. So I think if you have a stand alone example, like “see fig 1.2” or something then they should definitely have the css in . So basically I am agreeing with you here. Oh well.

PS I am referring to:

June 19, 12h

Yes! Keep the css in the (x)html source.

Matthijs Aandewiel says:
June 20, 09h


I think that embedding the CSS takes all the fun out of checking “How did they do this?!?”. Also, when checking for specific css / html tags you would have to keep scrolling up and down.. if you have a website of over 500 lines.. this would be virtually impossible.

Just thought I would give you my piece of mind.. since no-one else does.