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:
- and inheritance.
CSS 2.1 has more than 90 properties 1)
Example
- In this rule, you have two css properties that will be applied to the paragraph element
p {
color : blue ; /* first property */
font-weight : bold /* second property */
}
- The paragraph element below will by styled accordingly
<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
- 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: