The CSS Series - Part 4: Properties

Introduction

This tutorial provides the definition of the CSS property and provides various examples and resources to find out more.

Prerequisites

A basic understanding of HTML

Understanding CSS Properties

CSS properties define a design or functionality aspect that will apply to the HTML element defined by a CSS selector. Every CSS property has a list of predefined CSS property values that apply to it. In the following CSS syntax, the selector is used to define an HTML element to which the { property: property value } pair, or declaration, applies.

selector {
  property: property value;
}

In the below example, we have placed div in the selector position, meaning the { property: property value } pairs, or declarations, that follow apply to all div elements within the linked HTML file. The CSS property here is "background," and its property value of "red" will change the background to the color red.

div {
 background: red
}

In the above example, we've assigned a background color of red to all div elements within the linked HTML file.

Harnessing the Power of CSS Properties

CSS properties can change almost every design aspect you can imagine. You are only limited by your knowledge of what's possible, so it is important to familiarize yourself with the CSS properties available for your use.

Some of the ways CSS properties allow you to change the HTML design:

• Coloration
• Shape and size
• Font manipulation
• Orientation (left, centered, right, custom)
• Movement
• Spacing between HTML elements
• Opacity
• And countless other ways.

Exploring CSS Properties

The following link leads to a list of CSS properties with brief descriptions. It's important to familiarize yourself with this list so you know what's available to you.

Conclusion

You just learned about CSS Properties and gained some familiarity with the ways in which they can change HTML elements. Continue to the next tutorial to learn about the CSS Box Model.