Welcome to the CSS tutorial, in the last topic we discussed about CSS definition, and today we will cover CSS syntax, it is very important to know about CSS syntax to implement effectively. A CSS has some style rules that browser first interprets, and then these rules apply to the corresponding elements in your web page. Let’s see what style rule is made up of:

learn css syntax

The Style rule for CSS syntax has three parts:

  • Selector – It is nothing but an Html element on which style will be used. For example, if you want to give style to a certain paragraph, then you will use <p> as a selector.
  • Property – It is a kind of attribute of html tag, for example color is a property and its value can be any color like, red, green, yellow etc.
  • Value – it is used by property or can say without property it is useless.

CSS Syntax

Now let’s put selector, property and value together to make CSS syntax complete.

Selector { property: value;}

Or you can write this as well.

Selector {



Note: After declaration part i.e property:value always put semicolon ;  it simply indicates that declaration ends there.

Understand CSS syntax with example

Let’s see how CSS syntax will help to improve the look of an html page, never forget one thing “ CSS will save your time”. Below is a simple example, which will let you understand the use of CSS syntax, and also it will demonstrate how to style the heading tag in html.


It is the CSS code, which have three styling rules ( Selector (h1), Property (color), and value(red). We will use the internal style sheet example, don’t worry, we will discuss later ways to use CSS.

h2{ color:red; }

Now put the above code in the head section of an html page and run this program.




h2 {

color: red;





<h2> Hi, SharpLesson</h2>



When you will run this program then you will see :

Hi, SharpLesson

You can clearly see the impact of simple code on the heading tag, If you will remove that style part from html code, then you will see results like this:

Hi, SharpLesson


We hope now you know what is CSS syntax and got the idea how it will help you in your web design, don’t worry, we will discuss the style and its implementation in the coming topics.

What next? Next we will Selectors and its type

If you liked our content on CSS syntax, then share with your friends or like us. If you have any doubt or suggestion then write to us: sharplesson[at]yahoo.com