Comments on: Web Design Sans Style Sheets

Question: Web Design Sans Style Sheets

echo target — Thu, 22 May 2008 13:43:05 -0800

Any tips on web design WITHOUT style sheets? Yes, I know that's crazy talk.

I work for a state government agency, and I'm in charge of trying to make our website usable and worth using, neither of which it is now. I'll be working under strict bureaucratic requirements. Essentially, I have nothing to work with but HTML. There is a style sheet, but it does nothing but set a few text properties, and I don't have the ability to change it or add on to it. It's guarded like a Grail.

I know people built pages with nothing more than HTML in the Dark Ages, but that was before I got into web design. I don't know the tricks and techniques of the era.

Does anyone remember their old tricks?

By: echo target

echo target — Thu, 22 May 2008 13:44:22 -0800

Just to clarify, I'm not trying to recreate the look & feel of the olden days. I'm trying to apply modern conventions of layout and style to a, shall we say, limited authoring environment.

By: dagnyscott

dagnyscott — Thu, 22 May 2008 13:49:37 -0800

You can always embed a style sheet in the HTML document.

By: Inspector.Gadget

Inspector.Gadget — Thu, 22 May 2008 13:49:43 -0800

It's ugly, but could you just put your CSS styling in the HEAD of the page, rather than in-line? That would allow you to preserve some of the sanity-saving aspect of external stylesheets and write your selectors carefully.

By: self

self — Thu, 22 May 2008 13:50:15 -0800

Well shoot, that's just ludicrous. Why do they not want you to touch the style sheet? It's a little ridiculous to ask you to make their site function, then guard you from one of the most important aspects of design.

My suggestion, get them to drop some dough on Dreamweaver. WYSIWYGs will give you instant HTML super powers, and though buggy, are a much better launching pad than, say, text edit and a list of HTML tags.

By: self

self — Thu, 22 May 2008 13:50:59 -0800

Also, what dagnyscott and IG said.

By: o2b

o2b — Thu, 22 May 2008 13:51:58 -0800

I can't imagine working without styles.

Two thoughts:

1. Can you insert local style blocks? Unfortunately it would for some redundant code that you would have to edit all over if you wanted to change it.

2. Could you get around the barrier by storing a stylesheet somewhere you can get to, and calling it in on each page you want to edit?

By: ISeemToBeAVerb

ISeemToBeAVerb — Thu, 22 May 2008 13:52:08 -0800

Not to be crass, but doesn't neglecting current web standards run contrary to the final intention of your task? It seems to me that if they were actually concerned about usability they would be more open to adopting new standards. In terms of layout and style, you can just use HTML, but like I said, it seems a bit like an exercise in futility.

By: bl1nk

bl1nk — Thu, 22 May 2008 13:53:19 -0800

If pre-CSS is the Dark Age of web development, then tables and transparent spacer gifs were our illuminated manuscripts.

I would advise you not to get overly reliant on spacer.gifs as they tended to be a pain to maintain; though table tags are not much better.

Instead, what I would say is -- learn to love simplicity and elegance. Most web users, and especially the users who visit government website, really care little for fancy, snazzy page design. They're going to the site to find information, and they want to find that stuff quickly and easily and move on with their lives. Think about how you're going to make it easy for them to do what they want and find what they're looking for, and build your design to that purpose.

By: abulafa

abulafa — Thu, 22 May 2008 13:55:51 -0800

If all you have, really, truly, is HTML then how does content flow into place? I mean, if you have any server-side delivery of anything you can inject styles into the HTML pages even if you can't simply reference a .css file.

But, in short, you add a <style> section in the <head> element as outlined here.

Alternatively, you can point a style link to a .html file that happens to contain css instead of HTML as long as you set its type correctly. Like this:

<head>
<LINK rel="stylesheet" href="testcss.htm" type="text/css">
</head>

Now your testcss.htm can contain normal css styles, like

body{background-color:blue;}

By: echo target

echo target — Thu, 22 May 2008 13:57:46 -0800

I would love me some Dreamweaver. I'm trying to get them to get it, and I have a few people convinced, but no one's pulled out the wallet yet. Guess what we're using? MS Frontpage 2000! [vomits]

If I put the stylesheets in the HEAD, will I have to copy & paste the styles onto every HTML page? Perhaps I can use an include...

By: abulafa

abulafa — Thu, 22 May 2008 13:58:57 -0800

But yes, as others have said, try and convince your requirement-givers that they are barking up a very, stupidly wrong tree.

By: abulafa

abulafa — Thu, 22 May 2008 14:01:25 -0800

