CSS Syntax | How CSS is structured

CSS, or Cascading Style Sheets, is the language used to style web pages. It controls everything from the font size and color of text to the layout and background of the entire page. Understanding the basic syntax and structure of CSS is essential for anyone who wants to create visually appealing and user-friendly websites. Here's a breakdown:


Selectors are patterns used to select the elements you want to style. They could be HTML elements, classes, IDs, or other attributes. For example:

h1 { color: blue; }
.container { background-color: lightgray; }
#main-header { font-size: 24px; }

Declaration Block

A set of CSS declarations enclosed within curly braces {} forms a declaration block. Each declaration within the block consists of a property and a value, separated by a colon :. Multiple declarations are separated by semicolons ;. For example:

selector { property1: value1; property2: value2; }

Properties and Values

CSS properties specify the aspects of the element you want to change, and values define how you want to change them. There are numerous properties covering everything from layout to typography and colors. For example:

h1 { color: blue; /* Property: color, Value: blue */ font-size: 36px; /* Property: font-size, Value: 36px */ }


You can include comments in CSS using /* */. Comments are ignored by browsers and serve as notes for developers. For example:

/* This is a comment */

Linking CSS to HTML

You can link CSS to HTML documents using the <link> element within the <head> section of your HTML file. For example:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <!-- Your HTML content here --> </body> </html>

Embedding CSS

Alternatively, you can embed CSS directly into an HTML document using the <style> element within the <head> section. For example:

<!DOCTYPE html> <html> <head> <style> h1 { color: blue; } </style> </head> <body> <!-- Your HTML content here --> </body> </html>
Additional Notes:

Combining Selectors with Commas

Multiple selectors separated by commas allow applying the same styles to different elements efficiently. For instance, h1, h2 selects both <h1> and <h2> elements, enabling unified styling for headings without repeating CSS rules.

Specificity Levels of Selectors

CSS selectors have varying specificity levels, determining which style takes precedence in conflicts. Inline styles have the highest specificity, followed by IDs, classes, and element selectors, respectively. Understanding specificity helps resolve styling conflicts systematically.

Types of Values

CSS values can be absolute (e.g., 10px), relative (e.g., 20%), or keyword-based (e.g., bold, center). These value types offer flexibility in defining properties like size, positioning, and font characteristics, allowing for precise styling adjustments tailored to design requirements.

Multiple Values for Properties

Certain CSS properties allow specifying multiple values separated by spaces, providing versatile control over styling. For example, padding: 10px 20px 15px 5px; sets different padding values for top, right, bottom, and left sides, streamlining layout adjustments without redundancy.

Adding Comments for Clarity

CSS comments enclosed within /* */ aid in code readability and maintenance by providing contextual explanations. Whether documenting design decisions, marking sections for revisions, or clarifying complex styling rules, comments enhance code comprehension and collaboration among developers.


Basic CSS syntax and structure involve selectors to target elements, declaration blocks to define styles, and properties with corresponding values. Selectors can be combined, and various types exist with different specificity levels. Values can be absolute, relative, or keyword-based, while properties may accept multiple values. Comments aid in code clarity and organization.