using both style and class in an element

[Dan Langille]

Hi folks,

I found this in some pages:

<td style="border-bottom: 1px solid #000000; border-left: 1px solid
#000000; background-color:#4080A0;f ont-weight: bold; color: #000000;"
class="myclass" >

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

For what it's worth, the class myclass was not actually defined.
--
Dan Langille
resume: http://www.langille.org/

[David Dorward]

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

[Richard Barnet]

"Dan Langille" <us******@YEAH. RIGHT.dvl-software.com.in valid> wrote in
message news:c5******** *************** *********@4ax.c om...

Hi folks,

I found this in some pages:

<td style="border-bottom: 1px solid #000000; border-left: 1px solid
#000000; background-color:#4080A0;f ont-weight: bold; color: #000000;"
class="myclass" >

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

This is where the "cascade" rules come into play. IDs have more weight than
CLASSes, but locally-defined styles have more weight than linked
stylesheets, the last instance of style defined overrides a previous
instance, etc., etc.

-- Richard

[Headless]

David Dorward <do*****@yahoo. com> wrote:

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

[David Dorward]

Headless wrote:

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

[Lasse Reichstein Nielsen]

David Dorward <do*****@yahoo. com> writes:

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 - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[David Dorward]

Lasse Reichstein Nielsen wrote:

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

[Alan J. Flavell]

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

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.

[Stephen Poley]

On Thu, 10 Jul 2003 23:00:01 +0100, David Dorward <do*****@yahoo. com>
wrote:

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/

[Stephen Poley]

On Sat, 12 Jul 2003 16:24:56 +0100, Headless <in************ *@dna.ie>
wrote:

Stephen Poley <sb*****@xs4all .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.

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