Forum Moderators: not2easy

Message Too Old, No Replies

CSS applied to <font> tag

I thought I'd never see it: <font class="classname">

         

MatthewHSE

8:31 pm on Apr 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Has anyone else seen a CSS rule applied to the <font> tag? I hadn't, until today. I can't even imagine why it was used; the rule was only styling text so the <span> tag would have worked just as well. Actually the <body> font rules could have worked, since the text in question was kind of a "label" for a table and wasn't inside any other element.

The only thing I can think of is that perhaps the author considered <font> more semantically-correct under those circumstances. Would that be a valid point in anyone else's opinion?

webboy1

8:35 pm on Apr 12, 2004 (gmt 0)

10+ Year Member



I have never seen this. Usually you only see one or the other. I haven't infact ever tried putting a CSS class within a <font> tag so don't know how it would work. However, i guess it wouldn't throw up an error since <font> is a valid HTML tag.

Strange.......must try it tomorrow when i get to work to see what effect it has......purely out of curiosity.

Webboy

Pikin_It_Up

8:37 pm on Apr 12, 2004 (gmt 0)

10+ Year Member



I'd say that was valid...

I'd also say that unless the page was optimized, there is no way semantics would have even been considered.

bruhaha

8:49 pm on Apr 12, 2004 (gmt 0)

10+ Year Member



Valid? Yes.

But why would one use a deprecated tag this way?

drbrain

9:04 pm on Apr 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It would be no different than using a span.

choster

9:44 pm on Apr 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Was it a large company's page? If you've worked in a corporate environment you may know the horror of working with older content management systems. Maybe the <font> is hardcoded somewhere and no resources are available to change it. Maybe the system reserves <span> for a specific use and it was easier to substitute <font> rather than implement a custom stylesheet on every page. Or maybe the system is running fine, but written by engineers with no knowledge of web standards-- this is hardly the wackiest output I've seen.

Well, at least their developers are taking baby steps...

SuzyUK

3:25 pm on Apr 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ah ha.. I read 2 different queries in the last few months and I knew the answers contradicted each other, though I'm sorry I can't find the 2 posts concerned now (they're on the HTML forum somewhere) but I'll summarize..

The 2 questions were, re: Search Engines "splitting" keywords

1. does <span>W</span>idget get split by the SE
The answer was yes apparently this gets split and read as "W idget"

2. the same question regarding <font>W</font>idget.. was that font doesn't split the word..

I don't know if it's as clear cut as that, but if the company are "keyword optimising".. that could be another reason?

but even so if it is the case, my feelings are that <span> shouldn't break the word anymore than <font> they're both inline.. but I suppose if that is the case it's because it's a legacy element that they(SE's) can deal with ;)

Suzy

MatthewHSE

3:56 pm on Apr 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's about what the code was like:

The CSS:

.tbltitle { 
font-family: arial;
font-weight: bold;
color: #000080;
}

And the HTML:

<font class="tbltitle">Search Results:</font>

The content of the <font> tag was not keywords, and the whole line was wrapped in the same <font> tag (no separate styles for the same word). A table of search results appeared below the line.

I just don't get it - I mean, CSS and <font> mix about as well as lightning and a swimming pool! ;)

SuzyUK

6:57 pm on Apr 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



then that's definitely not necessary, it works unless you want to validate to a doctype because <font> is deprecated as mentioned before.. and although validation is not necessary.. is this our next bugbear? or do we just take heed from...

...choster?.. who said (I'm sorry no disrespect intended.. but it's the new posting format can't refer back) that at least they're starting to take their first baby steps in which case I concur.. it's a start.. :)

thanks for the post though it brought 2 x niggles into perspective.. for me anyway...

Suzy

[added] it was indeed choster in msg#6.. sorry for confusion.. must learn to open a new window ;)

also added:

CSS and <font> mix about as well as lightning and a swimming pool!
hehe - agreed!

[/added]

sniffer

11:17 am on Apr 20, 2004 (gmt 0)

10+ Year Member



in many web tutorials & css references, use of 'span' is rarely explained properly. Using classes in the font tag follows a path of logic just as styling a <p> tag does (just not the logic of seperating style and content). Given that <p> has an affect on spacing, i can imagine that a few self-teaching css newbies would make a similar mistake

ktwilight

7:35 pm on May 4, 2004 (gmt 0)

10+ Year Member



i have to agree with sniffer...
i have been using <p> tag along with css for many months, until i come to realise how much more better span is compared to p and font tags...

it's just us newbies have to learn through experience and through searching experts like yourselves... ^^

bottom line...css rocks with span and div... XD

MatthewHSE

7:50 pm on May 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Glad you like CSS, but don't overlook the <p> tag. It's the semantic (read "proper") way of making a "paragraph," and is less code than <div>! ;)

ronin

10:01 am on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can we style <blink> tags as well then?

SuzyUK

10:42 am on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hey ronin, I hope you're joking :)

but yes you can although I find

blink {text-decoration: none;}

added to a user stylesheet is useful ;)

Suzy

ktwilight

4:31 pm on May 5, 2004 (gmt 0)

10+ Year Member



Matthew...you caught my eye when ya said that <div> is less code than <p> tag. i don't quite see your point in that. ;-/

<p>this is just a test</p>
p {
text-align: center;
color: #ffffff;
text-decoration: none;
}

<div class="test">this is just a test</div>
div.test {
text-align: center;
color: #ffffff;
text-decoration: none;
}

wouldn't both be the same? ;-/

ronin

4:41 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Depends how many paragraphs are in your document.

DrDoc

4:47 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<div> = five characters
<p> = three characters

That's what he meant by "less code" :)

However, you raise another question:

<p>this is just a test</p>
p {
text-align: center;
color: #ffffff;
text-decoration: none;
}

<div class="test">this is just a test</div>
div.test {
text-align: center;
color: #ffffff;
text-decoration: none;
}

As far as layout goes, they would not be the same. You would get a 1em space (margin) between the paragraphs, whereas the divs would be flush one against the other.

MatthewHSE

4:55 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Very true on all counts, DrDoc; thanks for explaining my "less code" statement! ;)

