Re: Differences..

On Jun 23, 8:01*pm, Barely Audible <somewh... (AT) overthe (DOT) rainbow.com>
wrote:

I'm getting confused - what is the difference between a #class and a
.class in a css file?

ID is a unique identifier--only one instance

class is not unique--many instances

Examples of ID usage:

#wrapper
#header
#body
#footer

Examples of class usage:

..cntr (center text)
..fnt (font size)
a.link (format links)

Hope this helps

Daniel

http://ibsokc.net

Internet Business Services of OKC wrote:

On Jun 23, 8:01 pm, Barely Audible <somewh... (AT) overthe (DOT) rainbow.com
wrote:
I'm getting confused - what is the difference between a #class and a
.class in a css file?


ID is a unique identifier--only one instance

class is not unique--many instances

Examples of ID usage:

#wrapper
#header
#body
#footer

Examples of class usage:

..cntr (center text)
..fnt (font size)
a.link (format links)

Hope this helps

Daniel

http://ibsokc.net

Thanks Guys!

--
ATTFN
Jim

"Airplanes are interesting toys but of no military value."
-- Marshal Ferdinand Foch (circa 1911)

On Tue, 23 Jun 2009 23:55:47 -0700 (PDT), Internet Business Services of OKC
wrote:

On Jun 23, 8:01*pm, Barely Audible wrote:
I'm getting confused - what is the difference between a #class and a
.class in a css file?


ID is a unique identifier--only one instance

....is allowed on each page.

class is not unique--many instances

Examples of ID usage:

#wrapper
#header
#body
#footer

Examples of class usage:

.cntr (center text)
.fnt (font size)
a.link (format links)

These examples of ID names are great, but I can't recommend that the OP (or
anybody else) use class names like the examples here.

If some text needs centering, give it a class with a semantically
meaningful name, then declare centering rules for that class (and change
those rules when you decide you want the text right-aligned).

<p class="poem">Hail to thee...
..poem { text-align:center; }

I'm trying to think of a reason I'd use .fnt to dictate font size. In HTML
4.01 strict, <font> is deprecated, so I'd probably use a classed span or
div (even if, AIUI, Jukka might go ahead and use <font>). So maybe:

<p>The <span class="huge">next words</span> are really enormous. ...</p>
..huge { font-size:12em; }

As for the a.lnk example, what's wrong with the pseudo-selector in a:link?

--
John

On Jun 24, 6:07*am, John Hosking <john-n... (AT) bluemail (DOT) ch> wrote:

On Tue, 23 Jun 2009 23:55:47 -0700 (PDT), Internet Business Services of OKC
wrote:

On Jun 23, 8:01*pm, Barely Audible wrote:
I'm getting confused - what is the difference between a #class and a
.class in a css file?

ID is a unique identifier--only one instance

...is allowed on each page.



class is not unique--many instances

Examples of ID usage:

#wrapper
#header
#body
#footer

Examples of class usage:

.cntr (center text)
.fnt (font size)
a.link (format links)

These examples of ID names are great, but I can't recommend that the OP (or
anybody else) use class names like the examples here.

If some text needs centering, give it a class with a semantically
meaningful name, then declare centering rules for that class (and change
those rules when you decide you want the text right-aligned).

p class="poem">Hail to thee...
.poem { text-align:center; }

I'm trying to think of a reason I'd use .fnt to dictate font size. In HTML
4.01 strict, <font> is deprecated, so I'd probably use a classed span or
div (even if, AIUI, Jukka might go ahead and use <font>). So maybe:

p>The <span class="huge">next words</span> are really enormous. ...</p
.huge { font-size:12em; }

As for the a.lnk example, what's wrong with the pseudo-selector in a:link?

--
John

They were just very quick examples of the general idea. They were
never intended to be used. I had hoped the OP would understand and
use the naming convention that the OP liked best or follow best
practices as you suggest.

Later,

Daniel

Internet Business Services of OKC wrote:

