Css - Declaration


Declaration are syntactic expressions that are contained in a declaration block to create a rule

A declaration:

Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups.


Thus, the following rules:

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

are equivalent to:

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

A property name is an identifier. Any token may occur in the value. Parentheses (“( )”), brackets (“[ ]”), braces (“{ }”), single quotes (') and double quotes (“) must come in matching pairs, and semicolons not in strings must be escaped. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string.


A user agent must ignore a declaration with an invalid property name or an invalid value. Every CSS 2.1 property has its own syntactic and semantic restrictions on the values it accepts.

For example, assume a CSS 2.1 parser encounters this style sheet:

h1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
p { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
    font-variant: small-caps }
em em { font-style: normal }

The second declaration on the first line has an invalid value '12pt'. The second declaration on the second line contains an undefined property 'font-vendor'. The CSS 2.1 parser will ignore these declarations, effectively reducing the style sheet to:

h1 { color: red; }
p { color: blue;  font-variant: small-caps }
em em { font-style: normal }

Discover More
CSS - Cascading (style rules priority scheme)

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - Pixel (Logical Pixel)

CSS pixels are logical pixels used in CSS declarations such as width: 300px or font-size: 14px. An element with width: 300px is always exactly 300 CSS pixels wide CSS pixels are not the actual pixel...
CSS - Selector

in the CSS context. When a user agent can't parse the selector (i.e., it is not valid CSS), it ignores the declaration block. The whole statement is ignored if there is an error anywhere in the selector....
Chrome Enable Source Map
CSS - Source Map

For each CSS file it produces, a CSS preprocessor generates: a source map file (.map) and the compiled CSS. The source map file is a JSON file that defines a mapping between: each (compiled|generated)...
Css - Declaration Block (in style sheet)

A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between, there must be a list of zero or more semicolon-separated (;) declarations. A declaration...
Css - Rule (Set|Declaration)

In a CSS stylesheet, your write several rules to define your presentation. A rule set (also called “rule”) consists of: a selector list followed by a declaration block. (one of several declarations)...
How to get the CSS computed style values of an HTML element

This article shows you a snippet on how to retrieve the computed style of an HTML element

Share this page:
Follow us:
Task Runner