...

View Full Version : Basic CSS questions, when to use # and .



PeaTearGriffin
10-31-2007, 04:47 AM
Hi,

For example, say you have: #right vs .right, what is the difference? I just use dot for everything and it seems to work, but I don't think thats correct.

It would be great if someone could explain to me in detail what is the difference, thanks.

zro@rtv
10-31-2007, 04:54 AM
# referes to an ID,
where . refers to a class.

Understanding specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) might help you grasp the differance some, but really I'd say this is more of a markup question than a CSS one.

Do you understand when you should use id's vs. classes?
The # and . are just ways of targeting elements based on those properties.

Remember, and ID can only occur once on the page.
That is to say <img id="entry1" /> can be the only id="entry1", whereas <img class="detail" /> could be one of many class="details".

jcdevelopment
10-31-2007, 03:02 PM
# referes to an ID,
where . refers to a class.

Understanding specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) might help you grasp the differance some, but really I'd say this is more of a markup question than a CSS one.

Do you understand when you should use id's vs. classes?
The # and . are just ways of targeting elements based on those properties.

Remember, and ID can only occur once on the page.
That is to say <img id="entry1" /> can be the only id="entry1", whereas <img class="detail" /> could be one of many class="details".

now you can use a different id name in a page right?

gnomeontherun
10-31-2007, 03:05 PM
You can set as many different ids on a page as you like and add a different style (#) to all of them.

PeaTearGriffin
10-31-2007, 03:54 PM
Yea, I understand that # refers to an ID and . refers to a class, but can anyone give me some practical examples when # would be used. If I have a header, content and footer wrapped within a container and I only use them once on each page am I supposed to call them #container, #header, and so on? I use . and have no problems...

jcdevelopment
10-31-2007, 03:56 PM
to me its easier to call a class on a specific area, and an id on a whole area. Like a list would be wrapped in an id, and maybe every two <li> i would place a class for maybe a different color. Does that help any?

abduraooft
10-31-2007, 04:37 PM
You can have a value of id (say id="header") only once in a document (something like an identity).

But class refers to a collections of elements (more than one in general), so you can have the same value (say class="tiny_link") for many elements in a document.
These two links may help to clear them!
http://www.tizag.com/cssT/cssid.php
http://www.tizag.com/cssT/class.php

effpeetee
10-31-2007, 04:37 PM
to me its easier to call a class on a specific area, and an id on a whole area. Like a list would be wrapped in an id, and maybe every two <li> i would place a class for maybe a different color. Does that help any?
How about this.

http://css-discuss.incutio.com/?page=ClassesVsIds

Frank

jcdevelopment
10-31-2007, 04:58 PM
ok, quick question. I have noticed (i still consider myself a novice) that in some style sheets they use something like this:

#someid.style a {some css}

now what exactly does this do?

Mwnciau
10-31-2007, 05:08 PM
#someid.style a

This refers to <a> tags inside the tag with #someid as the ID and .style as the class.


From zro@rtv's link (http://www.htmldog.com/guides/cssadvanced/specificity/):

Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.

* p has a specificity of 1 (1 HTML selector)
* div p has a specificity of 2 (2 HTML selectors; 1+1)
* .tree has a specificity of 10 (1 class selector)
* div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
* #baobab has a specificity of 100 (1 id selector)
* body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

jcdevelopment
10-31-2007, 05:31 PM
ok, so it basically overwrites a specific tag! So when u have p set in a div you can overwrite that by a more exact code?

vtjustinb
10-31-2007, 06:38 PM
That's exactly right.

Consider this CSS:

p {
font-size: 1em;
line-height: 1.5em;
color: black;
}
#content p {
color: red;
}

And the code:

<p>This is not red</p>
<div id="content">
<ul>
<li><p>This is red</p></li>
</ul>
</div>

In the above HTML the second p gets colored red. That's because a more specific rule (the second rule) applied to that element.

Specificity and the cascade are really the two powers of CSS. It allows you to 1.) single out very specific tags on the page and only apply styling to them as well as 2.) override styles through specificity so that you don't always have to modify previous rules.

jlhaslip
10-31-2007, 07:25 PM
Assigning property values, Cascading, and Inheritance (http://www.w3.org/TR/REC-CSS2/cascade.html)

srule_
10-31-2007, 07:44 PM
The first thing you must understand is that web browsers give more wait to ID selectors then classes. For example if your stylsheet specifies two different styles (one usind ID and the other using CLass) that represent the same tag. The ID style will wins and your item will take the style of the ID selector!

This leads me to my next point. When you are identifying sections of the page that only occur once yous the ID selector. examples are your header, sidebar, footer, ext... A good reason for this is that since ID's have more weight it makes sense to make them identify sections as this will guarantee that you avoid style conflicts.

When you are using a style several items the same one page you use the class (.) selector. For example if you have multiple paragraphs on a page that you want styled the same you can assign them all the same class to style them.

zro@rtv
11-01-2007, 05:41 AM
for illustration heres a little example that I think may lead to more understanding:



<div id="primary" class="column">
lorem ipsum dollar sit...
</div>

<div id="secondary" class="column">
lorem ipsum dollar sit...
</div>




.column{
float:left;
margin-right:10px;
}

#primary{width:600px;}
#secondary{width:200px;}



Other Things to Note
Also i think it might be worth noting 2 things after reviewing some of the responses here.

First: when implementing classes and ID's remember to describe what the elements ARE not what they should look like. Using classes like <a class="red_link" href="http://google.com">Google</a> is hardly any better than just using inline styles or the dreaded font tag. Instead something like <a class="external" href="http://google.com">Google</a> or something relatively semantic.

Second: Classes and ID's are NOT the only way to specify elements. You can refer to element s by their tag. Often classes will be unnecessary if you look at it.


Example of the BAD:


<ul id="movies_list">
<li class="movie">Rosmary's Baby</li>
<li class="movie">The Brood</li>
<li class="movie">Hour of the Wolf</li>
<li class="movie">Jacob's Ladder</li>
</ul>


Those classes are pretty unnecessary... the instead:


<ul id="movies_list">
<li>Rosmary's Baby</li>
<li>The Brood</li>
<li>Hour of the Wolf</li>
<li>Jacob's Ladder</li>
</ul>



is just as good and the css to target the li's would be:



ul#movies li{color:#911;}


or similar... perhaps this helps insight?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum