The CSS Syntax

CSS Syntax

A syntax is a set of structured text with a fixed format having semantic content for the machine/humans as instructions or process.
Basically it means the way a css rule is structured so it can be read easily by the web browser.


As below you can see is the basic layout of a css rule


Lets explain how it's laid out.

A CSS rule has two main parts: a selector, and one or more declarations:

  • The Selector : This is the first element of the css rule. In this case it's referring to "h1" which is a heading tag. the selector is normally the HTML element you want to style on the web page.
  • A Declaration :  Consists of a property and a value. this is what you want the selector changed to. Again in this case we want the colour of the h1 heading to be blue, and the font size to be 22 pixels. A CSS declaration always ends with a semicolon.
  • The Property : This refers to the changes to the elements you want to make, some examples are: color, size, padding, border etc.. All properties have to be ended with a colon before the value.
  • The Value :  Every property has a value, in this case we are changing the "color" property  to the value of "blue" and the "font-size" property to the value of "22px" so on the web page the heading would show in a blue colour and have a size of 22 pixels.


To make the CSS code easier to read, you can put one declaration on each line, like this.

p  {
  color: red;
  text-align: center;
  font-size: 22px;

A style sheet ignores what is called white space (any spaces between the code) so you can basically lay out your code the way that pleases you.

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers



News Letter

Sign up for news letter