CodeByte

Write your code smartly

Tag Archives: CSS styles type

Define CSS class and CSS ID

To define a class in CSS the format used is : put a (dot) first followed by any name you want to put for a class.

.textcolor {
  color: #FFF;
}

can be used like this in a paragraph tag for instance

  <p class="textcolor"> This is CSS class <p>

The result will be the text written inside paragraph tag will have white foreground or text color.

Now defining a CSS class ID, put # symbol followed by a desired name of class ID

#contentsection {
  height: 767px;
  width: 1003px;
  margin: auto;
  padding: 0px;
  background-position:center center;
}

using it like this for instance

  <div id="contentsection"></div>

It will create a div section on the page with defined properties in the Class ID.

Now what is the difference between these two types of classes which works almost same.

The main difference between these two types of CSS declaration is that class ID can be used only once as it is just as unique identifier for a person which can only be a one person with one ID. But class can be used multiple times in your body of the page. So class is used when you want to apply that css style to a item which will be used many times but if one time then you can use ID. Also when calling class ID in a tag you must specify it by calling its ID property like this

  <div id="contentsection">

but when calling a class we use class property

  <p class="textcolor">
Design a site like this with WordPress.com
Get started