Introduction to CSS - 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; }

or

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 attribute, they will be separated using a semicolon (;). In a long chain of properties, the last property does not need to have a semicolon after its 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 much better readability if you place properties one below the 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 {
  font-family:arial;
  color:green;
}

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 {
  text-align:right;
  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.