Understanding Class and ID

• What is a Class and a ID?

For me to explain the difference in these two I first need to go over what they are. Both of these are a way to call upon a element within a page. Think about these as names or titles referring to sections within your template. Without Classes and ID's all CSS coding would be pointless and unusable.  A common issue found when users try to add CSS coding to their template is mixing up a Class or ID with each other.

I will cover more on these section later on so don't worry about not understand something.

• What is a ID?

ID's are used only one time within a template. When using CSS to style a ID you much first declare the element with a (#) sign. All gadgets within Blogger templates have a unique ID which can be used to declare CSS styles to the gadget.

• Example of a HTML ID:

<div id='Blog1'>

• Example of a CSS ID:

#Blog1 { CSS Styles;}

Notice the Blog1 is declared with a # sign. This is case sensitive!

• What is a Class?

A Class is different from a ID because it can be used multiple times within a template. If you see multiple Classes in your template you can not declare different styles within two classes of the same name using CSS. You can however used HTML in-line styles to do so. A CSS Class can be declared with period (.) before the class name.

• Example of a HTML Class:

<div class='sidebar'>

• Example of a CSS Class:

.sidebar {CSS styles;}

Notice the sidebar is declared with a period (.). This is case sensitive!

In this next lesson I will teach you about Parent and Child elements.

Great programmers tool that will help you identify ID and Class with Firefox.

Next Lesson-->