CSS Syntax

CSS has very simple syntax. CSS is used for writing different properties, like colour, border, size etc. Properties and their values are enclosed in a group shape. A General Syntax of CSS is given here

CSS
{
   Property:Value;
   Property:Value;
   Property:Value;
   Property:Value;
}

CSS Comprises of many properties. For example color is a property and we can assign it a value, lets say blue. As you can see from above syntax, properties are followed by colon (:) and the end of line is a semi colon (;). Here is an example of how to write properties and values in CSS

color:blue;

There are many ways to name CSS group. We will here consider the three mostly used ones.

• Selector
• Class
• Pseudo Class

CSS Selector is used when we name our CSS group same as an HTML Tag, for example H1. H1 is an HTML Tage, that is used for hading one. If we name our CSS H1 then all the properties that we have in this selector will automaticallly apply on H1 Tags on our web page. An example of CSS Selector is given here

H1
{
   color:blue;
   font-size:15px;
}

The above example will apply the defined properties (color and font size) on all H1 on our web page. Offcourse we can apply different styles on different h1. To do that we are going to use a CSS Class. The structure of making a css class is same as for CSS Selector, the only difference is that Class name is not an HTML Tag, we can use any arbitrary name. The name of the Class would usually start with a hash (#) or a period (.). A general syntax for a css class is given here

#ClassName
{
   Property:Value;
   Property:Value;
   Property:Value;
}

or

.ClassName
{
   Property:Value;
   Property:Value;
   Property:Value;
}

Pseudo Classes are simply different states of Selectors. For example, a is used for hyperlinks in html. Hyperlinks can have different states, when we move mouse over or when we have visited them. So Persudo Classes for hyperlink selectors would be a:hover and a:visited.