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 1)

Example

p { 
   color : blue ; /* first property */
   font-weight : bold  /* second property */
} 
<p>A bold blue paragraph</p>
  • Output:

Syntax

Each property has:

  • a name (e.g., 'color', 'font', or border')
  • any white space
  • followed by a :
  • any white space
  • a value (e.g., 'red', '12pt Times', or 'dotted')
  • any white space
  • a optional comma separator ; (if followed by another property or comment
property-name: value

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 Computed value

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.

Get Computed / Calculated

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

<h1>Article Title</h1>
let title = document.querySelector('h1');
let display = window.getComputedStyle(title).getPropertyValue('display');
console.log('The display of the heading h1 is :'+display);

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





Discover More
Css Padding
CSS - Padding

The padding area is the space between the content of the box and its border. In the below image, this are the areas: TP (top padding) BP (bottom padding) LP (left padding) RB (right padding)...
CSS - (Browser) Vendor (Property) Prefix

Browser vendors can add prefixes to experimental or nonstandard CSS properties. Typically the vendors use these prefixes: -webkit- (Chrome, newer versions of Opera.) -moz- (Firefox) -o- (Old...
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
CSS - Addessing model (through selector and properties)

CSS CSS addressing model. Selectors and properties allow style sheets to refer to the following parts of a document or user agent: Elements in the document tree and certain relationships between...
Anonymous Block Box
CSS - Anonymous Block Box

Because a container box can only contains boxes, a anonymous text (ie a text that is not enclosed in an element) will be contained in an anonymous box. If a container box (inline or block) has a block-level...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
CSS - Block Box - Columns Property

The content of block level box may be laid out in column with the column-count property. Column count will create three columns for the content of a block box.
Boxdim
CSS - Box Shadow

shadow on a box is created via the box-shadow property that attaches one or more drop-shadows to the box. A div element to create a box with a shadow The css applied to the class shadowedBorderBox...
Boxdim
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
Boxdim
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...



Share this page:
Follow us:
Task Runner