My messy stylesheets just ain't got no style....

I'm still relativey new to stylesheets, so I'm hoping that the way I'm
going about things can be seriously improved upon, i.e . I just
haven't undersood something obvious about the 'cascading' nature of
the coding, which I believe concerns the way attributes relate to one
another when 'nested'...

I think I can illustrate the nature of the beast with this example,
using just two text styles:


p {font-family: "arial", "verdana","helvetica", sans-serif; font-size:
80%; color=#ff0000; font-weight: normal; text-align: justify;
margin-left: 2px; margin-right: 2px;}

..subHead {font-family: "arial", "verdana","helvetica", sans-serif;
font-size: 80%; color=#0000ff; font-weight: bold; text-align: left;
margin-left: 2px; margin-right: 2px;}


Obviously it's very convenient to be able to specify such a lot over
and over just by using <p>Text</p>, and subheadings with <p
class="subHead">Heading</p>.

Where I find things get awkward is if I occasionally want to have:
#1 the text follow the subheading after only a <br> line-break (i.e.
within the <p></p>),
#2 or the subHead style used within the text paragraph using <span
class="subHead">include</span>

Then, of course, the subHead text will inherit the <p></p> paragraph's
attributes: i.e. it will be smaller and, in the case of the
line-break, will be further inset because the margin will be
incremental, and if it meets the right-hand edge of the allocated area
(say a table cell) will also be justified.


The only ways I can see to get round some of this are:
#1 to have 'relative' and 'absolute' versions of the two specified
styles,
#2 or to use more inline <span style="lots of style specs";></span>
specifying.

Of course, both methods would increase the amount of coding
tremendously. The first would require creating many alternative
'relative' styles to match every combination found within the
documents, and the second approach would negate any advantage
conferred by css over html, with html's need to specify fully each and
every occurrence of 'non-standard' text.

Sorry this is long-winded, and if it's not very clear! It's taken me
quite a while just to identify where my inability lies in this regard.

Thanks for reading this far. Comments welcome...

Well Brian, it did occur to me to add "please don't bother commenting
on whether specifying 80% or any particular font is a good idea,
etc.". However, I'd hoped follow-ups might be from people who
realised these were examples and might go on to actually provide some
useful information, but I guess it's just too difficult to resist, eh?

Unless I'd specified some deviation from 100%, there'd have been no
relative size-difference to describe, now, would there?

FYI I have been reading this NG, and studying numerous CSS guides, for
some time now. And I am well aware of the kind of advice given as to
allowing the 'user decide' (which in my experience is almost
invariably provided by people who couldn't construct an engaging
website if they tried). I know just one person who intentionally
changes their browser's font-size setting. Sites with 100% anything
tend to look like infant's text books. Most real people (as distinct
from the fabled crowd conjured by coding-geeks) don't give it a
thought provided it's within a - fairly wide - legibility range.

I know you are capable of providing helpful guidance. But come on,
this follow-up was 90% lame. I know this is presented as 'won't
help', but it could equally well be masking 'can't help'.

I am pessimistically curious as to the verdana verboten.

Now who wants to be first to say 'don't top post'? But bear in mind
that since Brian snipped the relevant bits of my original posting,
there ain't much to be missed down there...


On Sat, 04 Oct 2003 03:53:31 GMT, Brian
<usenet1 (AT) mangymutt (DOT) com.invalid-remove-this-part> wrote:

Herbert wrote:
I'm still relativey new to stylesheets

I suggest you read this group for a while. Some of your questions will
be answered in other threads, and you'll learn to avoid certain things
along the way.

p {font-family: "arial", "verdana",

Don't specify verdana.

font-size: 80%;

Don't specify a font-size of 80% for paragraph text. Let users decide
which font-size is right for them. Please refer to the scores of
threads on these matters (use Google to search for them).

Herbert <doughnut (AT) email (DOT) me.ok> wrote:

Now who wants to be first to say 'don't top post'?

Nobody, hopefully. Please keep posting cluelessly, until you have
something useful or interesting to say. Please also keep using a forged
E-mail address until you have a clue. HTH. HAND.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Herbert wrote:

Obviously it's very convenient to be able to specify such a lot over
and over just by using <p>Text</p>, and subheadings with <p
class="subHead">Heading</p>.

It would be even more convenient, not to mention symantically more
meaningful, if you used the right markup for the job. Headings deserve
<hx> markup, using the appropriate levels.

h1
h2
h3
h3
h2

etc. and style each heading level as you see fit.

You really should learn some HTML before trying CSS.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

Herbert wrote:

I'm still relativey new to stylesheets, so I'm hoping that the way I'm
going about things can be seriously improved upon, i.e . I just
haven't undersood something obvious about the 'cascading' nature of

Umm.. I don't want to sound rude, but you should really focus on
perfecting your HTML markup before rushing to prefecting the rendering
with CSS. In long run that's the best approach even though the learning
curve is rather steep.

I think I can illustrate the nature of the beast with this example,
using just two text styles:


p {font-family: "arial", "verdana","helvetica", sans-serif; font-size:
80%; color=#ff0000; font-weight: normal; text-align: justify;
margin-left: 2px; margin-right: 2px;}

Check out <URL:http://validator.w3.org/>. Even for an example CSS code,
stuff like "color=#ff0000" is unacceptable. Also, if you don't have a
good reason to add a specific declaration you should drop it. For
example, I cannot think of any valid reason for the need of
"font-weight: normal" in the above example. Especially if you target to
fully utilize the "nesting", you should always use bare minimum CSS
styles for each selector.

Also consider using 'em' unit for all stuff that has anything to do with
text.

Obviously it's very convenient to be able to specify such a lot over
and over just by using <p>Text</p>, and subheadings with <p
class="subHead">Heading</p>.

Always, I repeat, always markup headers as headers, not as paragraphs,
divs or spans with some "special" class. CSS is supposed to only *hint*
default presentation and all the content should be fully readable
without any support for CSS.

Where I find things get awkward is if I occasionally want to have:
#1 the text follow the subheading after only a <br> line-break (i.e.
within the <p></p>),
#2 or the subHead style used within the text paragraph using <span
class="subHead">include</span

