CSS syntax defines how CSS rules are written and applied to HTML elements. Understanding the structure is crucial to effectively style your web pages.

Basic Structure of a CSS Rule

A CSS rule is made up of the following parts:

1. Selector: Identifies the HTML element(s) to which the styles will be applied.
2. Declaration Block: Contains one or more style declarations enclosed in curly braces {}.
3. Property and Value: Each declaration consists of a property (what you want to style) and a value (how you want to style it), separated by a colon :.

Syntax:

selector {
  property: value;
  property: value;
}

Example 1: Changing the Text Color of a Paragraph

p {
  color: blue;
  font-size: 16px;
}

• Selector: p targets all <p> (paragraph) elements.
• Property: color and font-size are the properties.
• Value: blue and 16px are the corresponding values.

Example 2: Styling a Button

button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
}

• Selector: Targets all <button> elements.
• Properties:
  • background-color: Sets the button's background to green.
  • color: Makes the text white.
  • border: Removes the border.
  • padding: Adds space inside the button.

Important Points About CSS Syntax:

1. Ending a Declaration: Each property-value pair ends with a semicolon ;. This separates one declaration from the next.
2. Curly Braces {}: The declaration block is enclosed in curly braces.
3. Case Sensitivity:
   • CSS properties and values are case-insensitive (e.g., color or COLOR works). However, values like font names can be case-sensitive.
   • Selectors (HTML tags) are case-insensitive in most cases but should match the HTML document.

This lesson introduced the syntax of CSS with examples and explanations.