CSS Syntax and Structure

« Prev Next »

What is CSS Syntax ?

CSS Syntax refers to the rules that define how styles are written to be applied to elements. The syntax includes selectors, properties, and values formatted in a specific way.

Syntax Structure

selector {
  property: value;
}

css-syntax

Components:

  • Selector: The HTML element(s) that the style will be applied to.
  • Property: The feature of the element you want to modify (e.g., color, font-size).
  • Value: The value that will be applied to the property (e.g., blue, 20px).

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #e0f7fa;
      font-family: 'Segoe UI', sans-serif;
    }
    h1 {
      color: #00796b;
    }
    p {
      font-size: 18px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS!</h1>
  <p>This is a basic example of how CSS styles an HTML page.</p>
</body>
</html>
Run ›

CSS Rule Structure

selector {
  property1: value1;
  property2: value2;
  ...
}

Types of CSS Selectors

Selector Type Syntax Example Description
Element Selector p {} Targets all <p> elements
Class Selector .className {} Targets elements with class="className"
ID Selector #idName {} Targets element with id="idName"
Group Selector h1, h2, h3 {} Targets multiple elements together
Universal * {} Targets all elements

CSS Declaration

  • A declaration consists of a property and a value, separated by a colon (:).
  • Multiple declarations are separated by semicolons (;).

Declaration Block

 p {
  color: green;
  font-size: 16px;
  line-height: 1.5;
}

Structure Example

 /* This is a comment in CSS */ 
.container {
  width: 80%;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
} 
h1 {
  color: #333;
  text-align: center;
} 
p {
  font-size: 18px;
  color: #666;
}
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.