One syntax concept that’s new to CSS3 is that of the axis (or axes when you

have more than one). You may know all about axes if you remember your

math lessons, but if you’re reading this section, I’ll assume you need a refresher.

CSS uses the Cartesian coordinate system, which consists of two lines, one

horizontal and one vertical, that cross each other at a right angle. Each of

these lines is an axis: The horizontal line is known as the x-axis, and the vertical

line is known as the y-axis. The point where the two lines meet is called the

origin.

For onscreen items, you measure the lengths of these axes in pixels. In

Figure 6-1, you can see the axes and origin are overlaid on a grid. Imagine

that each square corresponds to a single pixel. You’ll also notice positive (+)

and negative (–) labels at either end of each axis; these tell you that the dis-

tance away from the origin will be measured either positively or negatively in

this direction.

Now that you understand this concept, you can find the coordinates of

any point relative to the origin. The coordinates are a pair of values—one for

each axis—which indicate the distance from the origin. The origin has coor-

dinates (0, 0). For example, given the coordinates (4, 5) you would find the

point by moving 4 pixels along the x-axis, and 5 pixels along the y-axis. Likewise,

the coordinates (–3, –1) indicate a point 3 pixels in a negative direction

away from the origin along the x-axis and 1 pixel away from the origin in a

negative direction along the y-axis.

If this all sounds terribly complicated, don’t worry—you’ve been using the

Cartesian coordinate system already with properties like background-position;

you just didn’t realize it yet.

In CSS, all elements have a height and a width, each of which is a stated

number of pixels in length (even when using other length units such as em or

a percentage). The height and width together creates a pixel grid; for example,

an element that is 10px by 10px in size has a pixel grid of 100px. If you con-

sider that the origin of the element is at the top-left corner, then the two

positional values for properties like background-position correspond exactly to

the x and y coordinates.