CSS Syntax

CSS syntax is the way that CSS code is written. It is a set of rules that define how CSS properties and values are written.

A CSS rule consists of three parts:

  • The selector: This is the part of the rule that identifies the HTML element that the rule will apply to.
  • The property: This is the name of the CSS property that the rule will set.
  • The value: This is the value that the CSS property will be set to.

The selector and the property are separated by a colon (:) and the value is enclosed in double quotes (“).

For example, the following CSS rule will set the font size of all <h1> elements to 24px:

h1 {
  font-size: 24px;
}

CSS rules can be written in a single line or multiple lines. Multiple lines are typically used for longer rules or for rules that contain multiple properties.

Here is an example of a CSS rule written on multiple lines:

h1 {
  font-size: 24px;
  color: red;
  text-align: center;
}

CSS rules can also be nested. This means that one rule can contain another rule. Nested rules are typically used to style complex HTML elements.

Here is an example of a CSS rule that is nested:

h1 {
  font-size: 24px;
  color: red;
  text-align: center;
  
  p {
    font-size: 16px;
    color: black;
  }
}

The CSS syntax is relatively simple to learn. However, there are a few things to keep in mind:

  • Case-sensitivity: CSS properties and values are case-sensitive. This means that font-size is different from FONT-SIZE.
  • Whitespace: Whitespace is ignored in CSS rules. This means that the following two rules are equivalent:
h1 {
  font-size: 24px;
}

h1 {
  font-size: 24px ;
}
  • Comments: Comments can be used to make CSS code more readable. Comments start with a /* and end with a */.
/* This is a comment */
h1 {
  font-size: 24px;
}

Task

Change the font size of the h1 tag to 35px. Run the code to see the results and experiment with the code to get used to it.

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Previous
Next