Re: CSS Confusion

Hello Mike,

> If I want all the event stuff to have particular characteristics,
> without having to put "class = eventlisting" in every tag in that
> area, which of the following do I put in the style sheet?:

> [option A]:
> eventlisting.h2 { yada yada yada }
> eventlisting.h3 { yada yada yada }
> eventlisting.p, td, ul, li { yada yada yada }

This is wrong. This is saying <eventlisting class="h2">


> [option B]:
> #eventlisting h2 { yada yada yada }
> #eventlisting h3 { yada yada yada }
> #eventlisting p, td, ul, li { yada yada yada }

This is mostly correct, as long as the containing element is given the
ID "eventlisting". However, you must specify the ID for every element.
Here is a correct example:

The CSS:
#eventlisting h2 { yada yada yada }
#eventlisting h3 { yada yada yada }
#eventlisting p, #eventlisting td, #eventlisting ul,
#eventlisting li { yada yada yada }

The HTML:
<div id="eventlisting">
Event stuff - dates, times, comments.
</div>


> And I'm confused about the difference in CSS terms between <.div
> class=whatever> and <.div id=whatever>   and I'm confused about the
> difference between .eventlisting and #eventlisting in a style sheet,
> Can someone please explain it to me in simple terms?

That is understandable. In short, a period goes with a class, and a
hash goes with an ID. Classes can be used numerous times on a page, in
multiple elements. ID's can be used only once per page. The ID used
for styling can also be used for JavaScript or a "named" anchor. Older
browsers, such as Netscape Navigator, have less support for ID's, and
may ingore certain declarations within an ID (such as positioning.)
That's the only differences I can think of off the top of my head. I
usually use only classes. A few examples:

h2#top {text-decoration: underline}
p.text {border: 1px solid red}
.text {color: red}


<h2 id="top">Underlined title</h2>

<p class="text">In addition to red-colored text, this paragraph also
has a red border.</p>

<p>This text is the default color, but <span class="text">these
words</span> are red.</p>

<p><a href="#top">Back to Top</a></p>


HTH,

Tim

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA