CSS ID Selector and Class Selector

In addition to the standard way of writing CSS style or giving properties inherent in the HTML selector, we can also provide their own name on a particular element by making the ID selector and Class selector.

ID Selector is a selector that can be used only once in an element, while the Class Selector can be used several times on an element.
Writing ID Selector in CSS begins with the symbol # (octothorpe), while writing the CSS class selector begins with a dot (.)
Example:

<html>
<head>
<title>CSS ID Selector</title>
<style type=”text/css”>
#header_title {
font-size:24px; font-weight:bold; color:#CC0000;}
#header_desc {
font-size:18px; font-weight:bold; color:#000066;}
.main {
font-family:Arial, Helvetica, sans-serif; line-height: 9px; }
</style>
</head>
<body>
<div>
<p id=”header_title”>CSS Syntax<br/><span id=”header_desc”>About CSS Id Selector and Class </span></p>
</div>
<div>
<p>Fill Your Stuff here</p>
<p>Fill Your Stuff here 2</p>
</div>
</body>
</html>

When viewed in a browser will be like this:
css-id-selector-result

  • Welcome to CSS Syntax [dot] com
    Welcome to our Website ... CSS Syntax com is a website that explains about anything related to web...
    www.csssyntax.com
  • CSS 3 Background Color Opacity
    Everyone knows what RGB stands for (red, green, blue), but what does the A stand for?
    www.csssyntax.com
  • CSS 3 Text Shadow
    Using CSS3, we can create shadow effects on text with very simple syntax
    www.csssyntax.com
  • CSS 3 Box Shadow
    Excess CSS3 is able to make something that can not be done by CSS2
    www.csssyntax.com