What is CSS syntax and rules?

CSSmarkup~5 mins

CSS syntax and rules

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

CSS syntax and rules tell the browser how to style your webpage. They help you change colors, sizes, and layout in a clear way.

You want to change the color of text on your webpage.

You need to make a button bigger or smaller.

You want to add space between paragraphs.

You want to align images or text in a certain way.

You want to make your webpage look good on phones and computers.

Syntax

CSS

selector {
  property: value;
  property2: value2;
}

The selector chooses which HTML elements to style.

Each property sets a style, and the value tells how it looks.

Examples

This changes all paragraphs' text color to blue.

CSS

p {
  color: blue;
}

This sets the main heading size and space below it.

CSS

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

This styles elements with class 'button' to have a green background and padding.

CSS

.button {
  background-color: green;
  padding: 0.5rem 1rem;
}

This styles the element with id 'main' to arrange children in a row with space between.

CSS

#main {
  display: flex;
  gap: 1rem;
}

Sample Program

This webpage uses CSS syntax to style headings and paragraphs. The heading is blue and bigger. The paragraphs have readable text color and spacing. One paragraph has a yellow highlight background.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Syntax Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 2rem;
    }
    h1 {
      color: #2a7ae2;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    p {
      color: #333333;
      font-size: 1.125rem;
      line-height: 1.5;
    }
    .highlight {
      background-color: #fff3b0;
      padding: 0.5rem;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>This is a simple paragraph styled with CSS.</p>
  <p class="highlight">This paragraph has a highlighted background.</p>
</body>
</html>

OutputSuccess

Important Notes

Always end each property line with a semicolon (;).

Use meaningful selectors to target the right elements.

Indent properties inside braces for better readability.

Summary

CSS syntax uses selectors, braces, properties, and values to style HTML.

Each rule starts with a selector, followed by curly braces containing property-value pairs.

Proper syntax helps browsers show your webpage exactly how you want.