CSS Syntax

CSS syntax defines how styling rules are written so that browsers can understand and apply them to HTML elements. Learning CSS syntax is one of the first steps toward building attractive, responsive websites.

A CSS rule consists of a selector and a declaration block. The selector identifies the HTML elements you want to style, while the declarations specify the styles to apply.

Basic CSS Syntax

The basic structure of a CSS rule looks like this:

selector {
  property: value;
}

Each part has a specific purpose:

• Selector: Identifies the HTML element or elements to style.
• Property: Specifies the characteristic you want to change, such as color or font size.
• Value: Defines the setting for that property.
• Declaration: A property and its value together.
• Declaration block: The declarations enclosed within curly braces.

For example:

h1 {
  color: blue;
  font-size: 32px;
}

Here, h1 is the selector, color and font-size are properties, and blue and 32px are their respective values.

Understanding CSS Selectors

A selector tells the browser which HTML elements should receive a style. You can select elements by their tag name, class, ID, or other conditions.

Consider this HTML:

<h1>Welcome to Web4Learners</h1>
<p>Learn CSS step by step.</p>
<p class="highlight">Practice makes progress.</p>

You can style these elements using different selectors:

h1 {
  color: navy;
}

p {
  font-size: 18px;
}

.highlight {
  color: red;
}

The heading becomes navy, all paragraphs receive an 18-pixel font size, and the paragraph with the highlight class becomes red.

Explore our HTML Class Attribute tutorial to learn how classes help identify elements for styling.

CSS Properties and Values

CSS properties control different aspects of an element’s appearance. Each property accepts specific values.

For example:

body {
  background-color: #f4f7fb;
  font-family: Arial, sans-serif;
}

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

In this example, background-color sets the background, font-family specifies the font, padding adds space inside the button, and border-radius rounds its corners.

Choosing valid property values is important because browsers may ignore invalid declarations.

Using Multiple CSS Declarations

You can write multiple declarations inside one CSS rule. Each declaration is normally separated by a semicolon.

p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

This rule changes the paragraph’s color, font size, line spacing, and alignment.

For readability, place each declaration on a separate line. Although CSS allows different formatting styles, consistent formatting makes stylesheets easier to maintain.

Grouping CSS Selectors

You can apply the same styles to multiple selectors by separating them with commas.

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

This rule applies the same color and font family to all three heading levels.

Grouping selectors reduces repeated code and helps maintain a consistent design.

Common CSS Syntax Mistakes

Beginners often make a few simple mistakes when writing CSS:

• Forgetting the opening or closing curly brace.
• Using a colon incorrectly between a property and its value.
• Omitting semicolons between declarations.
• Misspelling property names.
• Using invalid property values.
• Writing a class selector without the dot or an ID selector without the hash symbol.

Correct example:

.notice {
  color: green;
  font-weight: bold;
}

Incorrect example:

notice {
  color green
  font-weight bold
}

The incorrect example is missing the class-selector dot, colons, and a semicolon between declarations.

Best Practices for Writing CSS

Follow these practices when creating stylesheets:

• Use consistent indentation and spacing.
• Write clear and meaningful class names.
• Keep related declarations together.
• Avoid unnecessary repeated rules.
• Use comments when a rule needs explanation.
• Check the browser developer tools when styles do not work.

Understanding CSS syntax makes it easier to learn selectors, colors, typography, layouts, and advanced styling techniques. Continue with our CSS Selectors tutorial to learn how to target HTML elements precisely.