Can you define your own html tags with css?

[djr33]

font {
font-weight=bold;
}
...that defines how it looks for the font element.

and 'font' can be changed to whatever, like table, div, span, etc.


So...

what if you had
mytag {
something=x;
}
Would that create a new html tag?

<mytag></mytag>

I'm guessing no... but maybe there's a workaround here.

Just a random question I thought of.

[mwinter]

mytag {
something=x;
}
Would that create a new html tag?

No. CSS doesn't define anything with regard to markup languages. The sole purpose of CSS is to suggest presentational rules that can be applied to some document (and it's not constrained to only applications of SGML and XML).

The elements within HTML are defined in the DTD referenced by the document type declaration. If browsers processed HTML as an application of SGML, the DTD would be amenible to arbitrary change; one could add new elements. However, the result couldn't strictly be called HTML. As things are, the features of HTML are fixed and new elements cannot be created.

Mike

[Twey]

I'm guessing no... but maybe there's a workaround here.

The workaround is to write your own DTD. That's what XML is all about.

[djr33]

Ok... sure. just thinking. xml... interesting. Another time

[jonas-e]

That's odd, isn't it?

E.g. I define a span class in my css called ".MyBox" - with attributes for a box with background, borders, size, float etc.

Then I define a tag in the css called e.g. "JonasTagOne" with text attributes like e.g. red, 16px - and I define one called "JonasTagTwo" with black text in 10px.

Purpose?
I want to use the same kind of text box throughout the site (the .MyBox) - but I want to be able to vary the text size and colour within the box (the JonasTag#) - AND I want to be able to make changes in the css that affect the entire site.

It works perfect within Dreamveawer, in Firefox and in Opera - but Internet Explorer ingores the custom tags.

Thanks MicroSoft - we all love you more each day ..!

/jonas

[Shotgun Ninja]

Yay! Look at Vista and it's "Flawless, Self-Correcting Program Files". They were OK for a little while (heh, that's sounding like Microsoft's motto, 'OK for a little while'...) but then they try to 'fix' the wrong byte of code at the wrong time and delete half of System Idle Process or Explorer.exe or something.

[jonas-e]

Eh, sure mate ..

I wouldn't know anything about Vista - I'm working on an XP platform.

But - why does DW, Opera and Firefox support this function and IE not? What am I doing wrong?

When i refer to my home made tags I go:

CSS:
JonasTagOne {
font-size: 16px;
color: #FF0000;
}
.MyBox {
background-color: #CCFFCC;
border: solid #727272;
border-width: thin;
margin: 5px;
float: left;
width: auto;
}


HTML document:
<span class="MyBox">
<JonasTagOne>Bla bla bla</JonasTagOne>
</span>

[Twey]

IE is doing it right. The HTML specification says that unknown tags should be ignored.

JonasTagOne {
  font-size: 16px;
  color: #FF0000;
}

<JonasTagOne>Bla bla bla</JonasTagOne>

How about:

.JonasTagOne {
  font-size: 0.8em; /* Don't use pixels for font size. */
  color: #FF0000;
}

<span class="JonasTagOne">Bla bla bla</span>

[jonas-e]

Thanks - as you may notice, I'm a novice

What's wrong with using pixels size for fonts? That's more precise, isn't it?

What you suggest, is what I've been doing sofar - but I would like to use css boxes instead of the stiff table structure. But within each box, I want to use different text styles:

<span class="MyBox">
<JonasTagOne>Bla bla bla</JonasTagOne>
<JonasTagTwo>Bla bla bla</JonasTagTwo>
</span>

I figured out that I can nest one span class within another:

<span class="MyBox1">
<span class="MyHeader">Bla bla bla</span>
<span class="MyBody">Bla bla bla</span>
</span>

That works fairly ok - except when I make hyperlinks within the span class; then hrefs get marine blue IN SPITE of me defining a:link with text-deco:none.

I can specify href in:

.MyBox a:link, .MyBox a:hover, .MyBox a:visited { ...
}

But then href creates a new box within the box - unless I specify above that borders, margins, background etc =none. Seems to be sub-optimal - surely, there must be a more efficient way of doing it ...

Kindly,
Jonas
http://www.skred-svalbard.no/

[Twey]

hrefs get marine blue IN SPITE of me defining a:link with text-deco:none.

text-decoration: none; will remove the underline from links, not change their colour.