I hadn't thought about the divs going flush with one another, but what I was addressing was the apparent implication that the <p> tag is obselete or in some way inferior to <div>. Maybe I mis-read the intent of ktwilight's post, but all I meant to say was that there certainly are cases in which <p> is simply the better tag to use. My rule of thumb, which I expect most of us share, is to use <div> for layout, and put most text in <p> tags.

DrDoc

5:20 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



there certainly are cases in which <p> is simply the better tag to use

Like, when you want a paragraph :)

roblaw

5:56 pm on May 5, 2004 (gmt 0)

10+ Year Member



Guys,

I have started incorporating more and more CSS into our sites. What kind of issues would be caused by using a 'class' in the <font> tag as oposed to the 'span' tag?

Thanks much.

RBL

MatthewHSE

6:18 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What kind of issues would be caused by using a 'class' in the <font> tag as oposed to the 'span' tag?

I can't think of any "issues," so to speak, except that the <font> tag is deprecated and your pages won't validate to Strict standards. If you're starting with fresh pages, just get rid of <font> altogether. If you're working on a lot of existing pages, using CSS to style <font> tags may help in the transition process, unless of course you want to go in and give them all a class name at the same time. In that case, you'd just change them all to <span> while you're at it.

And, a mass search-and-replace tool would help do a lot of the tedious work of updating existing pages.

<edit>

Like, when you want a paragraph :)
Precisely - and yet there was a time that I used a single <font> tag at the beginning of a page and used nothing but <br> to create my "paragraphs" - oh, horrors of my early efforts! ;)
</edit>

ktwilight

6:32 pm on May 5, 2004 (gmt 0)

10+ Year Member



LOL! pardon my lack of understanding... ^^;;
thanks for the explaination DrDoc... ^^

i'm well aware of the spacing that <p> creates... *nods* that's why i use <span> tag for my paragraphs, and <div> for my layout... ^^
so...is it wise to using the <span> tag? or, it would be better to use <p> and adjust the spacing using CSS?

ronin

11:35 am on May 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If it's a paragraph (a block level element), then it's recommended practice to surround it with <p>...</p> tags and style the spacing using CSS.

If it's one or two words in the middle of sentence (or even one or two sentences in the middle of a paragraph) that you wish to highlight in some way (an inline element) then recommended practice would be to use span tags.

SuzyUK> <blink class="182">?!

Cerium

11:51 am on May 6, 2004 (gmt 0)

10+ Year Member



Even still... block/inline isnt the only difference. <p> adds that extra break, saving you from needing a <br> (as stated quite a few times above). Even if you change the display type of a span to block, it still lacks that break =)
<snip>

-C

[edited by: SuzyUK at 2:46 pm (utc) on May 6, 2004]
[edit reason] URL snipped [/edit]

ronin

5:16 pm on May 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



<p> doesn't add an extra break, Cerium.

You are confusing the html tag itself with the application of the style rules for <p> contained in the browser's default style sheet.

If you style the <p> tag yourself, you can give it as much or as little spacing as you like.

And <span> is for inline elements. If you want to create a block level element with no inherent semantic value, then you can use a <div>.

ktwilight

6:22 pm on May 6, 2004 (gmt 0)

10+ Year Member



thanks for the advice...will change my style from now on... ^^