What Is CSS Value Property Syntax In Web-Designing?

CSS or Cascading Style Sheets is a style language that defines the layout of the HTML. CSS is used for describing the presentation of a documentation written in mark-up language such as HTML.

There is a standard syntax that defines all possible values that are used for CSS properties. One of the examples of this syntax is border-image-slice.

<‘border-image-slice’> = [<number> | <percentage>]{1,4} && fill?

Now to understand this, you need to know various symbols and understand the meaning and logic behind them. Web development companies in Lebanon provide further insight into this. Read on.

1. Backus-Naur Form

Backus Naur form (BNF) is the formal notation that is used to describe the syntax of computer language. The way it is designed in is the way of unambiguity to make sure there is no disagreement between different arguments.

These days, Backus Naur form has been extended and includes Extended Backus Naur Form (EBNF) and Augmented Backus Naur Form (ABNF)

For example, a BNF specification is written like

<symbol>  ::=  __expression__

The left always have a non-terminal symbol followed by a ∷ symbol. This means “may be replaced with”. The right “_expression_” is one or more sequences of symbols that are used to derive the meaning on the left. So, in a way it’s self-fulfilling. Or, to sum it up, BNF specification say “Whatever is on the left may be replaced with whatever is on the right”

Non-terminal and Terminal symbols

Symbols that can be broken down further or replaced are called Non-terminal symbols. Typically in BNF, non-terminal symbols are written between the angled brackets – ‘<’ and ‘>’. For example

<integer>  ::=  <digit> | <digit><integer>

Values that cannot be broken down further or replaced are denoted by Terminal symbols. For example, the digital values used here

<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

The CSS property Value syntax

Although the CSS property value syntax is based on the concept of BNF, it differs slightly. For example, where CSS property value syntax is similar to the BNF is that it begins with a non-terminal symbol, where it’s different is that it describes symbols used in expressions as “component values”. For example

<line-width>  =  <length> | thin | medium | thick

Here, <line-width> is a non-terminal symbol, <length>, thin, medium and thick are component values.

Component Values

There are four types of component values –

1. Basic data types

Basic data type values define core values such as <color> and <length>. Basic data type values are non-terminal which means they can be replaced with actual color or length values. For example,

<‘background-color’>  =  <color

2. Keyword Values

These appear without quotations or angled brackets. They are used in their orginal form such as property values. They are terminal. For example,

<line-width>  =  <length> | thin | medium | thick

3. Property data types

It is a non-terminal symbp; that is used to define the property’s actual name. for example

<‘border-width’>  =  <line-width>{1,4}

4. Non-property data types

It is a non-terminal symbol that does not share the same name as property. For example,

<line-width>  =  <length> | thin | medium | thick

<‘border-width’>  =  <line-width>{1,4}

For more info on this, contact web development companies in Lebanon.