Basic Syntax of CSS

Comments

In CSS, comments are denoted using the /* and */ symbols. Anything between these symbols is considered a comment.

9
1
2
/* This is a multi-line comment
   that spans multiple lines */

Comments can be placed anywhere in your CSS code, including within selectors, property declarations, and at the end of lines.

9
1
2
3
4
5
/* This is a comment within a selector */
.element {
  /* This is a comment within a property declaration */
  color: blue;  /* This is a comment at the end of a line */
}

Any CSS rules start with a selector, which selects the elements to apply the rules. The rules are given in the syntax of property: value, where the property is the stylistic aspect of the element you want to change, which in this case is color with the value black.

Selectors

Selectors specify which elements the styles should be applied to on a web page. :

99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* element selector */
p {
  color: red;
}

/* сlass selector */
.warning {
  background-color: yellow;
}

/* id selector */
#main-header {
  font-size: 24px;
}

Properties and values

Properties define the characteristics of an element, such as its color, font, or size. Values are assigned to properties to specify the specific characteristics.

9
1
2
3
4
5
6
7
8
/* Set the text color to red */
color: red;

/* Set the font size to 16 pixels */
font-size: 16px;

/* Set the background color to blue */
background-color: blue;

The cascade

The "cascading" in Cascading Style Sheets refers to how styles are inherited from one element to another. When multiple styles are applied to the same element, the most specific style will take precedence. For example:

9
1
2
3
4
5
6
7
8
9
/* This style will be applied to all paragraphs */
p {
  color: red;
}

/* This style will override the previous one for paragraphs with the "warning" class */
.warning {
  color: yellow;
}

Specificity

Specificity refers to the weight given to a particular style when it conflicts with another style. The more specific a style is, the more weight it has and the more likely it is to be applied.

9
1
2
3
4
5
6
7
8
9
/* This style has low specificity and will be overridden by more specific styles */
p {
  color: red;
}

/* This style has a higher specificity and will override the previous style */
#main-header p {
  color: blue;
}