CSS Properties and Values - Overview

A CSS rule consists of a selector, a CSS body, and one or more CSS declarations placed inside the rule's body. The general syntax for a CSS rule is:

selector_name {
    declaration_1;
    declaration_2;
    /* more declarations if needed */
}

For example, if we want to create a CSS rule that uses a CSS class as a selector, and sets the element's width and text color, we write:

.my-class {
    width: 100px;
    color: blue;
}

When we apply the above CSS rule to an HTML element, as in the following snippet:

<div class="my-class">This element has a width of 100 pixels and blue text.</div>

Our HTML element, in this case, the div element, will have a width of 100 pixels and blue text.

CSS declarations

The CSS declaration itself is made up of a CSS property and a value for that property. The general syntax for a CSS declaration is:

property_name: value;

The CSS declaration ends with a semicolon (;) symbol. There can be one or more CSS declarations in a single CSS rule. The general syntax is:

selector_name {
    property_name_1: value_1;
    property_name_2: value_2;
    property_name_3: value_3;
}

An actual example of a CSS rule that uses the margin, height, and color CSS properties can be:

.my-class {
    margin: 10px;
    height: 100px;
    color: blue;
}

CSS properties

A CSS property is a predefined name that targets a specific attribute tied to a specific display category. In a declaration, the property name is followed by a colon symbol (:) and a value for that property. Different properties target different attributes related to our elements' look and position. For example, the predefined property of color sets the element's text color:

color: blue;

When used in a CSS rule, the above color property might look like the following :

p {
    color: blue;
}

For example, the predefined CSS property margin, as its name suggests, sets the element's margin. The predefined CSS property height, sets the element's height, font sets the element's font family and font size, and so on.

Later in this course, we will explain the most widely used CSS properties, but for now, we just need to establish a basic overview of CSS properties and the different kinds of values they can hold.

Values

The second part of a CSS declaration is a value, which follows after the CSS property and a colon symbol. The general syntax is:

property_name: value;

There are different categories of values. For example, there are numeric values, color-related values, font-related values, position-related values, and others. Each CSS property has a set of allowable values.

Units

Values are often paired with units. For example, if we want to specify a value for the width CSS property, we can pair the numeric value with a px unit, which represents the length in pixels:

.my-class {
    width: 100px;
}

This CSS rule specifies that all HTML elements with the my-class class will have a width of 100 pixels. This unit specifies the so-called absolute value, which represents a fixed-size length.

There are also units that specify a relative value, like the percentage unit (%) which can be used to specify a value relative to the parent container's width:

.my-class {
    width: 50%;
}

The em unit is also a relative unit which can be used to specify the font size relative to the parent container's font size. For example, the 1.25em value sets the font size to that of a 1.25 * the parent's original font size:

.my-class {
    font-size: 1.25em; /* Sets the font size to (1.25 * parent's container font size) */
}

There are also named values with predefined names, referred to as identifiers or keywords. For example, a named keyword value for our color property can be red, blue, green, and similar:

.my-class {
    color: red; /* Uses a named identifier value to set the text to red */
}

Helper functions

Some values can also be obtained using helper functions. For example, the rgb() function returns a color value by accepting parameters for red, green, and blue, and returns the overall calculated color value:

.my-class {
    color: rgb(255, 0, 0); /* Uses a helper function to set the text to red */
}

Compound values

Some CSS properties can also accept multiple, space-separated values. For example, the border property can have compound values:

.my-class {
    border: 2px solid red;
}

String values

Finally, we will briefly mention that some CSS properties, such as the content property, can accept string values:

.my-class {
    content: "Sample string value";
}

Note: We will cover all these use cases when we explain CSS properties, one by one, later in this tutorial.