CSS for HTML 4.01 Strict

Discussion in 'HTML' started by Oli Filth, Dec 15, 2004.

  1. Oli Filth

    Oli Filth Guest

    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
    Oli Filth, Dec 15, 2004
    #1
    1. Advertising

  2. Oli Filth

    Els Guest

    Oli Filth wrote:

    > 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 http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Deep Purple - Sail Away
    Els, Dec 15, 2004
    #2
    1. Advertising

  3. Oli Filth

    Els Guest

    Els wrote:

    > 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;}




    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Deep Purple - Strange Kind Of Woman
    Els, Dec 15, 2004
    #3
  4. Oli Filth

    Mitja Guest

    On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
    <> wrote:

    > 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.


    --
    Mitja
    Mitja, Dec 15, 2004
    #4
  5. Oli Filth

    Oli Filth Guest

    Mitja wrote:
    > On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
    > <> wrote:
    >
    >> 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?
    >


    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).

    >> 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".


    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
    Oli Filth, Dec 15, 2004
    #5
  6. in alt.html, Oli Filth wrote:
    > Mitja wrote:
    > > On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
    > > <> wrote:


    > >> 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".

    >
    > 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.

    > > 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).


    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.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Dec 15, 2004
    #6
  7. Oli Filth

    Mitja Guest

    On Wed, 15 Dec 2004 19:41:27 GMT, Oli Filth
    <> wrote:

    >>> 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,

    >
    > 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...).

    --
    Mitja
    Mitja, Dec 15, 2004
    #7
  8. Oli Filth

    Oli Filth Guest

    Mitja wrote:
    > On Wed, 15 Dec 2004 19:41:27 GMT, Oli Filth
    > <> wrote:
    >
    >>>> 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,

    >>
    >>
    >> 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.
    >


    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
    Oli Filth, Dec 15, 2004
    #8
  9. Oli Filth

    Mitja Guest

    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.

    --
    Mitja
    Mitja, Dec 16, 2004
    #9
  10. in alt.html, Oli Filth wrote:
    > 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...

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Dec 19, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    Form in Html 4.01 strict and CSS

    Luigi Donatello Asero, Jan 24, 2004, in forum: HTML
    Replies:
    55
    Views:
    1,980
    Andrew Glasgow
    Feb 7, 2004
  2. Geoff Hague
    Replies:
    1
    Views:
    379
    Robert Frost-Bridges
    Aug 6, 2004
  3. Tim Streater
    Replies:
    4
    Views:
    306
    Gus Richter
    Feb 13, 2013
  4. Lewis
    Replies:
    0
    Views:
    257
    Lewis
    Feb 12, 2013
  5. Gus Richter
    Replies:
    0
    Views:
    278
    Gus Richter
    Feb 13, 2013
Loading...

Share This Page