[CSS] CSS / Basics / Grammar

#css

grammar

Below is the simplest CSS code.

h1 { color: red }

There are three words, h1, color and red, called selectors, attributes and values, respectively.

• Selector: Decide what to decorate. h1 means to decorate the h1 element.
• Property: Decide what shape to decorate. color means to decorate a color.
• Value: Determines how to decorate. Red means to make it red.

In other words, the CSS code is structured as follows:

selector { property: value }

At this time, the property and value are collectively called a declaration.

Multiple declarations

You can enter multiple declarations separated by a semicolon (;). for example

h1 {
  color: red;
  font-size: 20px;
}

Means that the color of the h1 element is red and the font size is 20px. The final declaration may or may not have a semicolon. in short

h1 {
  color: red;
  font-size: 20px
}

You can also write it like this.

If there is a space in the value

If there are spaces in the value, enclose it in single or double quotes. For example, if you want the paragraph font to be Times New Roman

p {
  font-family: 'Times New Roman';
}

or

p {
  font-family: "Times New Roman";
}

Blank

Multiple consecutive spaces or line breaks are recognized as a single space. in short

selector {
  property: value;
  property: value;
}

and

selector { property: value; property: value; }

comment

Write comments between / * and * /.

/* Comment */

Even if there is a line break between / * and * /, it will be recognized as a comment.

/*
  Comment 1
  Comment 2
*/

Multi-line comments can also be decorated as follows:

/*
 * Comment
 * Comment
 * Comment
 */