CSS syntax help

What does this mean?

font: 11px/20px verdana, arial, helvetica, sans-serif;

re: CSS syntax help

Henry <hamt1@netscape.com> wrote:
[color=blue]
>What does this mean?
>
>font: 11px[/color]

font height
[color=blue]
>/20px[/color]

line height
[color=blue]
>verdana, arial, helvetica, sans-serif;[/color]

list of preferred fonts


Headless

re: CSS syntax help

In article <3f1e3685$0$1209$afc38c87@news.optusnet.com.au>, Henry wrote:[color=blue]
> What does this mean?
>
> font: 11px/20px verdana, arial, helvetica, sans-serif;[/color]

Same as

font-size:11px;line-height:20px;font-family:verdana, arial, helvetica,
sans serif;

http://www.w3.org/TR/CSS2/fonts.html#font-shorthand

It is also good example of very bad CSS rule:
a) 11px is too small for most people
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
b) 20px is not relative to 11px, but absolute, so if user overrides
font size, line height stays. Never¹ use absolute measure for
line height - you can always count it relative to font size, and
then it is not that bad
c) Verdana is not good choise of font, as it is too different from
others. Neither is it good to specify any other fonts, and not evn
plain sans-serif is really safe. Only conserns body text, you can
use them as much you like on headings etc. Google.groups for why.

[1] exept when you do have different size of text on random lines or
something else you hardly ever want.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

re: CSS syntax help

Oh cool.... like a short hand of writing CSS. I knew about it would
display verdana, arial, helvetica, sans-serif.... but the 11px/20px
fraction didn't have an idea what it was.... thanks for the clarification.

I was looking a some other CSS code and I came across this:

the first p we discussed and we are clear with that:

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
color: #FFF;
}

This is where it gets a bit confusing for me:

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

#content {
margin:0px 50px 50px 210px;
padding:10px;
}

thanks

re: CSS syntax help

Henry <hamt1@netscape.com> wrote:
[color=blue]
>This is where it gets a bit confusing for me:
>
>#Content>p {margin:0px;}[/color]

Selects all <p> elements that are children of the element with ID
Content.
[color=blue]
>#Content>p+p {text-indent:30px;}[/color]

Selects all <p> elements that follow immeditately after a <p> that is
a child of the element with ID Content.
[color=blue]
>#content {[/color]

Selects the element with ID content
[color=blue]
>margin:0px 50px 50px 210px;[/color]

Sets the top, rightm bottom and left margins to those values.
[color=blue]
>padding:10px;[/color]

Sets the padding to 10px.

Steve


--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

re: CSS syntax help

On Wed, 23 Jul 2003 18:33:25 +1000, Henry <hamt1@netscape.com> wrote:

[snip][color=blue]
> This is where it gets a bit confusing for me:
>
> #Content>p {margin:0px;}
> #Content>p+p {text-indent:30px;}[/color]
These are selectors. The first one matches any <p> which is an *immediate*
child of an element with id="Content". The second one matches any <p> which
is an immediate child of an element with id="Content" and immediately
preceded by another <p>. Thus the first line of the second/third/...
consecutive paragraph is indented 30px (which is considered *bad*, use em
instead)[color=blue]
>
> #content {
> margin:0px 50px 50px 210px;
> padding:10px;
> }
>[/color]
Applies to the element with id="Content"

This is the authoritative source on selectors:
http://www.w3.org/TR/CSS2/selector.html
Note that IE support for selectors is very limited.

P.S. Did you by chance get your styles from bluerobots.com?

--
Lars

re: CSS syntax help

yeah I got them from bluerobots.com.
are they a hack so it works in older browsers? do I need to use them?
But I've never seen them before. I always check www.w3schools.com when I
have trouble with css.

thanks

Lars G. Svensson wrote:[color=blue]
> On Wed, 23 Jul 2003 18:33:25 +1000, Henry <hamt1@netscape.com> wrote:
>
> [snip]
>[color=green]
>> This is where it gets a bit confusing for me:
>>
>> #Content>p {margin:0px;}
>> #Content>p+p {text-indent:30px;}[/color]
>
> These are selectors. The first one matches any <p> which is an
> *immediate* child of an element with id="Content". The second one
> matches any <p> which is an immediate child of an element with
> id="Content" and immediately preceded by another <p>. Thus the first
> line of the second/third/... consecutive paragraph is indented 30px
> (which is considered *bad*, use em instead)
>[color=green]
>>
>> #content {
>> margin:0px 50px 50px 210px;
>> padding:10px;
>> }
>>[/color]
> Applies to the element with id="Content"
>
> This is the authoritative source on selectors:
> http://www.w3.org/TR/CSS2/selector.html
> Note that IE support for selectors is very limited.
>
> P.S. Did you by chance get your styles from bluerobots.com?
>[/color]

