Introduction to CSS - Syntax

  »   CSS  »   CSS Tutorial - Syntax

CSS Syntax - Formatting the code

Let's take a practical example and study it a little bit.

CSSh1 { color: green }

What does this exactly mean? It means that the "H1 title will be styled with green color". Nothing more and nothing less.

Let's take another look:

CSSbody { color: black; }

This will style all text inside body element with black color.

Now you try:

CSSp {
  text-align: right; 
  color: green

That's exactly what you are thinking about: Text in paragraph elements will be right aligned and will be green.

We can now write a simple line that will explain and define all this in a simple meaner. CSS syntax can be reduced to this:

CSStag { attribute: value; }


CSSelement { property: value; }

Any of this expression is true.

Rules and things to remember when writing CSS code

If the attribute value contains spaces it will be wrapped up with quotes like follows:

CSSp { font-family: "times new roman"; color: green }

If the tag, has more than one attributes, they will be separated using a semicolon (;). In a long chain of properties, the last property does not need to have a semicolon after his value. But it is a good practice to always place it. On the other hand, CSS can be written all on one line, but you will have a much better readability if you place properties one below other using indentation. Take a look at the example below:

CSSp {
  text-align: right;
  color: green;
  font-family:"times new roman";

CSS also allows you to group tags if they share the same properties.

CSSh1, h2, h3, p {

Comments in CSS

Comments in CSS have same importance and scope like HTML comments: to explain things that we've done or to prevent browser from executing the commented part of the CSS code.

CSS/* This is a simple CSS comment */
p {
  color:green;  /* I have seted a green color here */

  /* This next line will ot be interpreted by the browser */
  /* font-family: "times new roman" */  

Next chapter will be about CSS ids and classes. One of the most important, interesting and useful things in CSS.