Css - (Property) Value

About

A property value can have one or more components (value). Component values are specified in terms of tokens.

Common value computations

CSS-wide common keywords

initial

The initial keyword represents the value specified as the property’s initial value.

inherit

The inherit keyword represents the computed value of the property on the element’s parent.

unset

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

Type

Value types are designated in several ways:

  • (keyword|discrete) values (e.g., auto, disc, etc.)
  • basic data types, which appear between “<” and “>” (e.g., <length>, <percentage>, etc.).
  • types that have the same range of values as a property bearing the same name (e.g., <'border-width'> <'background-attachment'>, etc.).
  • non-terminals that do not share the same name as a property. In this case, the non-terminal name appears between “<” and “>”, as in <border-width>. Notice the distinction between <border-width> and <'border-width'>; the latter is defined in terms of the former.

Operator

Component values may be arranged into property values as follows:

  • Several juxtaposed words mean that all of them must occur, in the given order.
  • A bar (|) separates two or more alternatives: exactly one of them must occur.
  • A double bar (||) separates two or more options: one or more of them must occur, in any order.
  • A double ampersand (&&) separates two or more components, all of which must occur, in any order.
  • Brackets ([ ]) are for grouping.

Spaces may appear between tokens in property values.

Juxtaposition is stronger than the double ampersand, the double ampersand is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent:

    a b   |   c ||   d &&   e f
  [ a b ] | [ c || [ d && [ e f ]]]

Modifier

Every type, keyword, or bracketed group may be followed by one of the following modifiers:

  • An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
  • A plus (+) indicates that the preceding type, word, or group occurs one or more times.
  • A question mark (?) indicates that the preceding type, word, or group is optional.
  • A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word, or group occurs at least A and at most B times.

Example

The following examples illustrate different value types:

    Value: N | NW | NE
    Value: [ <length> | thick | thin ]{1,4}
    Value: [<family-name> , ]* <family-name>
    Value: <uri>? <color> [ / <color> ]?
    Value: <uri> || <color>
    Value: inset? && [ <length>{2,4} && <color>? ] 

Documentation / Reference





Discover More
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 - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Overflow

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box. The overflow property...
CSS - Percentage Value

The format of a percentage value is a number followed by the character %. Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines...
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...
CSS - Transitions

in CSS. Transition properties create smooth transitions (using timing functions) between different values property of two different element state. The transition short property is where: transition-durationtransition-duration:...
Css - Declaration

Declaration are syntactic expressions that are contained in a declaration block to create a rule A declaration: is either empty or has two parts (separated by a colon (:) and optionally surrounded...
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