A Quick Guide to the CSS Value Definition Syntax

The CSS specifications, created by the World Wide Web Consortium (W3C), define the syntax and possible values of all CSS properties. To make definitions as precise as possible, the W3C uses a formal system called CSS value definition syntax.

Although the definition syntax defines possible values very precisely, reading the syntax that CSS value definitions are written in can be difficult without a key. In reality, however, reading such syntax is quite simple. For example, here's the syntax for the value of the margin shortcut property:

[ <length> | <percentage> | auto ]{1,4}

And here are valid uses of the margin property:

margin: 0px;
margin: 1px 10%;
margin: 1px 0px auto;
margin: 1px 0px 1px 0px;

Even if you didn't know what the margin property or each of these examples does, you could figure out how to read the syntax definition just by looking at the definition and then examining the examples.

Here’s a quick guide to reading CSS value definition syntax:

  • When a keyword appears without quotes, it indicates that the word should be used as it is, such as in the case of the auto keyword in the above example.

  • Basic CSS data types appear between < and >. For example, <time>, <color>, and <uri> are basic types that are defined elsewhere. When you see one of these types, you know that any valid value in that data type may be used.

  • When you see two ampersands together (&&), it means that the values separated by this symbol are both mandatory, but, they may appear in any order.

  • Brackets ([]) group values together into one.

  • Values separated by || are optional. However, one of them must appear, and they may appear in any order.

  • The | character means that the options are exclusive — exactly one of them must appear.

  • The asterisk (*) indicates that a value may appear zero, once, or several times.

  • The plus symbol (+) means that a value may appear once or several times.

  • The question mark (?) indicates that a value is optional. If it appears, it may only appear once.

  • When you see <length>, it means that a fixed length value such as 10px is allowed.

  • When you see <percentage>, it means that a percentage value such as 10 percent is allowed.

  • When you see numbers in brackets such as {1,4}, it indicates that the property must appear the number of times specified by the first number. However, it can appear as many times as indicated by the second number. In the case of {1, 4}, the property must appear once but may appear as many as four times.

  • The # symbol indicates that a value may be repeated once or several times. Each value must be separated by a comma.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com