I understand the difference between the two in that <id> is used when the information is unique within the document, and a <class> when the same type of info will be seen more than once.....
however I'm puzzeled. I accidentally used <id> on 4 pages and the css worked for it. realising my mistake I changed it to a class and low and behold the code no longer works. I am dumbfounded and can't figure what I'm doing wrong here.....and the more I mess around with my code the more is going wrong. I'm pulling my hair out.
html
<div class="main-text">
css
.main-text, #h4 { color: #800000; font-family: verdana, arial, sans-serif; padding: 0; margin: 0 65px 25px 65px; }
thanks
larmyia
ps...in addition, when declaring the class in css, when do you put something before the *.* - ie I've seen
p.contact { margin-left: 65px; }
<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
<id> and <class>
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.
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 & Cased Hole Fishing</li> <li>Section Milling</li> <li>Servicing Fishing Tool & 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
<id> and <class>
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.
<id> and <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
<id> and <class>
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>
<id> and <class>
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
<id> and <class>
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
<id> and <class>
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