A declaration is a statement which tells the parser exactly how to style an element. Where a selector tells what is being styled, a declaration tells how the selector is styled. You essentially declare what the selector will look like. This page will detail what composes a declaration and show how to use them.

Declaration Syntax

The purpose of the declaration is to tell the parser how to style the selector. You do this with the following syntax:

selector{
    declaration;
    declaration;
}

Notice the following:

• All of the declarations are encased in the curly braces. The declarations in the curly braces will apply to the selector.
• Each declaration is separated with a semicolon (;).
• The new lines and indentions are not needed, but they make the code more readable.

Each declaration has two parts: a property and a value. The property indicates what part of the selector will be styled, and the value is the style that goes with the property. When considering how each declaration is simply a property and its value, the full CSS syntax becomes the below:

selector{
    property: value;
    property: value;
}

Properties and values will be detailed below.

Properties

Calculator

A property of an element is a particular specific of its styling. In other words, a property could be thought of as a part of the element that has looks. For instance, let us say that we have a Texas Instruments calculator like the one displayed to the right. We'll call the entire calculator an element. We can then say that the properties of this calculator are the case, body, buttons, and screen. These things compose the calculator, and by altering them we can change the calculator's looks.

A property in CSS operates similarly. They are the things that compose an element that we can change. The [[div]] block below clearly shows its border, text color, width, and padding properties.

A property definition in CSS is followed by a value which is detailed below.

Values

A value is the actual styling that an element's property will take on. The value comes directly after its respective property, and depending on what the value is, the property of the selector indicated will take on that value.

For instance, we can have a [[div]] block with a background-color property. We want the background's color to be magenta, so all we need to do is assign the background-color property with the magenta value for the appropriate selector.

The [[div]] block below has the class "pretty" which has been assigned the above property and value.

What CSS code would you use to accomplish the above?

.pretty{
    background-color: magenta;
}

In Practice