CSS for HTML 4.01 Strict

[Oli Filth]

I'm writing a small website using HTML 4.01 Strict (as an experiment to see if
it's worth the effort of unlearning Transitional practices). As I understand it,
the purpose of Strict is to completely separate content (HTML) from presentation
(CSS), and to markup the HTML semantically rather than presentationally.

However, whilst all my pages will have the same header, navbar, background,
fonts, etc., the main content layout will vary quite considerably from page to
page. For instance, some pages will have a large left-floated image with
justified text on the right, others will have predominantly centred content,
whilst others may have left-aligned content with right padding (for example).

My question is, how to define the CSS? As each page's layout is fairly
different, should each page have its own, specific CSS file, with global styles
(like fonts and colours) defined in a global CSS file? Or should all the CSS be
packed into one file, with multiple id definitions (one for each page) one after
the other? Both methods seem like they could be hard to maintain. Is Strict HTML
even appropriate for sites where content layout varies considerably?

TIA,
Oli

 

[Els]

My question is, how to define the CSS? As each page's
layout is fairly different, should each page have its own,
specific CSS file, with global styles (like fonts and
colours) defined in a global CSS file?

That's one possibility.

Or should all the
CSS be packed into one file, with multiple id definitions
(one for each page) one after the other?

Yup, also possible.

Both methods seem
like they could be hard to maintain. Is Strict HTML even
appropriate for sites where content layout varies
considerably?

Yup, especially because of that varying content layout.
I suppose you still have a lot of stuff in common on most of
your pages, even in the content area, like colours, type of
borders, font-styles, the way images are floated, etc.

If for instance pages x, y and z have centered content, while
the others are left aligned, you could give each page it's own
id, and saying in the stylesheet:

#content{text-align:left;}
#x,#y,#z{text-align:center;}

Then if you ever want to change those pages to right-aligned
and making pages a, b and c centered, you simply change your
styles to:

#content{text-align:left;}
#x,#y,#z{text-align:right;}
#a,#b,#c{text-align:center;}

See how that's quicker than changing 6 stylesheets for 6
pages?

Any styles that are for one page only, I've put in the main
file, by using classes with descriptive names.
Only the navigation is in a seperate file, as some pages have
a horizontal menu, while most have a left floated one.

Also I have recently separated all colour styles on my site
into a separate colour stylesheet. That way I can change the
colours in a couple of minutes, cause I don't have to skip
through a long stylesheet find them, and they work throughout
the site.

By using presentational markup or inline styles, you'd have to
go into every single page to change stuff site-wide.

One stylesheet for every page (even if only for the content
area) is hardly better, wrt maintenance imo.

 

[Els]

If for instance pages x, y and z have centered content,
while the others are left aligned, you could give each page
it's own id, and saying in the stylesheet:

#content{text-align:left;}
#x,#y,#z{text-align:center;}

That should be:
#content{text-align:left;}
#x #content,
#y #content,
#z #content{text-align:center;}

Then if you ever want to change those pages to
right-aligned and making pages a, b and c centered, you
simply change your styles to:

#content{text-align:left;}
#x,#y,#z{text-align:right;}
#a,#b,#c{text-align:center;}

#content{text-align:left;}
#x #content,
#y #content,
#z #content{text-align:right;}
#a #content,
#b #content,
#c #content{text-align:center;}

 

[Mitja]

However, whilst all my pages will have the same header, navbar,
background, fonts, etc., the main content layout will vary quite
considerably from page to page. For instance, some pages will have a
large left-floated image with justified text on the right, others will
have predominantly centred content, whilst others may have left-aligned
content with right padding (for example).

Is this just for kicks / supposedly better looks or is it in some way
connected with the content?

My question is, how to define the CSS? As each page's layout is fairly
different, should each page have its own, specific CSS file, with global
styles (like fonts and colours) defined in a global CSS file? Or should
all the CSS be packed into one file, with multiple id definitions (one
for each page) one after the other? Both methods seem like they could be
hard to maintain. Is Strict HTML even appropriate for sites where
content layout varies considerably?

