new to xhtml and css. css issues, need help

[Julietta]

hello.

I just started learning html, xhtml and css 2 months ago. I am learning with the head first html, xhtml and css book and so far everything is fine, yet I don't get certain things concerning css. so I created a css file in my notepad in order to link to it in my xhtml files. now they try to teach me classes. here is an example:
<h2>Green Tea Cooler</h2>
<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler" />
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
so now I was supposed to make the paragraph green so I wrote this in my css-notepad:

p.greentea { color: green; }

so far so good. but now the book tells me that I can do the same with blockquotes. so they say I should do this:
blockquote.greentea, p.greentea { color: green; }
now my question: aren't blockquotes requiring block elements in them? wouldn't it be redundant to to write the same for p, since it should be part of the blockquote, for they are of the same class? or is my question redundant? for I have really just started and I might be a little impatient and afraid of not getting all of it.
how does the class-thing actually work, I mean I just make up the classes, right? so when do I know which element belongs to which class and how do I identify that? thank you for reading and responding.

Julietta.

[teedoff]

Blockquotes are an html element meant to, well display text in a quoted format. It adds some indention(spacing) as well as some default margins.

<blockquote>Some quote or text that indents here</blockquote>

You can style that tag without giving it a class or id.

You can style any html tag in fact. The difference is that if you have more that one of the same element on a page, and you only want to style a particular element...say you have 5 paragraphs, and want to style the first one. You give the first <p> an id of"

<p id="first">Some text here</p>

Then in your CSS, you "call" or single out the paragraph with an id of first and style only that element.

You should, along with your book, visit w3schools.com and work through the tutorials there. Very easy site to use, with lots of working code examples that you can try and edit then try again.

[opticblaze]

Classes can be used multiple times. So if we look at your example and we write the following in your external css file

.greentea {color:green;}

----note that i did not specify that it must be the p,h1,em, or blockqote tag in the css ] you can reuse the class on any element in your page. So in other words on any one of the following examples adding the class "greentea" will make the text green:

<p class="greentea"> Hello world </p>
<h1 class="greentea"> Hello world </h1>
<blockquote class="greentea"> Hello world </blockquote>
<em class="greentea"> Hello world </em>

the other way of writing the notation...with the same effect would be

p.greentea, h1.greatea, em.greentea, blockquote.greentea {color:green;}

both forms of notations are correct, the only difference is that in the second example of you wanted to make h2 green as well you would have to add it to the css file...in example 1 you will only have to add the class "greentea" to the element.

But lets say you want these same elements above to be green by default...i.e on every page you want h1, p, blockquote and h1 to be green. You can then specify the following in your css file

h1, p, em, blockquote {color:green;} ---- This will make every one of those elements green by default.

As you can see CSS is very flexible...it all depends what you want to do with it.

I agree with teedoff...the best place to see css in action is w3schools.com or for brilliant stuff that will blow your mind try http://www.csszengarden.com/

[sagive]

you should.. put it all in a div
the you could apply changes so:

the css file:
.greendiv h2 {font-size: 14px;} /*just an exanple*/
.greendiv p {color: #009900} /*the hex code of green*/

the html code:
<div class="greendiv">
<h2>Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" />
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
</div>

that way the changes would take affect only on this part
and wont apply for the whole page / pages.. beter tactic

that should work gr8

[Arkinder]

If I'm not mistaken, the book is simply using the blockquote element as an example of how to have two selectors in a CSS rule. Continue reading and you should find that they don't actually include the blockquote element in the .greentea rule. Yes, that would be redundant but keep in mind that both are block level elements. So one doesn't actually have to be inside of the other.

Regards, Arkinder