CSS Syntax


A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.

A style rule is made of three parts:-

  • Selector : A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.
  • Property : A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.
  • Value : Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.

Each selector can have multiple properties, and each property within that selector can have independent values.

The property and value are separated with a colon and contained within curly brackets.

Multiple properties are separated by a semi colon.

Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks.

body { 
    background-color:#999999;
    }
    
    p {
    color:#338844;
    background-color:#99cc99;
    font-size:30px;
    }

Combining Selectors

You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6 {
    color:#338844;
    background-color:green;
    font-size:30px;
    }

As you can see in the above code, I have grouped all the header elements into one selector. Each one is separated by a comma. The final result of the above code sets all headers to green and to the specified font size.


Comment tags

Comments can be used to explain why you added certain selectors within your css file. So as to help others who may see your file, or to help you remember what you we're thinking at a later date. You can add comments that will be ignored by browsers in the following manner.

/* This is a comment */

  /* This is
     a multi-line
     comment */

Share this article on