CSS Syntax

Subject: css

CSS Syntax

CSS syntax is the set of rules used to define how styles are applied to HTML elements. A CSS rule consists of a selector and a declaration block. Understanding CSS syntax is essential before you begin styling web pages effectively.

Structure of a CSS Rule

A basic CSS rule is written in the following format:

🚀 Try it in Compiler
  • Selector: Specifies the HTML element you want to style.
  • Property: Defines which style attribute to change (e.g., color, font-size).
  • Value: Specifies the setting for the property.

Example: Basic CSS Rule

Below is an example of CSS syntax applied inside an HTML document using the <style> tag.

🚀 Try it in Compiler

Explanation:

  • The h1 selector targets the <h1> tag and applies three styles: color, font-size, and text-align.
  • The p selector targets the <p> tag and sets the text color and size.
  • Each property-value pair ends with a semicolon (;).
  • Multiple declarations are grouped inside curly braces ({}).

CSS Syntax Rules

  • CSS is case-insensitive, but best practice is to use lowercase for consistency.
  • Each declaration must be separated by a semicolon.
  • Multiple declarations are grouped using curly braces.
  • Whitespace and indentation improve readability but do not affect output.

Key Takeaways

  • A CSS rule consists of a selector, followed by a set of property-value pairs inside curly braces.
  • Each property controls a specific style aspect like color, size, or alignment.
  • Each value defines how that property should be applied.
  • CSS declarations must end with a semicolon to separate multiple style rules.
  • Proper formatting improves code readability and helps in debugging styles easily.
Next: CSS Comments