CSS Tutorial

CSS Introduction
CSS Syntax

CSS Syntax – Styling Web Pages with Precision at HQLEduTech

To build well-designed web pages, understanding the syntax of CSS is essential. At HQLEduTech, we simplify the technical concepts so you can confidently apply styles to your HTML content using CSS.

What is CSS Syntax?

A CSS rule is made up of two main parts:

  1. Selector – Identifies the HTML element(s) to be styled.
  2. Declaration Block – Defines what styles should be applied.

Each declaration within the block includes:

  • A CSS property (such as color, font-size, margin)
  • A value for that property (such as blue, 16px, center)

The declarations are separated by semicolons, and the entire block is wrapped in curly braces {}.

CSS Rule Structure

selector {
  property: value;
  property: value;
}

Example

Here’s a simple CSS rule that centers all paragraph text and changes its color to red:

p {
  color: red;
  text-align: center;
}

Explanation:

  • p: This is the selector. It targets all <p> (paragraph) elements in the HTML document.
  • color: red;: This declaration sets the text color to red.
  • text-align: center;: This declaration centers the text horizontally.

More Examples for Practice

Example 1: Styling Headings

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

This rule changes all <h1> headings to have a font size of 32 pixels and a navy color.

Example 2: Styling Multiple Properties

div {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 20px;
}

This rule applies multiple styles to all <div> elements: light background, border, and internal spacing.

Selectors in CSS

Selectors are powerful and allow you to target elements in various ways. Here are a few you’ll explore in upcoming lessons:

  • p – targets all paragraphs
  • .classname – targets all elements with a specific class
  • #idname – targets an element with a specific ID
  • div p – targets all <p> inside <div>

At HQLEduTech, we guide you step-by-step through basic to advanced selectors to help you build efficient and professional stylesheets.

Quick Rules Recap

  • Every CSS rule starts with a selector.
  • Declarations go inside curly braces {}.
  • Each declaration has a property and a value, separated by a colon :.
  • Declarations end with a semicolon ;.
  • You can include multiple declarations in one block.

Why CSS Syntax Matters

Understanding the correct structure of CSS rules is foundational for writing error-free and clean code. Whether you’re building simple static pages or complex responsive layouts, CSS syntax is the backbone of consistent and scalable design.

Chapter Summary

  • A CSS rule = Selector + Declaration Block
  • The selector defines which element(s) will be styled.
  • A declaration includes a property and a value, separated by a colon.
  • Multiple declarations are separated with semicolons.
  • Always enclose declaration blocks with curly braces.

With this knowledge, you’re ready to explore the powerful world of CSS selectors and properties. At HQLEduTech, we ensure you don’t just memorize syntax—you master it through hands-on practice and real-world projects.

Scroll to Top