PDA

View Full Version : Can you define your own html tags with css?



djr33
04-28-2006, 10:24 AM
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
04-28-2006, 02:08 PM
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
04-28-2006, 03:14 PM
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
04-30-2006, 08:52 PM
Ok... sure. just thinking. xml... interesting. Another time :)

jonas-e
02-22-2007, 07:51 PM
That's odd, isn't it? :confused:

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 ..! :mad:

/jonas

Shotgun Ninja
02-22-2007, 07:59 PM
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
02-22-2007, 09:37 PM
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
02-22-2007, 10:04 PM
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
02-23-2007, 07:05 AM
Thanks - as you may notice, I'm a novice :D

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
02-23-2007, 01:51 PM
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.

Shotgun Ninja
02-23-2007, 02:00 PM
Thanks - as you may notice, I'm a novice :D

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


Well, that depends. On scalable size elements of the page (ex. anything with a width or height of something%), pixel sizes can be distorted and therefore distort the page depending on the user's screen, preferences, inclusive style sheet, etc. Imagine a 12px font in a table with width set to 35%, on an ancient computer with 640 x 480 screen size. The font would be huge, and the table would have to be distorted to fit, which would break the page.

Twey
02-23-2007, 03:13 PM
Shotgun Ninja has hit the nail right on its head.

Generally, font sizes scale with the resolution in order to be readable. 12pt is 12pt is 12pt, at 640x480, 800x600, or 1600x1200: the size in pixels differs, but it has roughly the same real-world size (although this can differ a little due to monitor differences). However, twelve pixels will always be twelve pixels, and a pixel is considerably larger on 640x480 (where the text can look ridiculously huge) than on 1600x1200 (where the text can be too small to read).

Note that I'm not suggesting you use points (pt) as a font measurement either, since this doesn't take the user's default into account, which may be necessary (if the user is visually impaired, s/he might need a very large font; if the user has a very large monitor but a cheap graphics card that can't handle larger resolutions, s/he will have his/her font set very small). ems would be the perfect units to specify font sizes, but unfortunately IE has problems with them. Thus, we use percentages. 100&#37; is the user's default font size. It's usually safe to vary from that by around 10% (although I've been known to use 120% on occasion).

jonas-e
02-23-2007, 03:54 PM
Cheers - of course - I was a bit quick there - but all the same: I tried "color:inherit;" and "color:none;" ...:

a:link {
text-decoration: none;
color:inherit;
}a:visited {
text-decoration: none;
color:inherit;
}a:active {
text-decoration: none;
color:inherit;
}a:hover {
color: #FF0000;
text-decoration: none;
}


Again - the inherit works fine in Firefox and Opera but not in IE. Until the last release, EI didn't support transparent png-format either. As a webmaster I must adapt to what the majority is using - otherwise, IE - go to H....!

:eek:

Twey
02-23-2007, 04:28 PM
Neither "inherit" nor "none" are valid values for color.

jonas-e
02-23-2007, 04:43 PM
Thanks - I'll have to accept that.

But who decides that?

If all other browser support it ...

:rolleyes:

Twey
02-23-2007, 04:52 PM
The W3C. I suspect the other browsers are probably just defaulting to the parent's colour because they don't understand the colour string, and using "wibble" instead of "inherit" would probably have the same effect.

jonas-e
02-23-2007, 06:07 PM
Well, that depends. On scalable size elements of the page (ex. anything with a width or height of something%), pixel sizes can be distorted and therefore distort the page depending on the user's screen, preferences, inclusive style sheet, etc. Imagine a 12px font in a table with width set to 35%, on an ancient computer with 640 x 480 screen size. The font would be huge, and the table would have to be distorted to fit, which would break the page.

I understand .. though

My users are from the local community Longyearbyen or Norway - and I'm sure they all have large screens and computers no older than max max 5 years.
I have locked the web page to be 800px wide, no more, no less - and it should be viewed as such (or zoomed if you like).

