<id> and <class>

The *.* definition type is for this:

item.class

So your example p.contact is saying this:

For the item <p> when it has a class of "contact" it will display that way, rather than just as a regular paragraph.

Hope that was clear.

As for your other problems, how about some examples, what does the rest of the code look like?

~Brett

Hope that was clear.

yes, but then how come you usually see it by itself ie .contact as opposed to p.contact?

As for the other prob, the code is as follows:

html

<div class="main-text">
        <h4>Experience</h4>

        <!--tony's experience information-->
		<p>Tony has a great deal of varied and extensive experience in the oil field buisiness.  This includes, but is not limited to:</p>
		  <ul id="experience-list">
		    <li>Abandonments</li>		
			<li>Completion Equipment</li>
			<li>Fishing Tool Supervisor</li>
			<li>Geothermal</li>
			<li>Multi-laterals</li>
			<li>Open Hole &amp; Cased Hole Fishing</li>
			<li>Section Milling</li>
			<li>Servicing Fishing Tool &amp; Liner Hanger Contracts</li>
			<li>Sub-surface Safety Systems</li>
			<li>Wipstocks</li>
			<li>Workovers - on/offshore</li>
		  </ul>
      </div>

css

h4 {
    color: #800000; 
    font-family: verdana, arial, sans-serif; 
    padding: 0; 
    margin: 0 65px 25px 65px;
    }

.main-text {color: green:}

I seperated <h4> and <.main-text> to try and see where my prob is. do you need anything else?

many thanks

larmyia

Hi larmyia,
Russ has written an excellent Selectutorial which would be well worth a look.
It looks to me as if you are trying to target the h4 within a div classed main-text.

.maintext h4{ /* this should be what you want */} 
.maintext, h4{ /* although very similar the comma seperates the selectors so here you target .maintext and h4}

Using a tag in front of a class is just being more specific and only targeting classes of a particular tag as opposed to every tag with that class.

I'll make this as simple as possible:

If there is a field-name in front of it (p) the the code will apply to the class (or ID) of the text. So:

p.contact

refers to a paragraph that references the class contact.
<p class="contact">

Using ".contact" on it's own allows you to call it as a div from anywhere.

<div class="contact">
<p></p>
</div>

Your current setup of .main-text, h4 will not work because you are saying any h4 or any .main-text will have this style.

Your code should probably be without the comma and be:

.main-text h4{}

~Brett

Here you go:

CSS:

p.contact {
background-color: green;
}

.contact {
backround-color: yellow;
}

.contact p {
background-color: pink;
}

HTML

<p class="contact"> this will have a green background </p>

<div class="contact"> this will have a yellow background</div>

<div class="contact"><p> This div will have a yellow background, but the text will have a pink background. It will look like a pink box with yellow border (depending on the padding)</p></div>

thepineapplehead has actually given a very good example of how you can mix and match your classes. It gives a fair bit of flexibility in how you do your CSS, but there are potential pitfalls as well if you get into circumstances where there is greater specificity to one class declaration compared with another.

In addition to the example given above, you should realize that you can stack class declarations together:

.bold {font-weight:900;}
.large {font-size:larger;}
. . .
<p class="large bold">This is a large bold paragraph</p>

Sometimes this can have advantages over a single class declaration containing both properties.

DE

I've read what everyone's written and it's been most helpful. I'm still having trouble with my code and no idea why...I think I need some time to go over it. Will get back to you (well hopefully not!)

thanks again!

larmyia

Is it that your div class is not applying?
Could it be as simple as removing the quotation marks when identifying the class?

<div class=main-text>

for example