Member Avatar for raja

Hey Friends iam a novice in css and i just started using it . does any one can explain abt the class selectors and id selectors and when to use them with clear exapmples plz. Thanks in advance.
cheers
Raja

  • 2 Contributors
  • 1 Reply
  • 88 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

Hello, welcome to the forum. Please do us all the favor of using complete sentences with proper spelling and punctuation. "Abbreviated" speech is strongly discouraged.

An "id selector" will apply to a specific element, the element with that id. They start with a "#" sign.

So in this style declaration, the second paragraph would apply the style.

<html>
<head>
  <title>ID selector</title>
  <style type="text/css">
    #myStyle { letter-spacing: 0.3em }
  </style>
</head>
<body>
   <p id="noStyle">Normal width</p>
   <p id="myStyle">Wide text</p>
</body>
</html>

A class selector on the other hand, is generic, and can be applied to multiple elements of differing types. Class declaractions begin with a ".", and are applied using an element's "class" attribute:

<html>
<head>
  <title>ID selector</title>
  <style type="text/css">
    #myStyle { letter-spacing: 0.3em };
    .greenStyle { color: green };
  </style>
</head>
<body>
   <h1 class="greenStyle">Everything is Green</h1>
   <p id="noStyle" class="greenStyle">Normal width</p>
   <p id="myStyle" class="greenStyle">Wide text</p>
</body>
</html>

Note that ID selectors are more specific in the cascading hierarchy. Thus if the "myStyle" declaration also specified a color, the "myStyle" paragraph would be that color rather than green.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.