If you have markup like:

<h1>Heading</h1>
<p>text text text</p>

and you want rendering like

HEADING
text text text

you just apply style
h1 { font-size: 100%; text-transform: uppercase; margin-bottom: 0;
padding-bottom: 0; }
p { margin-top: 0; padding-top: 0; }

If you want rendering like

HEADING text text text

you shouldn't modify the markup. I repeat, the content is still exactly
the same and there's no reason not to modify anything else but CSS
which controls the presentation. So you just add next rule to above
stylesheet:

h1 { display: run-in; }

The fact that you add this rule with is own selector, after the above
style declarations means that all the old rules are first applied, then
the nesting takes place and this rule appends and overrides (if
required) the properties that I define here. If I don't want all headers
to run-in with the following paragraph, I just use a class for those
headers I want to run in, like this:

<h1 class="notice">Run-in header</h1>
<p>and the text that follows it</p>

and you replace the above style with

h1.notice { display: run-in; }

Now, only the 1st level headers with class notice are rendered run-in,
and also those 1st level headers use all the declarations defined for
all 1st level headers (h1) defined above. Again, nesting in the work.

Unfortunately, MSIE or Mozilla do not support display: run-in, so you
need to use some hacks instead if the actual presentation is so
important enough for the extra work; usually float property is abused to
achieve similar effect.

Happy hacking!

--
Mikko

In article <cmvrnv8asn188uogv08h8satoadb5p0p2b (AT) 4ax (DOT) com> in
comp.infosystems.www.authoring.stylesheets, Herbert
<doughnut (AT) email (DOT) me.ok> wrote:

Obviously it's very convenient to be able to specify such a lot over
and over just by using <p>Text</p>, and subheadings with <p
class="subHead">Heading</p>.

Convenient, but IMHO wrong. Subheadings should be specified using
<h2> or <h3> or ... or <h6> whatever level is appropriate. Style
_that_; don't create a separate class and apply it to paragraphs.

Remember, you should always write your HTML so that as far as
possible it degrades gracefully if CSS is not supported. That means
headings should be headings, not paragraphs.

Where I find things get awkward is if I occasionally want to have:
#1 the text follow the subheading after only a <br> line-break (i.e.
within the <p></p>),

"Doctor, it hurts when I do this."
"Then don't."

Seriously, A paragraph of text can't logically be "within" a
heading. Code the heading with its proper h number, and then code
the paragraph with a class that has margin-top:0.

Other folks will probably comment on your CSS; in particular it
usually doesn't sense to specify the text margin in pixels.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

In article <v3lsnvogcdgb44lnpapjm358p7u81keuj5 (AT) 4ax (DOT) com> in
comp.infosystems.www.authoring.stylesheets, Herbert
<doughnut (AT) email (DOT) me.ok> wrote:

Well Brian, it did occur to me to add "please don't bother commenting
on whether specifying 80% or any particular font is a good idea,
etc.". However, I'd hoped follow-ups might be from people who
realised these were examples

Examples of what? If you wrote "80%" rather than "100%" then
presumably you had some reason for doing so. Brian is helping you by
pointing out that it's a bad idea. If you already knew it was a bad
idea, why did you include it? If you didn't know it was a bad idea
then you should thank Brian for pointing it out.

I am pessimistically curious as to the verdana verboten.

Then google for it: it's been discussed here numerous times and
there's no reason for us to rehash it again -- particularly with
your attitude.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

On Sat, 04 Oct 2003 06:43:04 +0100, Herbert <doughnut (AT) email (DOT) me.ok>
wrote:

Sites with 100% anything
tend to look like infant's text books. Most real people (as distinct
from the fabled crowd conjured by coding-geeks) don't give it a
thought provided it's within a - fairly wide - legibility range.

You appear to be contradicting yourself. Do you think that most people
find their default settings acceptable or not?

