CSS Syntax

❮ Prev Next ❯

A CSS rule set has one part called selector, and the other part called declaration. The declaration contains various rules, each composed by a property, and a value. 

selctor{
    property :value;
  }

The above is the examples of how the syntax of css should look like the selector it can be eaither HTML tag names like: (h1, p, div e.t.c) or class names or Id name like (.classname or #idname). And the property should be any types of css properties like (color, font-size, width, heigh, e.t.c), then the value should be any css values also like: (red, 16px, 300px, 200px, e.t.c). let us try and example so that you will get better understanding of how it works. 

p{
    font-size :20px;
  }

In this example, p is the selector, and applies one rule which sets the value 20px to the font-size property:

Multiple rules are stacked one after the other: 

p{
    font-size :20px;
  }

a{
    color :blue;
  }

A selector can target one or more items: 

p, a{
    font-size :20px;
  }

and it can target HTML tags, like above, or HTML elements that contain a certain class attribute with .my-class,or HTML elements that have a specific id attribute with #my-id.

More advanced selectors allow you to choose items whose attribute matches a specific value, or also items which respond to pseudo-classes (more on that later)

Semicolons

Every CSS rule terminates with a semicolon. Semicolons are not optional, except after the last rule, but I suggest to always use them for consistency and to avoid errors if you add another property and forget to add the semicolon on the previous line.

Formatting and indentation

There is no fixed rule for formatting. This CSS is valid: 

p{
    font-size :20px;
  }

a{
    color :blue;
  }

but a pain to see. Stick to some conventions, like the ones you see in the examples above: stick selectors and the closing brackets to the left, indent 2 spaces for each rule, have the opening bracket on the same line of the selector, separated by one space. Correct and consistent use of spacing and indentation is a visual aid in understanding your code.

Now that you have learn the syntax and how to arrange the code by indenting it lets see selectors in the next chapter

❮ Prev Next ❯