This presentation will reveal the wonders of the W3C CSS property and value syntax. Along the way we will explore the mysterious double pipes, pound signs, double ampersands and more. You will come away a CSS syntax expert, able to understand any CSS property / value syntax no matter how complex... or your money back!
29. 1. Keyword values
These values appear without
quotes or angle brackets. They are
used “as is” as property values. As
they cannot be replaced or broken
down further, they are terminal.
30. /* Keyword value example */
<line-‐width> = <length> | thin | medium | thick
Keyword Value
31. 2. Basic data types
These basic data types define
core values such as <length> and
<color>. They are non-terminal as
they can be replaced with actual
length or color values.
32. /* Basic data type example */
<'background-‐color'> = <color>
Basic Data Type
33. For example, the “<color>”
symbol indicates that this value
can be replaced with a value
such as:
35. 3. Property data types
These types define the property
name. They are defined using the
property name (complete with
quotes) between the angle
brackets “< >”. They are non-
terminal.
36. /* Property data type example */
<'border-‐width'> = <line-‐width>{1,4}
Property Data Type
37. 4. Non-property data types
These types do not share the
same name as a property.
However, they help define aspects
of specific properties. They are
non-terminal.
38. For example, <line-‐width> is not
a property, but it is a data type that
helps to define the various
<border> properties.
39. /* Non-‐property data type example */
<line-‐width> = <length> | thin | medium | thick
Not a property
40. /* Non-‐property data type example */
<line-‐width> = <length> | thin | medium | thick
<'border-‐width'> = <line-‐width>{1,4}
Helps define a property
41. A recap of the four different
types of component values?
42. /* Four different types */
thin
<color>
<‘border-‐width'>
<line-‐width>
Keyword Value
Basic Data Type
Property Data Type
Non-property Data Type
56. /* All in given order */
<property> = value1 value2 value3
/* All in any order */
<property> = value1 && value2
/* One of them must occur */
<property> = value1 | value2
/* One or more in any order */
<property> = value1 || value2
/* A single grouping */
<property> = [ value1 | value2 ]
67. 5. A comma-separated 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.
68. /* Component multiplier -‐ at least A and at most B */
<property> = <value>{1,3}
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
69. 6. The “B” may be omitted “{A,}”
to indicate that there must be at
least “A” repetitions, with no
upper limit on the number of
repetitions.
70. /* Component multiplier -‐ at least A, no upper limit */
<property> = <value>{1,}
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc
71. 7. A hash “#” indicates that the
preceding type, word, or group
occurs one or more times,
separated by comma tokens.
(Whitespace is optional)
76. ?
*
+
{A}
{A,B}
{A,}
#
!
/* zero or one time */
/* zero or more times */
/* one or more times */
/* occurs A times */
/* at least A and at most B */
/* at least A, no upper limit */
/* one or more, separated by commas */
/* at lease one value from the group */
80. /* text-‐shadow */
<'text-‐shadow'> = none | [ <length>{2,3} && <color>? ]#
/*
| = One of them must occur
# = one or more, separated by commas
&& = All in any order */
? = zero or one time */
*/
.example { text-‐shadow: none OR one or more comma-‐separated
groups of 2-‐3 length values and optional color value in any
order; }
83. (Disclaimer: This idea is ripped off
from a great A List Apart article by
J. David Eisenberg.)
http://alistapart.com/article/readspec
84. How would you define the syntax
of a burger if you had to use a
specific set of ingredients in a
specific order?
85. Anyone want to volunteer? The
first person to get the correct
answer during the break will win a
copy of “Offscreen” magazine.
http://www.offscreenmag.com/
86. /* ingredients */
In the correct order from bottom to the top of the bun, the
ingredients are:
-‐ bottom bun
-‐ one of the following: mustard or mayonnaise
-‐ lettuce (optional)
-‐ tomato (optional)
-‐ one of the following meats: chicken or beef
-‐ one to three slices of the following cheese: swiss or cheddar
-‐ one of the following sauces: tomato or bbq
-‐ top bun