View Full Version : CSS Help plzz


raja
10-06-2005, 07:31 AM
hey iam a total novice in css. Does any 1 plzz explain indetail abt class selectors, ID Selectors and when to use them with example plzz. it ill be really helpful for me. i know class selectors can be used with a period ie. .mynavbar and ID selectors with # is #mynavbar. But i would like to to when to use them and where to use them etc.. regarding these two selectors its really confusing plzz some one bale me out plzzz. Thanks in advance.
cheers
Raja

pb&j
10-06-2005, 08:16 AM
class can be used many times.
id can be used only once.

so if you have an effect that you want to use 3 or 4 times in your page (perhaps make certain paragraphs red) , then use a class selector.

if you want to position a div into a specific spot and give it certain size and color, then that is usually something that will be "used" once, so use an id selector.

that rules is not set in stone though, you can use class only once if you like too, but id should be kept at only once.

Monkey Bizzle
10-06-2005, 01:58 PM
id can be used only once.

if you want to position a div into a specific spot and give it certain size and color, then that is usually something that will be "used" once, so use an id selector.

Just to clarify, when pb&j says it can only be used once... That is once per page. You can use an id more than once on your site, as long as it only occurs once per page. =)

raja
10-06-2005, 06:50 PM
"once per page means"?? suppose iam having a header (h1) on my home page ok , i use id for the Font :color ok, in the same page iam having a div which i want to position in to a specific spot and want to give it certain size and color ok, can i use the second ID on the same page? i mean home page ?its a bit confusing

Monkey Bizzle
10-06-2005, 07:12 PM
you can use more than one id on a page, but they have to be different... Like if you have #small and #large you can use them both on the same page, but you can only use #small once on the page and #large once on the page... However, you can use them on more than one page...

raja
10-08-2005, 12:27 PM
still its confusing see my code i used id selectors more than once in the page yet its working. see the code plzz.Its soo confusing :( can u help me plzzz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> this is a testing page. </title>
<style type="text / css">

<!--

p.blue {

color : blue ;

}

#red {

color : red;
font-weight :bold;

}

-->

</style>

<body>

<h1 id ="red"> A more complex example </h1>
<p class ="blue"> This is the 1 st paragraph</p>
<p class "blue"> This is the second para contain <em>emphasized</em> text.</p>
<p>Finally, we come to the 3 rd paragraph. The <em>ultimater</em> paragraph.</p>
<h2 id ="red"> This is the testing one </h2>
<p id ="red"> This is the 1 st paragraph</p>

</body>

</html>

kittycat
10-08-2005, 03:22 PM
Change the id to a class then
#red becomes .red
id="red" becomes class="red"

raja
10-09-2005, 08:22 AM
Monkey Bizzle. still my doubt is not cleared :(( as u said an id selector cant be used more than once in a page isnt it .plzz see my code iused id selector more than once on the same page and its worked. plzz can u explain further plzz. Its soo confusing.Thanks in advance
cheers
Raja

pb&j
10-09-2005, 09:00 AM
yes, it may work, but it is bad coding.
your fixed coding should look like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> this is a testing page. </title>
<style type="text / css">
<!--
.blue {
color : blue;
}
.red {
color : red;
font-weight :bold;
}
-->
</style>

<body>

<h1 class="red"> A more complex example </h1>
<p class ="blue"> This is the 1 st paragraph</p>
<p class="blue"> This is the second para contain <em>emphasized</em> text.</p>
<p>Finally, we come to the 3 rd paragraph. The <em>ultimater</em> paragraph.</p>
<h2 class="red"> This is the testing one </h2>
<p class="red"> This is the 1 st paragraph</p>

</body>
</html>

when you are using ID, it should be on something that appears only once in your main coding area. if it is used once or more times, like your example, then class should be used.

remember, even though things may still "work", it does not mean the coding is done correctly. having correct coding will make it work in more browsers.

raja
10-09-2005, 04:44 PM
then whats the use of ID Selectors and why the rule that it cant be used more than once ? can any1 explain plzzz the more i see the examples the more iam getting doubts on it . i just started using css.

Douglas
10-09-2005, 05:44 PM
a userID - there is only one. A class has more than one... does that make sense?

pb&j
10-10-2005, 01:24 AM
ID was created and used when there was going to be only one instance of an effect. yes, CLASS can do the exact same thing, but when you see an ID then you know you have found the right piece of coding since there are no other ones.

when i position divs around my page, i use a different ID for each different one since each one will have a different position value. there would be no need to use CLASS.

inside those div area, i have quite a lot of spots when i want red bold letters, so i created a CLASS to affect all of those areas.

perhaps think of it this way... ID only has enough "power" to affect one area. CLASS is bigger and has more "power" so it can be used a lot of times.