Re: using both style and class in an element

#1

Dan Langille wrote:

Quote:

I've never seen both style and class used in the same element. Is the
common?

No, thankfully. The style attribute is nasty.

Quote:

Which wins? What happens?

The style attribute has a higher specificity then external style sheets.

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

#2

David Dorward <dorward (AT) yahoo (DOT) com> wrote:

Quote:

I've never seen both style and class used in the same element. Is the
common?

Which wins? What happens?

The style attribute has a higher specificity then external style sheets.

Not necessarily, ID's in an external stylesheet have a higher
specificity than an inline style.

Headless

#3

Headless wrote:

Quote:

The style attribute has a higher specificity then external style sheets.

Not necessarily, ID's in an external stylesheet have a higher
specificity than an inline style.

Ah, I just did some looking in the spec.

Style attributes have the same specificity as ids, but are considered to be
defined later in the cascade order.

#foo { color: blue; }
<this id="foo" style="color: red;">

would be red BUT

this#foo { color: blue; }
<this id="foo" style="color: red;">

would be blue (as this#foo gets a score of 101, while style="" gets a score
of 100)

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

#4

David Dorward <dorward (AT) yahoo (DOT) com> writes:

Quote:

Style attributes have the same specificity as ids, but are considered to be
defined later in the cascade order.

In the original CSS 2 specification. However, it is changed in the CSS
2 errata, and therefore also in the the CSS2.1 working draft. In
these, inline styles have specificity 1,0,0,0 rather than 0,1,0,0 (as
#id).

I know Opera 7 is based on the CSS2.1 WD, and I think Mozilla is too.
IE 6 gives higher specificity to inline styles as well.

/L
--
Lasse Reichstein Nielsen - lrn (AT) hotpop (DOT) com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

#5

Lasse Reichstein Nielsen wrote:

Quote:

In the original CSS 2 specification. However, it is changed in the CSS
2 errata, and therefore also in the the CSS2.1 working draft. In
these, inline styles have specificity 1,0,0,0 rather than 0,1,0,0 (as
#id).

Insert stock "Why not update the spec at the main page instead of forcing
people to read errata!?" rant.

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

#6

On Fri, Jul 11, David Dorward inscribed on the eternal scroll:

Quote:

Insert stock "Why not update the spec at the main page instead of forcing
people to read errata!?" rant.

I'd say it's because the main page belongs to the authoritative
specification (TR), whereas the errata are a work in progress.

Note that the CSS2 TR version from 1998 still clearly states:

"This specification defines Cascading Style Sheets, level 2 (CSS2)."

and:

"The English version of this specification is the only normative
version. "

It does not say: "this specification _as amended by subsequent
errata_". I'd say there's a message in that.

#7

On Thu, 10 Jul 2003 23:00:01 +0100, David Dorward <dorward (AT) yahoo (DOT) com>
wrote:

Quote:

Dan Langille wrote:

I've never seen both style and class used in the same element. Is the
common?

No, thankfully. The style attribute is nasty.

Why? Let's take a recent example I met: some photos of different sizes
to be floated at various places in the text, each photo with a caption.

I would do this by:
- placing photo and caption in a floated DIV;
- styling this by defining the float, padding, border, margin and text
properties in an external stylesheet;
- and setting the width of the floated box in a local style attribute,
as it will be different for every photo. (Or I might place a default
size in the stylesheet and override it locally when necessary.)

How would you do it?

--
Stephen Poley

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

#8

On Sat, 12 Jul 2003 16:24:56 +0100, Headless <invalid_address (AT) dna (DOT) ie>
wrote:

Quote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

No, thankfully. The style attribute is nasty.

Why? Let's take a recent example I met: some photos of different sizes
to be floated at various places in the text, each photo with a caption.
....

Quote:

I used to do the same thing, I've moved those widths to an external
stylesheet because if an image has a caption wider than the image so
that it wraps, I prefer it not to wrap when my external stylesheets are
not used (UA not capable of retrieving my external stylesheets, or
disabled by the user).

With the consequence that every photo needs its own style in the
external stylesheet. Doesn't seem like an attractive option to me.

--
Stephen Poley

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

#9

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

Quote:

I used to do the same thing, I've moved those widths to an external
stylesheet because if an image has a caption wider than the image so
that it wraps, I prefer it not to wrap when my external stylesheets are
not used (UA not capable of retrieving my external stylesheets, or
disabled by the user).

With the consequence that every photo needs its own style in the
external stylesheet. Doesn't seem like an attractive option to me.

..x250{width:250px}

in an external stylesheet, or

style="width:250px"

in the markup.

Why would the first option be "unattractive"?

Headless

#10

On Mon, 14 Jul 2003 20:37:18 +0100, Headless <invalid_address (AT) dna (DOT) ie>
wrote:

Quote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

I used to do the same thing, I've moved those widths to an external
stylesheet because if an image has a caption wider than the image so
that it wraps, I prefer it not to wrap when my external stylesheets are
not used (UA not capable of retrieving my external stylesheets, or
disabled by the user).

With the consequence that every photo needs its own style in the
external stylesheet. Doesn't seem like an attractive option to me.

.x250{width:250px}

in an external stylesheet, or

style="width:250px"

in the markup.

Why would the first option be "unattractive"?

Because it doesn't do anything? :-P You're missing a class attribute.

No, it's unattractive because one ends up with something like

..x250 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 250px; }
..x270 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 270px; }
..x278 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 278px; }

etc, etc, etc. Plus the accompanying class attributes.

Or alternatively:

..x250, .x270, .x278 { float:right; margin: 0 0 1em 1em; text-align:
center; border: thin solid black; }
..x250 { width: 250px; }
..x270 { width: 270px; }
..x278 { width: 278px; }

etc, etc, etc, plus the class attributes, which means one has to update
three different things when one adds a photo: 2 stylesheet definitions
and the markup.

--
Stephen Poley

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