CSS Data Types
One of Those Things You Have To Know
R. Scott Granneman
Jans Carton
© 2013 R. Scott Granneman
Last updated 2105-01-24
You are free to use this work, with certain restrictions.
1.3 For full licensing information, please see the last slide/page.
Notes & URLs for this presentation can be found…
» underneath the link to this slide on granneman.com
» at files.granneman.com/presentations/webdev/CSS-
Data-Types.txt
Basics
What’s a data type?
A way to classify various kinds of data that are allowed
as values for CSS properties
<angle> <length> <string>
<blend-mode> <number> <time>
<color> <percentage> <timing-function>
<frequency> <position> <uri>
<gradient> <ratio> <user-ident>
<image> <resolution>
<integer> <shape>
Images
<url>
<gradient>
<image>
<url>
Represents a pointer to a web resource
Covered later in Styling Shapes
<gradient>
Represents a CSS <image> made from a progressive
transition between two or more colors
Covered later in Styling Shapes
<image>
Represents a 2D image, either static (<url>) or
dynamically generated (<gradient>)
Covered later in Styling Shapes
Text
<string>
Represents a quoted string of Unicode characters
Covered earlier in CSS Selectors
Wide Usage
<integer>
<number>
<percentage>
<length>
<color>
<integer>
Represents a positive or negative integer number: 1 or
several decimal digits (0 to 9), optionally preceded by a
single + or −
No units after <integer>!
All <integer>s are <number>s, but not all <number>s
are <integer>s
Valid Invalid
7 7.0
+7 +-7 Only 1 + or -
-7 \37 Escaped Unicode
0 七 Non-Arabic
Seven
<integer> 3 1 1 1 Y Y
<number>
Represents a number, either <integer> or fractional
No units after <number>!
Valid Invalid
7 7.
7.7 +-7.7 Only 1 + or -
+7.7 7.7.7 Only 1 .
-7.7 7e+03 No e notation
0
0.77
<number> <5 1 1 1 Y Y
<percentage>
Represents a percentage: a <number> immediately
followed by %
<percentage> <5 1 1 1 Y Y
<length>
Represents distance measurements: a <number>
immediately followed by a unit
Units
» Absolute
» Font-relative
» Viewport-percentage
Pixel means
picture element
Pixels are not
just for computers!
The basic unit of an electronic display is a pixel
All length measurements eventually get counted in
pixels
For years, computer pixels were all 1/72 of an inch
Apple introduced the first high resolution devices that
have much smaller pixels (300+ in an inch!)
The size of pixels in modern high resolution devices
varies hugely
Thanks to these 2 changes, the size of a pixel in CSS had
to be redefined
For good old “standard resolution” displays, a pixel is
(still a device pixel, which is) 1/72 inch
For high resolution displays (& other high resolution
media like print) a CSS pixel is now about 1/96 inch
So now it may take several device pixels to equal 1 CSS
pixel
Absolute
px
mm
cm
in
pt
pc
in = 96px (about an inch)
cm = 37.8px (about a centimeter)
mm = 3.78px (about a millimeter)
pt = 1.33px (about a point, or 1/72 inch)
pc = 16px (about a pica, or 1/6 inch)
Font-Relative
em
ex
ch
rem
em
Represents the calculated font-size of an element
1 em is the height of a font
rem
Represents the font-size of the root element (<html>)
Great for creating perfectly scalable layouts
em 5.5 1 1 1 1 1
ex 5.5 1 1 1 1 1
ch 9 — 27 1 — ?
rem 9 4.1 4 3.6 2.1 4
<color>
Represents a color in the sRGB color space
Ways to describe colors
» keyword
» #hex
» rgb()
» rgba()
» hsl()
» hsla()
More info when we get to Fonts & Formatting
keywords 3 1 1 1 1 1
#RRGGBB
3 1 1 1 1 1
#RGB
rgb() 4 1 1 1 1 1
hsl() 9 3.1 1 1 2.3 5.1
rgba() 9 3.1 1 3 2.3 5.1
hsla() 9 3.1 1 3 2.3 5.1
transparent 9 3.1 1 3 ? ?
currentColor 9 4 1 1.5 ? ?
Media
Queries
<ratio>
<resolution>
<ratio>
Represents aspect ratios (proportions) in media
queries: a positive <integer>, followed by /, followed
by a positive <integer>
No units!
Examples
4/3: traditional TV
16/9: widescreen TV
185/100: traditional movies
239/100: widescreen movies
<ratio> 9 1 <4 3.5 Y Y
<resolution>
Represents the resolution of a device: its density of
pixels, expressed as a <number> immediately followed
by a unit of resolution
Units
» dpi: dots per inch
» dpcm: dots per centimeter
» dppx: dots per px unit
<resolution> 9 —* 29 3.5 —* —*
dppx ? — 29 16 — —*
* Requires the non-standard device-pixel-ratio query
Animation &
Transformation
<shape>
<time>
<timing-function>
<angle>
<shape>
Represents a rectangular region to which the clip
property is applied
Covered later in CSS Animation & Transformation
<time>
Represents time, which keeps on slipping into the
future
Covered later in CSS Animation & Transformation
<timing-function>
Represents speed of change over time during
animations & transitions
Covered later in CSS Animation & Transformation
<angle>
Represents angle values
Covered later in CSS Animation & Transformation
Future
<blend-mode>
<frequency>
<blend-mode>
Method for blending overlapping images or colors (as
in Photoshop or Illustrator)
Not yet supported
color hard-light overlay
color-burn hue saturation
color-dodge lighten screen
darken luminosity soft-light
difference multiply
exclusion normal
<blend-mode>
<frequency>
Represents a frequency dimension, like the pitch of a
speaking voice
<number> immediately followed by a unit
Units
» Hz: Hertz
» kHz: kilohertz
<frequency> — — — — — —
Thank you!
scott@granneman.com
www.granneman.com
ChainsawOnATireSwing.com
@scottgranneman
jans@websanity.com
websanity.com
CSS Data Types
One of Those Things You Just Have To Know
R. Scott Granneman
Jans Carton
© 2014 R. Scott Granneman
Last updated 2105-01-24
You are free to use this work, with certain restrictions.
1.3 For full licensing information, please see the last slide/page.
Changelog
2015-01-24 1.3: Added screenshots for em & rem
2014-10-20 1.2: Added <integer> to list
2014-08-06 1.1: Included browser support for
<color>
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
You are free to:
» Share — copy and redistribute the material in any medium or format
» Adapt — remix, transform, and build upon the material for any purpose, even commercially
Under the following terms:
Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were
made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you
or your use. Give credit to:
Scott Granneman • www.granneman.com • scott@granneman.com
Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions
under the same license as the original.
No additional restrictions. You may not apply legal terms or technological measures that legally restrict
others from doing anything the license permits.
Questions? Email scott@granneman.com
