Weblog Entry
CSS Source Examples
June 14, 2004A 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;}
</style>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.
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!
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.
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: http://www.misinterpreted.net/index/articlenews/9
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.
If all else fails, you could use the ‘Edit CSS’ favlet, which does all that work for you.
http://www.favlets.com/pub/000035.php
And as a CSS newbie, I thank you for passing on that advice for all of the great tutorial writers.
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.
Ignore my last paragraph. It appears that I am now a real person, with plenty of cookie pleasure!
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.
I use the Web Developer Toolbar all the time for this specific reason!
If you’re a TopStyle (http://www.bradsoft.com/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? :)
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.
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.
I agree totally Dave. Its bound to keep happening however and the best solution I have found is a bookmarklet from Liorean. http://liorean.web-graphics.com/
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.
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.
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.
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.
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.
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?
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.
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
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: http://www.jixor.com/experiments/2/
Yes! Keep the css in the (x)html source.
Well..
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.