Ah yes, if you have an include, you can actually just place it between the <style> elements and point it at your own css files. Not the greatest, but still essentially the same as linked styles (except for caching and alternate media such as printers, even that can be specificed in a style element, iirc).

And, um, if you're using FP2000... just stop. Go open up Notepad, you will hand-write more reliable and maintainable HTML than that pile of dung ever has.

By: Fuzzy Skinner

Fuzzy Skinner — Thu, 22 May 2008 14:09:09 -0800

It's not that hard to make nice pages without style sheets. It's just that it takes longer to make site-wide style changes, and they may be slower loading and have some accessibility issues for the disabled.

You can always make a master layout using inline CSS or (gasp!) tables. Put plenty of time into making the design as flexible and scalable as you can. Then make copies of that page for each new page of the site. Use a vertical link layout, so you can always add links to new pages as they are developed, without running out of room for them.

bl1nk has it acactly right, though: learn to love simplicity and elegance.

There's no need for razzle-dazzle. Especially in a government related website, people visit for the information. Make the info easy to find, lay things out in a logical manner, and use graphics that aid in communication. Anything else is extraneous. That's the definition of "usable and worth using."

People made beautiful and elegant web pages in the Dark Ages, and you'll be able to do the same.

Also, check out Dynamic Drive for scripts that might be useful.

By: chairface

chairface — Thu, 22 May 2008 14:19:50 -0800

Back in the old days it was all tables, invisible one pixel gifs, and giving up by posting a GIF of what you wanted. You can get a feel for this via the old internet way back machine at a archive.org. I always thought the nytimes did a good job for what was possible back then.

By: bricoleur

bricoleur — Thu, 22 May 2008 14:27:48 -0800

What's to prevent you from doing this:
<head>
<LINK rel="stylesheet" href="theirs.css" type="text/css">
<LINK rel="stylesheet" href="yours.css" type="text/css">
</head>

I.e., using the cascade to override the existing stylesheet with your own...

By: gum

gum — Thu, 22 May 2008 14:36:58 -0800

You can have more than one stylesheet. Will they notice if you reference both immutablegrail.css and furtiveadditionalstyling.css?

By: gum

gum — Thu, 22 May 2008 14:37:59 -0800

Oh, yes, just like bricoleur just said.

By: drjimmy11

drjimmy11 — Thu, 22 May 2008 16:22:04 -0800

Tables are more effective anyway. The whole "tableless" thing is kind of a farce for trying to make a truly cross-browser, robust site.

Do use a stylesheet, as mentioned above, but there's never anything wrong with using tables.

Also, if you can get your server to accept server-side includes of html files, you can get away without having to constantly copy/paste too much.

for example, if you have a header and footer, make the page one big table.
put the [table] tag and first row or whatever you want in the header.html, but dont close it til the footer html.

Include the header and footer in every page, and then all that page has to contain is the middle of the table. Then when you decide to change your header or footer later you dont have to do it 300 times.

By: drjimmy11

drjimmy11 — Thu, 22 May 2008 16:23:05 -0800

(same would go for any side menu or other shared elements of course)

By: scottreynen

scottreynen — Thu, 22 May 2008 17:18:47 -0800

The whole "tableless" thing is kind of a farce for trying to make a truly cross-browser, robust site.

... written on a cross-browser, robust site that doesn't use tables for non-tabular content. Other such sites include Facebook and YouTube. Do whatever you have to do in your context, but be aware that there's widespread consensus among web professionals that tables are used for tabular content, not layout.

By: Monday

Monday — Thu, 22 May 2008 17:50:18 -0800

I agree with bricoleur and gum. Use your own style sheet. Should they discover what you done, you don't have to go back and edit that one line a hundred times- just copy their style sheet into yours.

By: kirkaracha

kirkaracha — Thu, 22 May 2008 18:24:36 -0800

Tables are more effective anyway. The whole 'tableless' thing is kind of a farce for trying to make a truly cross-browser, robust site.

Behind the Wired News Design, October 2002 (so old I had to go to the Wayback Machine).

Throwing Tables Out the Window, July 2004

By: Blandanomics

Blandanomics — Thu, 22 May 2008 22:06:27 -0800

Why dont you write the style inline?

Like: <>Blah<> (odd spaces added)

I feel your pain on the FrontPage, I was in the exact same position.

By: Blandanomics

Blandanomics — Thu, 22 May 2008 22:08:56 -0800

that didnt work...
[p style="color:blue;"]blah[/p]

By: flabdablet

flabdablet — Fri, 23 May 2008 01:45:47 -0800

NVU is free, and creates far cleaner HTML than FrontPage.