CSS - Property

Definition

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:

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

Syntax

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'

Shorthand

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.

Example

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.

Management

Suppress

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

Computed / Calculated

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

Set

Via javascript

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

var element = document.querySelector('p');
element.style.color = "steelblue";
<p>A steelblue paragraph</p>
  • Output:

Documentation / Reference


Powered by ComboStrap