Quick selector question

[gavio]

Hello!

I defined some properties in my CSS:

font.customTitle{
font-family:Verdana;
font-size:80%;
color:#0000FF;
}

Then i used this in my HTML:

<font class=customTitle>Title here</font>

I have used "font." because every other (div, p, h1, h2...) eather inserts a line break, paragraph, totally messes things up...

Is there any problem if i leave it like this? Or is there any other selector i can use that won't go to a new line or change things? All browsers seem to display this correctly/same.

Also, if i use my custom selector name, Firefox "uses" it and IE doesn't.

Thank you!

-gavio

[Fotiman]

<font class=customTitle>Title here</font>

I have used "font." because every other (div, p, h1, h2...) eather inserts a line break, paragraph, totally messes things up...

Well, semantically speaking, if this is some sort of heading, then you should use a heading element (h1, h2, etc.). It would probably help to see how this is being used in relation to the items surrounding it.

Note, the div, p, and heading elements are "block-level" elements. Other elements, like font or span, are "inline" elements. The difference between the 2 is described in the HTML Spec. [w3.org], but the general meaning is that block level elements wont flow "inline" with other elements.

However, you can change the presentation of an item to display inline by giving it the CSS style:

display: inline;

So for example, you could do:
h1 { display: inline; }

And then something like this:

<h1>Title</h1> This text is inline with the title...

Semantically, this would be the better way to do it, especially since <font> is depreciated.

Hope that helps.

[edited by: Fotiman at 9:43 pm (utc) on Nov. 7, 2006]

[Geoffrey james]

Hi Gavio,

TRY:

.customTitle {
font-family: "Verdana", Arial, Helvetica, sans-serif, Verdana;
font-size: 80%;
color: #0000FF;
}

use this in your css file, i have used a . as this is the selector to place 1 class on one object you specify.

PS: i have placed numerous fonts in your code as you should be carefull about specifying a single font, you should use a 'font family', if a browser does not recognize this single style it will render its own font. You can highlight the one you would 1st like them to use by placing speech marks at either end"".

then in html:

<span class="custonTitle">
TEXT HERE
</span>

hope helps
Geoff

[gavio]

Both methods work. Thank you!

Regarding the font-family, yes, i have used multiple fonts as you showed, Geoff. It was only an example ;)

Just a quicky... will the 2nd method...

.customTitle{
...
}
<span class=customTitle>Blah</span>

... work in all browsers?

Also, is not using "" a bad practice?

Thank you!

-gavio

[Setek]

Just a quicky... will the 2nd method...
.customTitle{
...
}
<span class=customTitle>Blah</span>
... work in all browsers?

Yes, it will :) But... (yes there's always a but)

Well, semantically speaking, if this is some sort of heading, then you should use a heading element (h1, h2, etc.). It would probably help to see how this is being used in relation to the items surrounding it.

Fotiman is perfectly correct in asking you what it's actually for? :)

Yes, the

font

tag is deprecated. You should view your webpage without the CSS you've written for it - if the page still makes sense without that little

span

, then I suppose a

span

is fine. However, if you were using the

span

to make the text big and bold and centered because it's a heading, without that, it just looks like plain text, doesn't it?

That's why it's more semantic (read: meaningful, logical, correct :P) to use a

h1

,

h2

,

h3

,

h4

,

h5

or a

h6

, some sort of heading tag.

Also, is not using "" a bad practice?

Depends - it's perfectly fine with a transitional/loose doctype, since they're lax in enforcing code standardisation.

If you want to adhere to strict code standardisation, you should always encapsulate your attribute values :)

[edited by: Setek at 2:00 am (utc) on Nov. 8, 2006]