CSS Properties

CSS properties describe what part of an HTML element's appearance or layout you want to change. Properties can control text color, font size, backgrounds, borders, spacing, dimensions, and many other aspects of how elements are displayed.

How CSS Properties Work

A CSS declaration consists of a property followed by a colon (:), a value, and usually a semicolon (;). The property identifies what should be changed.

p {
  color: blue;
}

In this rule, color is the property. It controls the text color of the selected <p> elements.

Browser Result

This paragraph has blue text.

Properties and Values

A CSS property is paired with a value. The property tells the browser what you want to change, while the value tells the browser how that property should be displayed.

color: blue;

In this declaration, color is the property and blue is the value.

font-size: 20px;

Here, font-size is the property and 20px is the value. Different CSS properties accept different types of values.

Using Multiple Properties

A CSS rule can contain more than one property. Each property and value pair forms a declaration, and declarations are normally separated with semicolons.

p {
  color: blue;
  font-size: 18px;
  background-color: #f5f5f5;
}

Browser Result

This paragraph uses several CSS properties.

The declarations work together to control different parts of the paragraph's appearance.

Common CSS Properties

CSS includes many properties. Beginners will frequently encounter properties that control text, backgrounds, borders, spacing, and element dimensions.

Property	Description
`color`	Sets the text color.
`background-color`	Sets the background color.
`font-family`	Specifies the font or list of fonts used for text.
`font-size`	Sets the size of text.
`font-weight`	Controls the weight or boldness of text.
`border`	Sets one or more border properties around an element.
`margin`	Controls space outside an element's border.
`padding`	Controls space between an element's content and its border.
`width`	Controls an element's width.
`height`	Controls an element's height.

These are only a small selection of the available CSS properties, but they demonstrate the kinds of presentation that CSS can control.

CSS Property Names

Many CSS property names contain more than one word. A hyphen (-) is used between the words rather than a space.

background-color: lightblue;
font-size: 18px;
border-color: blue;

Property names should be written exactly as CSS defines them. For example, background-color is a valid property name, while background color is not.

Invalid and Unsupported Properties

If a browser does not recognize a CSS property, it normally ignores that declaration and continues processing the remaining CSS.

p {
  color: blue;
  made-up-property: 20px;
  font-size: 18px;
}

The invalid made-up-property declaration is ignored, while the valid color and font-size declarations can still be applied.

This behavior helps browsers continue displaying a page even when they encounter CSS they do not understand.

Summary

CSS properties identify what part of an element's appearance or layout should be changed. Each property is paired with a value to create a CSS declaration, such as color: blue;.

A CSS rule can contain multiple declarations, allowing several properties to be applied to the selected HTML elements at the same time. The next tutorial looks more closely at the values assigned to CSS properties.