re: CSS syntax help

Henry wrote:
[color=blue]
> What does this mean?
>
> font: 11px/20px verdana, arial, helvetica, sans-serif;[/color]

In an author stylesheet, it means the author lacks clue.

For font sizes in an author stylesheet, px units simply do not belong. They
will inevitably be too small for some users, and too big for others.

A better way of writing this would be, for example:

font: 1em/1.9em Verdana, Arial, Helvetica, sans-serif;

(In fact, this is my biggest beef with the shorthand syntax, it encourages
the misuse of pt and px units where they should not be used, given that the
overwhelming majority of stylesheets today are author-side, not user-side,
even though the earliest CSS specification is almost 7 years old now.)

--
Shawn K. Quinn

re: CSS syntax help

"Shawn K. Quinn" <skquinn@xevious.kicks-ass.net> wrote:
[color=blue]
> A better way of writing this would be, for example:
>
> font: 1em/1.9em Verdana, Arial, Helvetica, sans-serif;[/color]

And yet better, making it explicit what you're really doing:
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.9;
(The value 1.9 for line-height is not quite the same as 1.9em in all
situations, but better.)

On the other hand, a line height of 1.9 is usually far too much (except
in a special-purpose style sheet), and Verdana should usually be
avoided, especially for copy text, in author style sheets.
[color=blue]
> (In fact, this is my biggest beef with the shorthand syntax,[/color]

I think the font shorthand is especially risky in general- really, just
a collection of pitfalls, and nothing useful.

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

re: CSS syntax help

>[color=blue]
> And yet better, making it explicit what you're really doing:
> font-family: Verdana, Arial, Helvetica, sans-serif;
> line-height: 1.9;
> (The value 1.9 for line-height is not quite the same as 1.9em in all
> situations, but better.)[/color]
[color=blue]
>
> On the other hand, a line height of 1.9 is usually far too much (except
> in a special-purpose style sheet), and Verdana should usually be
> avoided, especially for copy text, in author style sheets.[/color]

Should I use line-height? or leave it auto? what would be a better
line-height than 1.9em.
And can you please explain what is wrong with Verdana? I alwayes thought
it was the best font for readability?

And yeah I agree that short hand is not proper.

Thanks
Henry
[color=blue]
>[color=green]
>>(In fact, this is my biggest beef with the shorthand syntax,[/color]
>
>
> I think the font shorthand is especially risky in general- really, just
> a collection of pitfalls, and nothing useful.
>[/color]

re: CSS syntax help

On Sat, 26 Jul 2003 11:31:22 +1000, Henry <hamt1@netscape.com> wrote:


[...]
[color=blue]
>And can you please explain what is wrong with Verdana? I alwayes thought
>it was the best font for readability?
>[/color]

At normal font sizes, there is probably no danger in using it -- some
people claim it looks funny at larger sizes, but that is IMO a matter
of taste. The danger is when authors suggest a much smaller than
normal font size, and rely on Verdana to make the text more legible.
Then when someone views the text and doesn't have Verdana installed on
her system, the text becomes illegible.

So there is often this recursive argument:

Q: Why did you make your text so small?
A: Because Verdana looks funny at normal text size.
Q: Then why did you use Verdana?
A: Because it's more legible at small font sizes.

Nick


--
Nick Theodorakis
nicholas_theodorakis@urmc.rochester.edu

re: CSS syntax help

Henry <hamt1@netscape.com> wrote:
[color=blue]
> that's why it is good to have:
> font-family: {Verdana, Arial, Helvetica, sans-serif;}[/color]

No, you missed the point. Read Nick's message again. Adding alternate
fonts does not help with the problems that arise when Verdana _is_
available.

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

re: CSS syntax help

Henry <hamt1@netscape.com> wrote:
[color=blue]
> Should I use line-height?[/color]

If you suggest a sans-serif font, then yes, since otherwise typical
browser defaults (where line-height is 1.2 or even less) reduce the
readability of texts - the lines are too close to each other.
[color=blue]
> or leave it auto?[/color]

The initial value of line-height is 'normal', not 'auto'; 'auto' is not
even an allowed value.
[color=blue]
> what would be a better
> line-height than 1.9em.[/color]

For Arial, 1.3 or even 1.35 is typically suitable. Going up to 1.8 (why
would you use the em unit here? it makes the value relative the _wrong_
way, as a rule) or maybe higher might be justified if you have lots of
subscripts, superscripts, characters with diacritic marks, etc., though
then other features (like font-size and vertical-align for subscripts
and superscripts) should be considered, too.
[color=blue]
> And can you please explain what is wrong with Verdana? I alwayes
> thought it was the best font for readability?[/color]

That's one problem. What is most readable to you is not most readable
to everyone. But the problem with Verdana has already been explained in
this thread (and we have re-runs of more detailed explanations every
now and then, hang around).

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

re: CSS syntax help

>>or leave it auto?
[color=blue]
> The initial value of line-height is 'normal', not 'auto'; 'auto' is not
> even an allowed value.[/color]

yeah sorry that's what I meant 'normal'[color=blue]
>
>[color=green]
>>what would be a better
>>line-height than 1.9em.[/color]
>
>
> For Arial, 1.3 or even 1.35 is typically suitable. Going up to 1.8 (why
> would you use the em unit here? it makes the value relative the _wrong_
> way, as a rule) or maybe higher might be justified if you have lots of
> subscripts, superscripts, characters with diacritic marks, etc., though
> then other features (like font-size and vertical-align for subscripts
> and superscripts) should be considered, too.
>
>[color=green]
>>And can you please explain what is wrong with Verdana? I alwayes
>>thought it was the best font for readability?[/color]
>
>
> That's one problem. What is most readable to you is not most readable
> to everyone.[/color]
yeah I know... but I think I read somewhere that Verdana was readable,
of sans-serifs fonts for that matter.

But the problem with Verdana has already been explained in[color=blue]
> this thread (and we have re-runs of more detailed explanations every
> now and then, hang around).[/color]

what font do you use for your sites? Arial?

Thank you

Henry

re: CSS syntax help

Henry pounced upon this pigeonhole and pronounced:[color=blue]
>
> what font do you use for your sites? Arial?
>[/color]

No, I use *your* default font for my sites. After all, it is what you like
to read, so why should I want to force you into something else?

body { font-family: sans-serif; }

--
-bts
-This space intentionally left blank.

re: CSS syntax help

Nick Theodorakis wrote:
[color=blue]
> On Sat, 26 Jul 2003 11:31:22 +1000, Henry <hamt1@netscape.com> wrote:[color=green]
>>And can you please explain what is wrong with Verdana? I alwayes thought
>>it was the best font for readability?[/color]
>
> At normal font sizes, there is probably no danger in using it -- some
> people claim it looks funny at larger sizes, but that is IMO a matter
> of taste. The danger is when authors suggest a much smaller than
> normal font size, and rely on Verdana to make the text more legible.
> Then when someone views the text and doesn't have Verdana installed on
> her system, the text becomes illegible.[/color]

Not helped by the fact that Verdana is not easily obtained unless your OS is
made by a certain company in Redmond, WA, USA. A company many of us got
sick of giving money to after getting an excuse for an operating system
that's total shit for the better part of a decade.
[color=blue]
> So there is often this recursive argument:
>
> Q: Why did you make your text so small?
> A: Because Verdana looks funny at normal text size.
> Q: Then why did you use Verdana?
> A: Because it's more legible at small font sizes.[/color]

What's the usual answer to:

Q: Do you realize some users cannot use Verdana?

--
Shawn K. Quinn

re: CSS syntax help

The voices are telling me that "Shawn K. Quinn"
<skquinn@xevious.kicks-ass.net> wrote on 28 Jul 2003:

"So?"

or

"I don't want to talk about all that <B><FONT COLOR=#ff0000>technical</B>
</FONT> stuff."
[color=blue]
> What's the usual answer to:
>
> Q: Do you realize some users cannot use Verdana?[/color]
--
Bob Crispen
bob.crispen@boeing.com

There's plenty of room for all of God's creatures.
Right next to the mashed potatoes.