an ordinary blog — andr3.net

rss feed

my lifestream rss feed

are you tired of this? then return to latest posts

When is inline styling acceptable?

(warning: lengthy, nerdy post ahead)

Many standardistas and CSS advocates will answer NEVER! [google search] in a split second. But let's take some time to think about this. One of the biggest advantages of using CSS to style your hypertext documents is the centralization of the display layer in separate files. As we all know, it is a recommended practice to separate the document in three (or four) parts:


Three Layers of Separation

  • Content (xhtml)
  • Display (CSS)
  • Behavior (Javascript)

The best way to achieve this, is to have an XHTML document, an external CSS file and also an external Javascript file (.js). Why? Simple, this way you can control each part separately. There are other advantages, such as bandwidth saving, but I'm not getting into that now.


If you want to go even further...

Four Layers of Separation

  • Data (Server Side Script + Database)
  • Structure (XSLT)
  • Display (CSS)
  • Behavior (Javascript)

For more info on this subject, read ParticleTree's article entitled 4 Layers of Separation, by Ryan Campbell.

Ok, but what is Inline Styling?

Oh, I'm glad you asked.
Usually, you'll include the CSS file using a <link> element in the <head>, like so:

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


This way you can change, for instance, the color of your links in the style.css file and have it changed in any page in your website – provided that you included that line in every page.

Inline Styling is when you include styling rules within the XHTML document itself, like:

<h2 style="color: red">This is a red heading</h2>


This is no better than using the deprecated forsaken <font> tag, because it will clutter you XHTML and make it hard to update if it's a fairly sized document/website.

Another form of inline styles is when you include a style element in the head of the document.

<head>

...

        <style type="text/css">

            h2 { color: red; }

        </style>

...

</head>


This is nothing more than just a set of CSS rules, just like an external file, but is embedded in the XHTML code of the page. I don't have to tell you why this isn't appropriate for websites with more than one page, now do I?

So when *is* it acceptable?

Let's see, where do you draw the line?
(if you don't want to read the extensive analysis of each case, skip to the conclusion)

A couple of weeks ago I read something about using inline styling in test or tutorial pages – can't remember where, but if you know, leave a link in the comments. Thank you – If you're simply putting up a test page, as an experiment or a tutorial, you shouldn't tuck the CSS into a separate file. Stick the <style> in the <head>.
(usage 1: test/tutorial pages)

What else? Hmmm... what about articles/posts? When you're righting an article, it's common to refer to certain cases that are specific to that piece of text.

[Detail of Serenity (the movie) cover]Imagine this is a text you're writing and now, just for the sake of it, you want to point the reader's attention to a picture on the right. You say, As you can see in the picture on the right. The way I do this, is by including a class attribute in the img element, thus applying the CSS rules float: right; margin-left: 10px; border: 1px solid #333; (for example) to the picture. You can also want to make some text red, for some reason. Would you prefer to have redundant classes for every color? .red { color: red; } .blue { color: blue; } .green { color: green; } This seems like too much work for a simple, static thing.

Red will always be red and blue will always be blue, but you might want to change the red to a lighter red, or a darker one. So maybe it's worth the effort of writing some extra rules in your CSS for this. What do you think?

But wait a minute! What if you don't have the external CSS file? What if, more specifically, you're reading the article from the feed in an aggregator? Even if the summary of the item includes the CSS class, RSS and Atom formats don't allow you do specify a stylesheet for you content – you can specify an xml-stylesheet for your XML document, but they're different (see RSS Feeds don't have to be ugly). There's no way of displaying the text in red just by putting a class "red", even if the aggregator understands CSS and XHTML.

Just don't see this as an excuse to fill your articles with inline styles. You should use some sort of server-side scripting to do the job. This way, you'll have perfectly written articles stored in your database and still deliver a faithful alternate version of your website through the feeds – that's what feeds are, alternate versions.
(usage 2: Items summary in feeds)

Also, I've been debating on how to redo the Playlist and Movies lists, which you can find on other sections of this very website. The images are, in the strict sense of the word, content. So why hide them in a CSS? Because I don't want to feed them to handheld devices or to printers.

If I used inline styles, there would be no way to make this distinction, but since the images are pulled from a database I don't feel very comfortable having a CSS generated through PHP. Sounds like I'm going an extra mile just to stay restricted to this "non-inline-styles" format. Is there a better way to do it? Maybe. Including a <style> in the <head> and have the script defining the background-images according to the elements' ids. But I still can't decide on which is more "correct" from the web-development point of view. I don't want to use external CSS files just "because". I'm looking forward to getting some feedback from you lot.
(usage 3: Dynamically generated markup?)

Conclusion

Even though it's not recommended as best practice, it is my opinion that on these situations it is acceptable to use inline styles.

Acceptable usages

  • Test / tutorial webpages
  • Items summary in RSS/Atom Feeds
  • Dynamically generated markup?


In every situation in which it doesn't make your job harder and still allow you to quickly edit certain aspects of the display layer, you shouldn't refrain from using them. Don't say no just because it's not a recommended practice. Think for yourself.

This is now, what about the future?

While discussing this matter with my fellow João Craveiro, he hinted me to a message from Ian Hickson in the www-html W3C Mailing List.

He defends that we don't need the style attribute in XHTML2, since it is a Semantic Language and not a page layout one. It should represent the content of the page and provide mechanisms to enhance the display layer, by referring to external files.

He also addresses the syndicated content issue I've mentioned above. He states that XHTML2 isn't the language for everything. Maybe XHTML 1.1 transitional is more appropriate for this environment. I believe future RSS and Atom formats should take this issue into consideration. Publishers should be able to either provide a link to an external CSS file or include a certain set of CSS rules to be applied to the content. I've looked into RSS3 Lite spec (first draft) and I can't find no reference to this issue. After debating this issue I'll get in touch with the author – I'm sure someone has thought of this before.

I've talked the talk. I will walk the walk.

Soon, I'll have all feeds of andr3.net embedding CSS styles in the description of every item. This should provide with better looking items outside of the browser since I make heavy usage of image floating and other visual aids in my posts.

In the near future I will also publish the php code I wrote to embed a small ammount of CSS into the feeds, so you can all use it or port the code to other languages/platforms. That is, if this proves to be a good idea. If it isn't, let me know why.

↓ Comments

↑ top