On Jun 24, 6:07 am, John Hosking <john-n... (AT) bluemail (DOT) ch> wrote:
On Tue, 23 Jun 2009 23:55:47 -0700 (PDT), Internet Business Services of OKC
wrote:

On Jun 23, 8:01 pm, Barely Audible wrote:
I'm getting confused - what is the difference between a #class and a
.class in a css file?
ID is a unique identifier--only one instance
...is allowed on each page.



class is not unique--many instances
Examples of ID usage:
#wrapper
#header
#body
#footer
Examples of class usage:
.cntr (center text)
.fnt (font size)
a.link (format links)
These examples of ID names are great, but I can't recommend that the OP (or
anybody else) use class names like the examples here.

If some text needs centering, give it a class with a semantically
meaningful name, then declare centering rules for that class (and change
those rules when you decide you want the text right-aligned).

p class="poem">Hail to thee...
.poem { text-align:center; }

I'm trying to think of a reason I'd use .fnt to dictate font size. In HTML
4.01 strict, <font> is deprecated, so I'd probably use a classed span or
div (even if, AIUI, Jukka might go ahead and use <font>). So maybe:

p>The <span class="huge">next words</span> are really enormous. ...</p
.huge { font-size:12em; }

As for the a.lnk example, what's wrong with the pseudo-selector in a:link?

--
John

They were just very quick examples of the general idea. They were
never intended to be used. I had hoped the OP would understand and
use the naming convention that the OP liked best or follow best
practices as you suggest.

OP has the idea now:-)

I've never used much css before so if I wanted to convert the following
to CSS which of them could be be put into a css file?

<a name="variants">
<table style="border: none;" cellpadding="5" align="center"><tr><td
bgcolor="#808000" align="left" style="border: none;">
<a href="#top"><img src="../../../graphics/top-of-page.gif"
align="right" alt="Return to top of page"></a>
<font color="#ffffff">UGLY BUUGLY NOISE</font>
</td></tr></table>

No doing the css for me thanks as I want to work this out for myself -
just an indicator which of the above can go into a css file
underxhtml1-strict will do fine so I don't waste time trying to css
something that wont...

--
TTFN
Jim

Freedom Is Not Free

On Wed, 24 Jun 2009 17:49:16 +0100, Barely Audible wrote:

OP has the idea now:-)

I've never used much css before so if I wanted to convert the following
to CSS which of them could be be put into a css file?

a name="variants"
table style="border: none;" cellpadding="5" align="center"><tr><td
bgcolor="#808000" align="left" style="border: none;"
a href="#top"><img src="../../../graphics/top-of-page.gif"
align="right" alt="Return to top of page"></a
font color="#ffffff">UGLY BUUGLY NOISE</font
/td></tr></table

All the colors, borders, alignment, and padding. can go into an external
CSS file or embedded CSS (i.e., in the same file). The "style=..."
attributes you've got here are known as inline CSS, and should be the
easiest for to to export. The HTML elements themselves stay where they are.

I expect you will have trouble with the <a name="variants"> thing here, for
three reasons:

1) The element isn't evidently closed. Probably you just didnt paste the
closing tag in here, but still. ;-) (But read on.)

2) I don't believe you can put a <table> within an <a>. What this means is
that the UA's parser will probably implicitly close (terminate) the <a>
element when it runs across the <table>. So it *is* closed, but not where
you think it is. And somewhere later there may be a </a> closing tag, now
superfluous, which will cause a validation error.

3) You probably don't want name="variants" anyway. If you want some link
elsewhere to bring the visitor here using, e.g,. href="page.html#variants",
you can use an id, as in <table id="variants"><tr>... This'll give you a
link target and a handle for your CSS at the same time.

No doing the css for me thanks as I want to work this out for myself -
just an indicator which of the above can go into a css file
underxhtml1-strict will do fine so I don't waste time trying to css
something that wont...

May I recommend you forget XHTML and go right on to HTML 4.01 Strict?

