How do you include unique styles in a particular blog post?

In my last post, I was originally going to post the poem. I didn’t, but had I done so it would have brought up an interesting question:

If I want to include a certain piece of styling in a post in my blog, like making something blue, what’s the proper way to do it? Should I use a style attribute? Or should I use a class attribute? If I do use a class attribute, where should I put the stylesheet? I don’t really want to put it in the global stylesheet, since it’ll probably only be used once. Ideally each post should have its own stylesheet (should it need one), but where would it be linked to from? I really can’t think of any way to link from inside the post, but it doesn’t quite seem right to add the individual stylesheets into the head of the page that contains them actually, thinking about it more, I guess it does feel right to add the link in to the head of whatever page contains the post. How’s this work for RSS(-type) feeds, though? (I’m not really really versed in feeds, though I do have a post I need to make about them…)

Anne should probably add this (or some other solution to the problem, if someone comes up with something) to his perfect weblog system.

6 Responses to “How do you include unique styles in a particular blog post?”

  1. Arve Bersvendsen says:

    Since you don’t know in which context you are serving the styles, I’d say that <style> is the most compatible way to go.

    you could go about this is by using the data: URI scheme, RFC 2397, to include a free-standing HTML representation. However, that would leave IE out in the cold

  2. Anne says:

    The data: thing is a cool suggestion! Perhaps in combination with the OBJECT element or so, so you can also provide alternative content for screen readers.

  3. dolphinling says:

    The problem with a data: representation is that it changes the semantics. I want to still have normal (X)HTML semantics, not what an object and a data url implies.

    I think I was right in what I posted: the best way to go about it is to have each post (that needs one) have its own stylesheet, and the link is dynamically included on every page that includes that post.

  4. Anne says:

    What semantics does it change? I think data: is perfectly acceptable since you can use it to embed complete example pages and you are for sure that when you redesign your site your examples are not messed up.

  5. dolphinling says:

    object is for embedding things that can’t be described by the original language (namely (x)html), like images, movies, etc., or aren’t considered part of the original document for some other reason. While it’s valid and acceptable in some cases to have another (x)html page be that object, in this case it implies (to me) a separation between the original document and the post, when what I want is to have the post be a part of the original document.

    It also adds another set of html/head/body tags in each post, which changes the semantics quite visibly. And also, it looks really hackish.

    P.S.: If I’m going to use an object, why do I need to use a data url? I’d rather just have the post be its own page and use an http url.

  6. Arve says:

    You should also note that having <a href="data:..." >Link text</a> is perfectly legal.

    But, since you say you’re in need of embedding the styled portion within the original: Either inlining it fully, using <style> in a head section, or the style attribute on the affected elements also “work”. At least until you write something in your stylesheet that overrides your current styles.