What is the difference between # and . in CSS?

I kept seeing style generators format some css tags with a #(pound) sign and the css style have a .(period) in front of the declaration. This got me to thinking, wtf is the difference? I was never a big CSS stylesheet guy. I know my way around it, but generally used style builder tools to save me the headache of all the little tag nuances. I also have been hand coding HTML for well over a decade. So, when I saw a # sign, it threw me off.

I am sure it has been around a lot longer than I give it credit, but I figured I would research what its use is for. Of course, the answer is amazingly simple.

# is for ID referencing and . is for class declaration.

/*  normal class declaration. What I am used to */

.MyClass
{
    width: 100%;
}

 

/* fancy ID referencing */

#Sidebar
{
   width:100px;
}

 

If you don’t know the difference between a class and an ID, you probably don’t program javascript or forms often. Simply put, the class is a reusable style that can be applied to a number of elements. The ID is the unique identifier for a specific element. Only one element on a page will have that ID. N elements on the page can use the same class.

<a id=lnkHomePage href=’Home’>Go Home</a>

Above, lnkHomePage is the ID. To reference in CSS:

#lnkHomePage{
font-weight: bold;
}

This will style only that one tag. You know how to use classes, so I won’t bore you with that.

Well, short example.

<a id=lnkHomePage class=MyClass href=’Home’>Go Home</a>

Above uses the MyClass class declaration, shown up above.

Hope this helps clarify this simply concept. At least now you will know why the tags appear the way they do. Personally, I don’t see a lot of utility for the ID CSS reference unless you really like all your styles in one place and don’t like inline styling.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *