CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document.

Properties are written in a css rule after the element selection definition.

Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of:

• specificity,
• cascading,
• and inheritance.

CSS 2.1 has more than 90 properties. See also: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Each property has:

• a name (e.g., 'color', 'font', or border')
• and a value (e.g., 'red', '12pt Times', or 'dotted').

Each CSS property definition begins with a summary of key information that resembles the following:

'property-name'

• Value: legal values & syntax
• Css - (Property) Value: Initial value
• Applies to: elements this property applies to
• Inherited: whether the property is inherited from an ancestor element.
• Percentages: how percentage values are interpreted. If “N/A” appears here, it means that the property does not accept percentages in its values.
• Media: which media groups the property applies to
• Computed value: how to compute the CSS - How to get the computed style values of an HTML element|Computed value]]

Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. When values are omitted from a shorthand form, each “missing” property is assigned its initial value.

For instance, the 'font' property is a shorthand property for setting:

• 'font-style',
• 'font-variant',
• 'font-weight',
• 'font-size',
• 'line-height',
• and 'font-family' all at once.

The multiple style rules of this example:

h1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: Helvetica; 
  font-variant: normal;
  font-style: normal;
}

may be rewritten with a single shorthand property:

h1 { font: bold 12pt/14pt Helvetica }

In this example, 'font-variant', and 'font-style' take their initial values.

To suppress a property, you have to set its value to initial or unset.

If you want to get via Javascript the computed value, see this article: CSS - How to get the computed style values of an HTML element

In Javascript, the property style of an element are available via the style property. The name of the property is camelCased.

Example: select the first paragraph and make it steelblue

• select the first p and set the color value to steelblue

var element = document.querySelector('p');
element.style.color = "steelblue";

• The html used with the paragraph

<p>A steelblue paragraph</p>

• Output:

• 1.4.2 CSS property definitions