473,656 Members | 2,762 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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","helv etica", sans-serif; font-size:
80%; color=#ff0000; font-weight: normal; text-align: justify;
margin-left: 2px; margin-right: 2px;}

..subHead {font-family: "arial", "verdana","helv etica", 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...

Jul 20 '05 #1
72 4838
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).

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2
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
<us*****@mangym utt.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).


Jul 20 '05 #3
Herbert <do******@email .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/
Jul 20 '05 #4
On Sat, 04 Oct 2003 06:43:04 +0100, Herbert <do******@email .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.
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....
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?
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....
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.
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.

Jul 20 '05 #5
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.

Jul 20 '05 #6
Herbert 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.".
Which would have exactly 0 effect. What do you think this is, your
personal help desk?
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?
I did provide useful information. You're just too thick to realize it.
Unless I'd specified some deviation from 100%, there'd have been no
relative size-difference to describe, now, would there?
problem solved.
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).
Yeah, insult the group. That'll get you more help.
Sites with 100% anything
tend to look like infant's text books.
On your browser, perhaps. (Don't know how to set a font-size?) Not
on mine.
Most real people (as distinct
from the fabled crowd conjured by coding-geeks)
More insults! Don't stop now, you're on a roll.
don't give it a
thought provided it's within a - fairly wide - legibility range.
And you determine this how?
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'.
rotf,l
Was this meant to goad me into helping you break another web site?
Now who wants to be first to say 'don't top post'?


As Jukka said, continue to top-post. Makes it easier to ignore you.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #7
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","helv etica", 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.or g/>. Even for an example CSS code,
stuff like "color=#ff0 000" 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

Jul 20 '05 #8
In article <cm************ *************** *****@4ax.com> in
comp.infosystem s.www.authoring.stylesheets, Herbert
<do******@email .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/
Jul 20 '05 #9
In article <v3************ *************** *****@4ax.com> in
comp.infosystem s.www.authoring.stylesheets, Herbert
<do******@email .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/
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.