It's appropriate for pretty much everything; the thing with your
particular example is that by separating content and style (which BTW does
not require Strict HTML) isn't much of a gain. So instead of saying "Both
methods seem like they could be hard to maintain" I'd rather go for "They
don't seem much easier to maintain than the non-CSS version".
I think it's still worth the migration, at least you'll control the style
of navigation, headers etc globally. Using one big CSS file like Els
suggested could also be an improvement, depending on the number of
subpages you've got.
If there is a limited number of layouts, the best way to go is one main
css and several others, each representing the oddities of a single layout.
For each HTML file, use the central css and one of the others then.
If style is very variable and tightly bound with content like I mentioned
at the beginning, I'd maybe even say stuff it and go with inline styles,
yet as sparsely as possible (e.g. only padding and alignment; and floats
for pics).

Do you have the current, non-css version of your page somewhere to see?
It'd be easier to judge then.

 

[Oli Filth]

Is this just for kicks / supposedly better looks or is it in some way
connected with the content?

It's a combination of experimentation, and also to suit the purposes of
different pages. Some are mostly textual (mostly long paragraphs) hence
justify-aligned, whereas others are more oriented towards graphics/lists (I
prefer the entire content centred for this kind of page).

It's appropriate for pretty much everything; the thing with your
particular example is that by separating content and style (which BTW
does not require Strict HTML) isn't much of a gain. So instead of
saying "Both methods seem like they could be hard to maintain" I'd
rather go for "They don't seem much easier to maintain than the non-CSS
version".

This is what I'm trying to find out; whether it's actually worth all the effort
to move to Strict and think of clever ways to define the styles. I was also
trying to find whether there were alternatives to the CSS layouts that I hadn't
thought of.

Do you have the current, non-css version of your page somewhere to see?
It'd be easier to judge then.

I've hacked together how the site used to look, in non-Strict HTML (Please don't
bother to look at the HTML or CSS, like I said I hacked it back together quickly
as a visual demo, so most of the code is pretty awful.) Also note that a lot of
the content is also missing at present.

http://olifilth.co.uk/cillitbang/

As you'll see, the layout style isn't wildly variable, but just enough not to be
able to wrap it up in some generic CSS (as far as I can see).

Thanks for your help ,
Oli

 

[Lauri Raittila]

This is what I'm trying to find out; whether it's actually worth all the effort
to move to Strict and think of clever ways to define the styles. I was also
trying to find whether there were alternatives to the CSS layouts that I hadn't
thought of.
Sure.


I've hacked together how the site used to look, in non-Strict HTML (Please don't
bother to look at the HTML or CSS, like I said I hacked it back together quickly
as a visual demo, so most of the code is pretty awful.) Also note that a lot of
the content is also missing at present.

http://olifilth.co.uk/cillitbang/

As you'll see, the layout style isn't wildly variable, but just enough not to be
able to wrap it up in some generic CSS (as far as I can see).

Certainly best to do it using strict and CSS. I would think that you need
maybe 20-40 lines of CSS.

About other stuff, monospace courier type font with justify align and
short width, white on black, with italics here and there is pain to read.

 

[Mitja]

http://olifilth.co.uk/cillitbang/

As you'll see, the layout style isn't wildly variable, but just enough
not to be able to wrap it up in some generic CSS (as far as I can see).

That doesn't look all that bad.
Most of the content is centered, so I'd go with that as a default. Then
see if you really have to (alright, "have to" is a bit strong. want to,
even) use the justified paragraphs.

Anyway, what differences there are IMO definitely not worth using multiple
css files. Now for the little specialties.

