CSS Syntax

By /

In this chapter, you will learn the basic structure of CSS code. Every CSS rule follows a simple pattern, so once you understand this, writing CSS will become much easier. Let’s start by understanding the basic CSS syntax.

What is CSS Syntax?

CSS syntax tells us how to write a CSS rule. A basic CSS rule looks like this:

selector {
  property: value;
}

Let’s understand each part.

Selector

The selector chooses the HTML element you want to style.

For example:

p {
}

Here, p is the selector. It selects all <p> elements.

Property

The property tells CSS what you want to change.

For example:

p {
  color: blue;
}

Here, color is the property.

Value

The value tells CSS what style you want to apply.

p {
  color: blue;
}

Here, blue is the value.

So:

  • p → Selector
  • color → Property
  • blue → Value

Your First CSS RuleLet’s understand this by example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Syntax</title>

  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

<body>

  <h1>Learning CSS</h1>

</body>
</html>

How Does It Work?

The CSS code is:

h1 {
  color: blue;
}
  • h1 selects the heading.
  • color changes the text color.
  • blue makes the heading blue.

Adding Multiple Properties

You can add more than one property inside a CSS rule.

For example:

h1 {
  color: blue;
  font-size: 40px;
  text-align: center;
}

Each property should end with a semicolon (;).

Now let’s use it in a complete HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>Multiple CSS Properties</title>

  <style>
    h1 {
      color: blue;
      font-size: 40px;
      text-align: center;
    }
  </style>
</head>

<body>

  <h1>Learning CSS is Fun!</h1>

</body>
</html>

Result

The heading will:

  • Appear in blue color.
  • Have a font size of 40px.
  • Be aligned in the center.

CSS Syntax Rules

Keep these simple rules in mind:

  • A CSS rule starts with a selector.
  • Properties and values are written inside curly braces { }.
  • A property and value are separated by a colon :.
  • Each CSS declaration should end with a semicolon ;.
  • You can add multiple properties inside one CSS rule.

Quick Recap

  • CSS uses the format selector { property: value; }.
  • The selector chooses the HTML element.
  • The property decides what to change.
  • The value decides how it should look.
  • Multiple properties can be added inside one CSS rule.

Frequently Asked Questions (FAQs)

Q1. What is CSS syntax?

CSS syntax is the basic structure used to write CSS rules. A CSS rule includes a selector, one or more properties, and their values.

Q2. What are the main parts of CSS syntax?

The main parts of CSS syntax are the selector, property, and value. The selector chooses an HTML element, the property defines what to change, and the value defines the style to apply.

Q3. What is a CSS selector and CSS Property?

A CSS selector is used to select the HTML element or elements that you want to style using CSS. On the other hand, a CSS property defines the part of an HTML element that you want to change, such as its color, font size, or alignment.

Q4. Why are semicolons used in CSS?

Semicolons are used to end CSS declarations. They help separate multiple properties written inside the same CSS rule.

Q5. Can a CSS rule contain multiple properties?

Yes. A CSS rule can contain multiple properties, allowing you to apply different styles to the same HTML element at the same time.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top