FWIW I have used at least ten different versions of at least five
different browsers, and I have yet to encounter one where the default
text looked like "infant's text books". If your browser, on your
monitor, does, then perhaps it's time you learned how to adjust the
browser settings.

I know you are capable of providing helpful guidance. But come on,
this follow-up was 90% lame. I know this is presented as 'won't
help', but it could equally well be masking 'can't help'.

I think others have addressed the problems. In some cases one simply
can't avoid having a font or colour used in several different styles.
Updates then need to be done via a 'global replace' on the CSS file.
Alternatively one could have a look at preprocessing.

I am pessimistically curious as to the verdana verboten.

See http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Sat, 4 Oct 2003 06:02:45 +0000 (UTC), "Jukka K. Korpela"
<jkorpela (AT) cs (DOT) tut.fi> wrote:

Herbert <doughnut (AT) email (DOT) me.ok> wrote:

Now who wants to be first to say 'don't top post'?

Nobody, hopefully. Please keep posting cluelessly, until you have
something useful or interesting to say. Please also keep using a forged
E-mail address until you have a clue. HTH. HAND.

Ah... this is an example of 'useful or interesting'?

No. But is is an example of someone keener to bust balls than be
useful or interesting.

Ho hum...

On Sat, 04 Oct 2003 11:32:37 GMT, Jane Withnolastname
<JaneWithnolastnameNOSPAM (AT) yahoo (DOT) com> wrote:

On Sat, 04 Oct 2003 06:43:04 +0100, Herbert <doughnut (AT) email (DOT) me.ok
wrote:

Well Brian, it did occur to me to add "please don't bother commenting
on whether specifying 80% or any particular font is a good idea,
etc.". However, I'd hoped follow-ups might be from people who
realised these were examples and might go on to actually provide some
useful information, but I guess it's just too difficult to resist, eh?

Are you trying to piss off the people that might help you?
When posting examples, try to be as generic and subservient as
possible. Then you won't have to worry about criticism of your coding
and might get the response you are looking for.

My original post was polite and modest.

Your example was quite long and featured a number of oddities, such as
the use of quotes around the font names and the use of an equals sign
for color. This makes it look like code taken directly from your page
and also makes it look like you just dove into it.
Diving in is admirable, but you can see why Brian might think you
haven't been reading along....

Thanks for pointing out the = typo. No it wasn't stright from the
page, I just included a number of elements which could be used.

As to 'reading along', with haughty admonitions like "don't use
verdana" without explanation, one is unlikely to actully learn
anything by reading that, except - if susceptible and parrot-like - to
repeat such mantras without understanding.

FYI I have been reading this NG, and studying numerous CSS guides, for
some time now. And I am well aware of the kind of advice given as to
allowing the 'user decide' (which in my experience is almost
invariably provided by people who couldn't construct an engaging
website if they tried). I know just one person who intentionally
changes their browser's font-size setting. Sites with 100% anything
tend to look like infant's text books. Most real people (as distinct
from the fabled crowd conjured by coding-geeks) don't give it a
thought provided it's within a - fairly wide - legibility range.

I tend to agree with this outlook. Many here do not. Why rock the boat
when you're begging for a solution to a problem that has nothing to do
with text size?

The boat wasn't rocking until Brian jumped in with both feet wearing
his captain's hat and expecting me to be 'subservient'.

In any case, when the posts nit-picking over whether one is toing the
line outnumber those trying to actuall help, it's safe to say there's
a valency for boat-rocking.
..

I know you are capable of providing helpful guidance. But come on,
this follow-up was 90% lame. I know this is presented as 'won't
help', but it could equally well be masking 'can't help'.

Heh. I guess I fall into the latter category. I just wanted to address
this post before the full wrath of the group fell upon you. I think
Jukka may have already added you to his killfile....

The "full wrath"? Oh come on. This isn't Iraq. And I'll be happy to
be kill-filed by anyone who can't converse. I've never kill-filed
anyone - it's such an infantile response.

I am pessimistically curious as to the verdana verboten.

Verdana renders itself larger than most other similar fonts. So when
you ask it to render Arial at 80% and your fallback is Verdana, if the
user doesn't have Arial, s/he is going to see a font that looks to be
about 90%. Try it for yourself. Look at your page, study it, memorize
it. Then delete Arial from your style sheet and look at your page
again. If you think layout is a bitch now, try making it conform to
your desires in both Arial and Verdana.
Personally, I enjoy the Verdana font. But when I use it, it is the
only one I use (save for the generic fallback), so I know how big to
make it - which is always smaller than anything else.

Thank you for that most informative answer! You're absolutely right,
that when I typed out the samples, I put them in the 'wrong order'.

Now who wants to be first to say 'don't top post'? But bear in mind
that since Brian snipped the relevant bits of my original posting,
there ain't much to be missed down there...

Top-posting doesn't bother me, though apparently it is frowned upon
round these parts.

For amazing pettiness, you should try the BBC Radio 2 NG... you can
almost smell the damp cardigans.

Thank you for the Verdana input!