The CSS3 syntax is specified same as in CSS level 2 specification (which we talked about in CSS2 tutorial). In this tutorial we will only emphasis the basics.

  • Selector. A selector tells the browser where or on which element of the document you want to apply a specific rule to.
  • Declaration block. A declaration block begins with a left curly brace ({) and ends with a right curly brace (}). You put your style declarations between these braces. Each declaration consists of a property followed by a colon (:) and a value, and ends with a semicolon (;).
  • Property. A property is one of the properties defined in the CSS specification, most having intuitive names. Property names are not case-sensitive, but they are normally written entirely in lowercase.
  • Value. A value is the value you want to apply to a property. Some properties have a fixed list of values that you can choose from, while others let you specify the value yourself.

Syntax:

In the following example we can get a glimpse of a basic CSS3 syntax:

selector {

   property1 : value;

   property2 : value;

}

For instance if we want to style all paragraphs within a document, we do the following:

p {

   color : red;

   text-align : center;

}

Or in an example that depicts a CSS3 selector and properties, something like this:

div:last-child {

   font-size : smaller;

   border-top-left-radius: 1em 0.5em;

   border-top-right-radius: 1em 0.5em;

}

 

›› go to examples ››