CSS Syntax

CSS Syntax

CSS syntax is the set of rules used to write CSS correctly. It tells the browser which HTML element you want to style and what design changes should be applied to it.

A CSS rule usually contains a selector and a declaration block. Once you understand these two parts, writing basic CSS becomes much easier.

Here is a simple CSS rule:

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

This rule selects every <p> element and changes its text colour to blue and font size to 18 pixels.

Structure of a CSS Rule

A CSS rule has the following structure:

selector {
  property: value;
}

Each part has a specific purpose:

• Selector: Identifies the HTML element to style.
• Declaration block: Contains one or more style instructions.
• Property: Specifies what you want to change.
• Value: Specifies how the property should look or behave.

Consider this example:

h1 {
  color: green;
}

In this rule:

• h1 is the selector.
• color is the property.
• green is the value.
• color: green; is a declaration.

The browser reads this instruction and displays all <h1> headings in green.

Understanding Selectors

A selector tells the browser which HTML element should receive the styles.

You can select an element using its HTML tag name:

p {
  color: gray;
}

This rule styles every paragraph on the page.

You can also select an element using a class:

.message {
  color: red;
}

The class is added to an HTML element like this:

<p class="message">Please complete all required fields.</p>

A class selector begins with a period. Classes are useful because the same class can be added to multiple elements.

An ID selector begins with a hash symbol:

#main-title {
  color: navy;
}

Its related HTML could be:

<h1 id="main-title">Learn CSS</h1>

An ID should normally be unique within a page.

Properties and Values

CSS properties represent the visual features you want to control. Each property accepts one or more supported values.

.card {
  width: 300px;
  background-color: white;
  border: 1px solid gray;
}

In this example:

• width controls the element's width.
• background-color changes its background.
• border adds a border around it.

Values can use different formats. They may be keywords, numbers, measurements, colours, or functions.

.box {
  display: block;
  width: 50%;
  padding: 20px;
  color: #1f4ed8;
}

Here, block is a keyword, 50% is a percentage,20px is a pixel measurement, and #1f4ed8 is a hexadecimal colour value.

Writing Multiple Declarations

You can write multiple declarations inside one declaration block. Each declaration should normally end with a semicolon.

button {
  background-color: blue;
  color: white;
  padding: 12px 20px;
  border: none;
}

Developers usually place each declaration on a separate line. This formatting makes the code easier to read and update.

The final declaration can work without a semicolon, but adding one is recommended. It prevents mistakes when another declaration is added later.

Using Curly Brackets, Colons, and Semicolons

CSS uses several special characters:

• Curly brackets { } contain the declarations.
• A colon : separates a property from its value.
• A semicolon ; separates one declaration from another.

Incorrect punctuation can stop a CSS rule from working.

Incorrect CSS:

p {
  color = red
  font-size: 16px;
}

Correct CSS:

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

The color declaration was incorrect because it used an equal sign instead of a colon and did not include a semicolon.

Adding Comments in CSS

Comments help explain the purpose of your code. Browsers ignore comments, so they do not affect the page design.

A CSS comment begins with /* and ends with */.

/* Styles for the main page heading */
h1 {
  color: darkblue;
}

Comments are helpful when working on a large stylesheet or collaborating with other developers. Keep them short and use them to explain important decisions.

Grouping Selectors

If multiple elements need the same styles, you can group their selectors using commas.

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
  color: #222;
}

This rule applies the same font and colour to three heading levels. Grouping selectors reduces repeated code and makes the stylesheet easier to maintain. Without grouping, you would need to write a separate rule for every heading.

Whitespace and Code Formatting

Whitespace includes spaces, tabs, and line breaks. The browser usually ignores extra whitespace in CSS. Both examples below work:

p { color: blue; }

p {
  color: blue;
}

However, properly formatted CSS is easier for people to read. Use consistent indentation, place related declarations together, and avoid writing large rules on a single line.

Handling CSS Errors

When the browser finds an invalid declaration, it usually ignores that declaration and continues reading the remaining CSS.

p {
  color: not-a-color;
  font-size: 18px;
}

The invalid colour will not be applied, but the font size may still work. Browser developer tools can help you identify invalid or overwritten CSS rules.

Key Takeaways

• CSS syntax defines how style rules must be written.
• A CSS rule contains a selector and a declaration block.
• A declaration consists of a property and its value.
• Use a colon between a property and value.
• End declarations with semicolons.
• Use curly brackets to contain declarations.
• Selectors identify the HTML elements you want to style.
• Comments and consistent formatting make CSS easier to maintain.
• Browsers usually ignore invalid declarations while processing valid ones.