Bio page: If you decide to keep the alignment, I recommend something like
<P class="longtext"> that can be reused elsewhere (e.g. Music page,
although I don't really see a point of justifying the text there). BTW, a
nice Cillit , though it'd look better saved as png. For it, use
float:left; since it's a very special case, probably with <img
id="cillitlogo" ...>

The Band page: Get rid of the table (google for tableless layouts, if you
will). Use something along the lines of
<div class="bandmember">
<img ...><h3>John Smith</h3> (assuimg h1 for "Cillit", h2 for "members")
He's a jolly nice fella, etc etc.
</div>
..bandmember { float:left; width: 20% }
..bandmember img { display: block }

Comments page: no problem here. Everything's standard except for the blue
boxes, each of which is a small world in its own right. So it's <div
class="comment">comment <div class="commentauthor">Oli, 12. 12.
04</div></div> and appropriate css.

AFAICT there are no other things that need special treatment. So one css
file it is, with a main section and several small sections dedicated to
subpages that are a bit special. Optionally, use main.css and special.css
(or something).

No need to be that shy
I peeked at the supposedly makeshift HTML and it's very nice and clean.
You can't separate content and style much more than you already did, you
can only add a bit of polish.

Concerning style as such...
I don't agree too much with Lauri about it being hard to read. But it's a
page with small quantities of text, so you really could blow it up
artificially a bit. Size up the fonts by a few percent, add some more
padding here and there...
And I guess some more color consistency would also look nice (white text,
blue header, yellow navigation, red links all stuffed together...).

 

[Oli Filth]

That doesn't look all that bad.
Most of the content is centered, so I'd go with that as a default. Then
see if you really have to (alright, "have to" is a bit strong. want to,
even) use the justified paragraphs.

Anyway, what differences there are IMO definitely not worth using
multiple css files. Now for the little specialties.

Yes, I was coming to the same conclusion. I think I'll stick with centred
alignment as the default for my DIVs.

Bio page: If you decide to keep the alignment, I recommend something
like <P class="longtext"> that can be reused elsewhere (e.g. Music
page, although I don't really see a point of justifying the text
there). BTW, a nice Cillit , though it'd look better saved as png.
For it, use float:left; since it's a very special case, probably with
<img id="cillitlogo" ...>

Wouldn't I end up with the IE-not-supporting-PNG-transparency problem?

The Band page: Get rid of the table (google for tableless layouts, if
you will). Use something along the lines of
<div class="bandmember">
<img ...><h3>John Smith</h3> (assuimg h1 for "Cillit", h2 for "members")
He's a jolly nice fella, etc etc.
</div>
.bandmember { float:left; width: 20% }
.bandmember img { display: block }

Yup. I'm in the process of pulling out tables at present, e.g. the nav bar
started life as a table, but after much hassle and research I found how to do it
with an inline list.

Comments page: no problem here. Everything's standard except for the
blue boxes, each of which is a small world in its own right. So it's
<div class="comment">comment <div class="commentauthor">Oli, 12. 12.
04</div></div> and appropriate css.

AFAICT there are no other things that need special treatment. So one
css file it is, with a main section and several small sections
dedicated to subpages that are a bit special. Optionally, use main.css
and special.css (or something).

No need to be that shy
I peeked at the supposedly makeshift HTML and it's very nice and clean.
You can't separate content and style much more than you already did,
you can only add a bit of polish.

Thanks! I was in the process of converting to Strict, so I'd pulled out most of
the styling from the HTML already. But then I shoved stuff back in a bit of a
hurry when you asked to see the site, so it's a little inconsistent from page to
page.

Concerning style as such...
I don't agree too much with Lauri about it being hard to read. But it's
a page with small quantities of text, so you really could blow it up
artificially a bit. Size up the fonts by a few percent, add some more
padding here and there...
And I guess some more color consistency would also look nice (white
text, blue header, yellow navigation, red links all stuffed together...).

I'm quite a fan of the white on black; I find it less straining (than e.g. black
on white), but I appreciate Lauri's point, as everyone has their own tastes. As
for monospace, I find it gives the page just the look I wanted, so I think I'll
stick with it. But yes, it's probably worth bumping up the size, as there's not
going to be too much more text for a while.


Thanks very much for your comment and advice, they've been very helpful .

Oli

 

[Mitja]

Oli:

Wouldn't I end up with the IE-not-supporting-PNG-transparency problem?

IE does support PNG transparency, what it's having trouble with is the
full use of alpha channel, e.g. utilizing 47% transparency. As long as you
stick with areas that are either fully opaque or fully transparent,
everything's fine.
And then, if jpg was fine with you, so should be a png with black
nontransparent background - so no possible transparency issues at all.
jpg is alright too, but it screws at the borders of your image - they
bleed yellow and are therefore too bright.

 

[Lauri Raittila]

I'm quite a fan of the white on black;

Maybe little less white, or less black? Even Black on white is too big
contrast usually...

I find it less straining (than e.g. black on white),

But it surerely is worse than black on some off-white etc.

but I appreciate Lauri's point, as everyone has their own tastes. As
for monospace, I find it gives the page just the look I wanted, so I
think I'll stick with it.

OK. But don't use justify. It don't work on web as there is no
hyphenitation, and it somehow looks very strange with monospace font...

But yes, it's probably worth bumping up the size, as there's not
going to be too much more text for a while.

I hope you don't mean fontsize - it would make it even less readable...
Don't touch fontsize, please...