0
  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..

TylerH
  • 20,799
  • 66
  • 75
  • 101
Iamsamstimpson
  • 1,359
  • 2
  • 17
  • 32
  • For `font: 100%/1.5`, see http://stackoverflow.com/questions/4080265/what-does-this-css-do/4080268#4080268 – BoltClock Mar 28 '11 at 10:33
  • thanks for the link.. I'm more interested in what size is 100%? an 1.5em? of what? good link though, I'm not so good at the short hand.. – Iamsamstimpson Mar 28 '11 at 10:39
  • 1
    The percentage relates to the default font size specified in your web client I believe: it's not an absolute (for example, many browsers typically set your default font size to 16px). – Ben Mar 28 '11 at 11:03

1 Answers1

2

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.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • Even though this was a great answer reading css from apple.com still bugs me.. [link](http://images.apple.com/global/styles/base.css) The body base size is 12px/18px line-height.. yet when I read the Heading tags - H3 is set as EM and the rest as PX... why not just make them all ems? there must be a reason for this choice.. – Iamsamstimpson Mar 28 '11 at 11:46
  • @smoop: The simplest answer is: The developer simply didn't care or several developers worked on it with different views on the matter. – RoToRa Mar 28 '11 at 12:29