CSS Syntax - How CSS Code is Written ?

The syntax to write a CSS code, comprises of:

selector
declaration

For example:

p {color: brown;}

In above code:

p - is a selector. Selects the paragraph (P) tag
color: brown; - is declaration. Declares brown color to text inside P tag
color - is a property
brown - is a value

Note - The declaration block consists of property and value, in the form of property: value;.

Note - We can have multiple declarations for a selector (an HTML element). For example:

p {color: brown; text-align: center;}

Note - All the declarations must enclosed within a {} (an opening and a closing curly braces).

Now let's take a complete example, that shows how the CSS code can be implemented to style HTML elements.

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {color: brown;}
      span {background-color: tomato; color: white;}
   </style>
</head>
<body>
   
   <p>This is <span>Para</span> one.</p>
   <p>This is Para two.</p>
   
</body>
</html>

Output

This is Para one.

This is Para two.

CSS Online Test

« Previous Tutorial Next Tutorial »