Creating
named custom styles.Creating
named custom styles.As well as creating custom style classes, you can also create named custom styles. My advice - don't do it! Why not? Because in most cases named styles offer no advantage over style classes, and in all cases they severely compromise your ability to write IE4-style Dynamic HTML scripts which access the objects they've been applied to.
Anyway, for the record, here's how to create a named style:
<style>The # before the name tells the browser you're creating a named style, as opposed to a class or the redefinition of a built-in style.
So far so good, but the trouble starts when you want to use the named style. In order to apply it to an HTML tag, you have to do this:
<IMG ID="MyStyle" SRC="MyPic.jpg">
Yes, you have to use the ID= keyword to identify the style - the same ID= keyword, that is, which you'd normally use to give the HTML tag an object name so that you can access it in scripts.
It's not hard to guess what problems this causes. In fact, if you've only got one object in the document with that ID value, then you can still use it as an object name (however that means that you've only applied the style to a single object, in which case you might as well have used an inline style sheet anyway).
If, however, the document contains more than one object with that id (e.g. ID="MyStyle"), then you can't access any of them as scriptable objects because they've all got the same name!
This situation is, to put it politely, a dog's dinner.
I'm in a DIV linked to style rule "Mystyle1" via an ID="MyStyle1" keyword , but because this DIV is the only object on the page which uses "MyStyle1" (and thus has an ID="MyStyle1" keyword), it can still be accessed as a scriptable object via its ID.
This one of two DIVs linked to style rule "Mystyle2" via an ID="MyStyle2" keyword. Because two objects have the same ID="MyStyle2" keyword, neither of them can be accessed directly as a scriptable object..
This is the other DIVs linked to style rule "Mystyle2" via an ID="MyStyle2" keyword. Press the button below to try to change the text in this (or the other) DIV. Nothing happens, because the JavaScript routine (see source) specifies 'MyStyle2", and the browser can't tell which DIV it's talking about!