A couple of CSS questions regarding robot-or-not.com code

  body {
    background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
    color: #45445d;
    color: rgba(0, 0, 0, 0.7);
    font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    }

This is a code snippet from robot-or-not.com ...featured in an article called ..Responsive Webdesign. I have two questions about the CSS in the article.

• If I want to use em's across a site I understand that I need a base font 开发者_如何转开发size and then work out the em by TARGET SIZE / BASE SIZE = EM. Do I need then to set the base font size in "PX" in the body first and in the code above what does font: 100%/1.5 mean?

• My second question is about the background property.. what does repeat "-20% -146px;" this mean/do? I know about repeat:no-repeat and repeat-y, repeat-x but have never used % or PX for this..

---

You don't need a "base size". The default size for fonts is configured by the user in his/her browser. This is what the browser then uses for 1em (or 100%).

You can define your own "base size" in the body (body { font-size: 12px }) and then go ahead and use ems (or %) for other font-sizes, such as h1 { font-size: 1.5em } instead of h1 { font-size: 18px } (12px * 1.5 = 18px). This has the "advantage" for you as the developer that if you choose to change your "base size", then all other font-sizes (or other em based values) will scale accordingly.

However by setting such a pixel-based base size, you override the users configured (and thus probably preferred) font-size with your (the designers) choice. Many designers do this, because they believe their pixel-perfect design must not be disturbed by the users preferences. Whether you need this or let the user choose is your decision.

100%/1.5 is part of the font shorthand property and is the abbreviation for setting font-size: 100% and line-height: 1.5.

background is also a short hand property and background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; extends to:

background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;

background-position: -20% -146px means that the top left corner of the background image isn't positioned at the top left corner of its element, but it is pushed 20% of the width of its element to the left and 146 pixels up.