Remember the validators are among your best friends when developing (and
learning), even if they don't solve *all* your problems.

GL.
--
John
Markup validation: http://validator.w3.org/
CSS validation: http://jigsaw.w3.org/css-validator/

John Hosking wrote:

On Wed, 24 Jun 2009 17:49:16 +0100, Barely Audible wrote:

OP has the idea now:-)

I've never used much css before so if I wanted to convert the following
to CSS which of them could be be put into a css file?

a name="variants"
table style="border: none;" cellpadding="5" align="center"><tr><td
bgcolor="#808000" align="left" style="border: none;"
a href="#top"><img src="../../../graphics/top-of-page.gif"
align="right" alt="Return to top of page"></a
font color="#ffffff">UGLY BUUGLY NOISE</font
/td></tr></table

All the colors, borders, alignment, and padding. can go into an external
CSS file or embedded CSS (i.e., in the same file). The "style=..."
attributes you've got here are known as inline CSS, and should be the
easiest for to to export. The HTML elements themselves stay where they are.

I expect you will have trouble with the <a name="variants"> thing here, for
three reasons:

1) The element isn't evidently closed. Probably you just didnt paste the
closing tag in here, but still. ;-) (But read on.)

2) I don't believe you can put a <table> within an <a>. What this means is
that the UA's parser will probably implicitly close (terminate) the <a
element when it runs across the <table>. So it *is* closed, but not where
you think it is. And somewhere later there may be a </a> closing tag, now
superfluous, which will cause a validation error.

3) You probably don't want name="variants" anyway. If you want some link
elsewhere to bring the visitor here using, e.g,. href="page.html#variants",
you can use an id, as in <table id="variants"><tr>... This'll give you a
link target and a handle for your CSS at the same time.

No doing the css for me thanks as I want to work this out for myself -
just an indicator which of the above can go into a css file
underxhtml1-strict will do fine so I don't waste time trying to css
something that wont...

May I recommend you forget XHTML and go right on to HTML 4.01 Strict?

Remember the validators are among your best friends when developing (and
learning), even if they don't solve *all* your problems.

Thanks! The variants aname is a hangover from an earlier version of the
site so it will disappear with this rewrite.

so the css would then be

border-style:none;
padding: 5;
background-color:#808000;

and I should name it with a . prefix in the css file so that the css
applies to the TABLE, TR & TD sections?

Apolgies for all the questions but I am eesentially housebound and have
to order manuals on recomendation - the two on css I have bought so far
aren't exactly much use for a novice!

--
TTFN
Jim

"There is NO job in the Field Artillery for the weak, the
timid or the indecisive."
-- Unknown

John Hosking wrote:

If some text needs centering, give it a class with a semantically
meaningful name, then declare centering rules for that class (and change
those rules when you decide you want the text right-aligned).

John, I try to adhere to your semantic naming orthodoxy, but on some
occasions I find it necessary to create a class for stylistic purposes
only.

..thisIsanOrdinaryParagraphButTheOverallDesignLook sBetterIfItIsBlueAndCentered{
color: #00f;
background: #fff;
text-align:center;
}

In article <2jO0m.52654$lB7.35820 (AT) newsfe19 (DOT) iad>,
William Gill <nospam (AT) domain (DOT) invalid> wrote:

John Hosking wrote:
If some text needs centering, give it a class with a semantically
meaningful name, then declare centering rules for that class (and change
those rules when you decide you want the text right-aligned).

John, I try to adhere to your semantic naming orthodoxy, but on some
occasions I find it necessary to create a class for stylistic purposes
only.

.thisIsanOrdinaryParagraphButTheOverallDesignLooks BetterIfItIsBlueAndCentered{
color: #00f;
background: #fff;
text-align:center;
}

But is it true? It sounds as if it is no ordinary paragraph. <g>

--
dorayme

dorayme wrote:

But is it true? It sounds as if it is no ordinary paragraph. <g

And to think, you once championed elimination of the paragraph (or
something to that effect). <g>