CSS Syntax

CSS Syntax

 
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces

In this example all <p> elements will be center-aligned, with a red text color:

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

<!DOCTYPE html>

<html>

<head>

<style>

p {

  color: red;

  text-align: center;

</style>

</head>

<body>

 

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

 

</body>

</html>

 

Hello World!

These paragraphs are styled with CSS.

Example Explained

  • p is a selector in CSS (it points to the HTML element you want to style: <p>).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value
You will learn much more about CSS selectors and CSS properties in the next chapters.