How CSS Works?

The CSS syntax is made up of three parts: a selector, a property and a value. For example body {background-color: #FF0000;}. Here body is the selector, background-color is the property and #FF0000 is the value. So the code will be like selector {property: value;}. You can assign multiple property and its value to a single selector.

Example

<style>
 body{
   background-color: #FF0000;
   text-align: center;
 }
</style>

Grouping

You can create a group selectors and assign same property and value to all at once. Selector will be separate with a comma.

Example:

h1,h2,p{
  color: #0000FF;
}
h3,h4{
  color: #FF0000;
}

CLASS and ID in CSS

The class Selector

The class selector is used to define different styles for the same type of HTML element. The CSS class starts with a dot(.) followed by the class name.

Example:

.myfirstclass{
  color: #FF0000;
}

The HTML code:

<P class="myfirstclass"> I am testing my first class. </p>

The ID Selector

The ID selector is also used to define different styles for the same type of HTML element. The id selector is defined as a # followed by the Id name.

Example:

#myfirstid{
color: #FF0000;
}

The HTML code:

<P id="myfirstid"> I am testing my first ID. </p>

Difference between class selector and id selector:

The key thing to know is that IDs identify a specific element and therefore must be unique on the page. You can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

CSS Comments

A comment will be ignored by browsers so it may used to explain your code, and help you when you edit the source code at a later date. A CSS comment begins with "/*", and ends with "*/".

Example:

/* This is my first css code. */
body {background-color: #FF0000;}