CSS Syntax

A CSS rule consists of a selector and one or more declarations.Like this:

selector {declaration1; declaration2; … declarationN }

A selector is usually an HTML element that you need to define styles. It can be an HTML tag name, a class name, or an element ID.

Each declaration consists of a CSS property and a value, separated by semicolons. For example:

h1 {color:blue; font-size:12px;}

The above code sets the <h1> element to blue and sets the font size to 12 pixels.

Note: All declarations are surrounded by braces.

CSS code format optimization

Add a semicolon at the end of the last declaration:

h1 {color:blue; font-size:12px;}

The semicolon at the end of the declaration is not required, but experienced designers will add a semicolon at the end because it will reduce the chance of errors when adding or removing a declaration.

Each declaration occupies one line:

p {
  text-align: center;
  color: black;
  font-family: arial;

It can enhance the readability of the style sheet.

You don’t need to worry about increasing the size of the CSS file. Usually we publish the site by using tools to compress these CSS files.

Add a space between attributes and values:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;

Spaces do not affect the browser to parse CSS, but doing so allows us to edit CSS styles more easily.

CSS comments

Comments are mainly used to explain code or temporarily delete unnecessary code.

CSS comments begin with “/*” and end with “*/”, for example:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;

/* This is
a multi-line
comment */

Leave a Comment

Your email address will not be published.