Twey
02-23-2007, 06:45 PM
I have locked the web page to be 800px wide, no more, no less - and it should be viewed as such (or zoomed if you like).That's a very bad idea, and makes no difference at all to what I was describing.
My users are from the local community Longyearbyen or Norway - and I'm sure they all have large screens and computers no older than max max 5 years.So? There could be other people who want to view your site; people using mobile devices or machines not their own; people with damaged graphics cards... don't say "this is my audience, they all have this hardware, I'm not going to cater to anything else." The Web is not paper (http://www.westciv.com/style_master/house/good_oil/not_paper/).

jonas-e
02-24-2007, 07:36 AM
.. using "wibble" instead of "inherit" would probably have the same effect.
I suppose by wibble you mean any random word? Inherit had a distinctly different effect from none, though ..

jonas-e
02-26-2007, 07:46 AM
That's a very bad idea, and makes no difference at all to what I was describing.So? There could be other people who want to view your site; people using mobile devices or machines not their own; people with damaged graphics cards... don't say "this is my audience, they all have this hardware, I'm not going to cater to anything else." The Web is not paper (http://www.westciv.com/style_master/house/good_oil/not_paper/).
Thanks a bundle - very interesting reading!! I will begin to implement these things by and by as I find the time. I have already decided to order a number of books from sitepoint. It is important for me to get started with MySql and php which there is a book for. Any other suggestions on that?
/j

Twey
02-26-2007, 02:32 PM
I usually recommend against both PHP and MySQL (although the InnoDB engine is a lot better than previous attempts). Try PostgreSQL, and one of Python, Perl, Ruby, or JSP.

jonas-e
02-26-2007, 10:02 PM
I usually recommend against both PHP and MySQL (although the InnoDB engine is a lot better than previous attempts). Try PostgreSQL, and one of Python, Perl, Ruby, or JSP.
Why?
Is it easier to learn for a novice?
Shall be used to GIS implementation in the long run - probably ESRI ArcGIS 9.3 webserver.

Twey
02-26-2007, 10:25 PM
Is it easier to learn for a novice?PHP is easy to learn, but slow to use, and a nightmare to maintain.

jonas-e
06-24-2007, 11:05 AM
Eh, sure mate ..

[FONT="Courier New"]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>

Well, I learned a lot since I wrote the above. I didn't know about div tags and that you can define css styles for elements nested in specific tags. So the solution to my problem was something along this way:

#content .box {css values}
#content .box h1 {css values}
#content .box p {css values}

<div id='content'>
<div class='box'>
<h1> Heading One </h1>
<p> Box text text text text text text text </p>
</div>
</div>
I learnt it from this book:
http://www.sitepoint.com/books/css2/

For other novices: The "div id=.." and the "#content" can be left out above - it's only for illustrative purposes ...

AND: I no-longer use pixels-size, fixed width and tables in my webdesign - it's all liquid and xhtml 1.0 validated purely css based - thanks to those of you in this forum who helped me on the right path!

Cheers,
Jonas

Twey
06-24-2007, 03:00 PM
Sounds good except that using XHTML isn't really a good idea right at the moment, due to IE's lack of support.

jonas-e
06-24-2007, 03:38 PM
Eh - to my knowledge I'm just using html - but w3c calls it xhtml - I suppose because you can use XLM along with it - which I don't - because I have no idea what xml is. So I'm duing pure html markup without deprecated tags with the design based on css.

Unfortunately, I don't have acces to any IE6 browsers - but I always check my design in Firefox 2, Opera 9 and IE7 (I don't have acces to Mac either).

Isn't that good enough?

Twey
06-24-2007, 04:19 PM
IE7 doesn't support XHTML either. If it displays, you're probably sending it with the text/html MIME type. Make sure your DOCTYPEs match up -- if you're sending HTML, it should have the HTML 4.01 Strict DOCTYPE and validate with it.

jonas-e
06-24-2007, 08:02 PM
I suppose you are referring to this tag?:
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />

So what you are saying is, that xhtml 1.0 and is the same markup as html 4.01 - only difference is whether you are using xml or not ..?

Do I understand correctly?

jonas-e
06-24-2007, 08:06 PM
Sounds good except that using XHTML isn't really a good idea right at the moment, due to IE's lack of support.
BTW - extensive use of xhtml would then result in one of two good things:

The majority of users will have to change to a standard compatible browser, or
IE will have to become standard compatible ...

Twey
06-24-2007, 08:37 PM
I suppose you are referring to this tag?:
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />That's a <meta> element. It "fakes" an HTTP header, but will be overridden by the actual server header if it's sent (which, in the case of Content-Type, it almost always will be). To change the real HTTP Content-Type header, you need to configure your server properly.
So what you are saying is, that xhtml 1.0 and is the same markup as html 4.01 - only difference is whether you are using xml or not ..?Not quite the same markup. Minus some variations (like self-closing tags vs. singleton tags) valid XHTML 1.0 Strict will be valid HTML 4.01 Strict, since the former is just a reformulation of the latter in terms of XML (rather than SGML, which is the markup language on which HTML is based). Thus why browsers display it when you send it as text/html: it's similar enough that they can just error-correct it into real HTML.
BTW - extensive use of xhtml would then result in one of two good things:The majority of users will have to change to a standard compatible browser, or IE will have to become standard compatible ...Using actual XHTML, with an application/xhtml+xml MIME type, that is so, yes. Not with a text/html MIME type: this isn't real XHTML at all, and IE can render it thanks to error-correction. If you want to switch to real XHTML, knowingly abandoning your IE users, then by all means do so: I don't usually suggest it because most people care more about the revenue generated by that >50&#37; of users. If you want to do this, you might do (for Apache):
AddType application/xhtml+xml .xhtmland then name your pages with a .xhtml extension instead of a .html one.

Tau'ri
06-24-2007, 09:24 PM
I usually recommend against both PHP and MySQL (although the InnoDB engine is a lot better than previous attempts). Try PostgreSQL, and one of Python, Perl, Ruby, or JSP.HUH?

Wha chu sayin', Willard? Could you expand this statement please?

Jeff

Twey
06-24-2007, 11:13 PM
PHP is a rather poor language. Not that it can't be useful; it is, and indeed it's used very widely, but as a language it makes a lot of things harder than they need to be, and is quite inconsistent.

If you want a sample of how disorganised PHP development and the resulting language are, try doing:
$a::b;some time. This is an obvious syntax error, but the point is that the error message is:
Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in php shell code on line 1T_PAAMAYIM_NEKUDOTAYIM? This is apparently Hebrew for "double colon." Why is it still there in the English locale? Gods know.

jonas-e
07-03-2007, 09:34 AM
Thanx for the elaboration on xhtml vs html.
/jonas