CSS Editor

   Learning CSS was a bridge too far for me. I appreciate its core principle, which is similar to the way that styles work in word processing programs: set the style in one place and it gets reflected everywhere in the document that you use that style. This keeps everything consistent and means that once you get your styles the way you want them, you’ll need to do almost no formatting in the document itself... you’re just selecting styles.


   But in a word processing document like Pages, you format text with familiar-looking tools like the Text Inspector shown here. Almost anyone can figure out how to use it because it’s quite intuitive. CSS, however, forces you to pop the hood and deal directly with the code.

   So for example, if you want to change the line height in Pages to 1.2 (or whatever) you just select the text you want to change and move the slider over to 1.2, or you can also key it into the box beside the slider. All the while, you see the text continuously reformatting itself on the screen according to what you’re doing with the slider or with the numbers in the box. Done. Nice and simple.

   With CSS, on the other hand, you have to first of all find the main.css document, which is likely somewhere not so obvious. In Sandvox, it’s located in User>Library>Application Support>Sandvox>OriginalGreen.svxDesign. (OriginalGreen.svxDesign is the name of the design I altered from the original Clean Sheets design; yours will be different.) main.css is hidden within the .svxDesign file. To get to it, control-click on the .svxDesign file and select “Show Package Contents.” It’ll open another window, where <congratulations!!> you’ve finally found the main.css file!

   But now the real fun begins. If you open it in a text editor, you’ll see that it’s filled with code that only a programmer could love. If you want to do the same thing we did in Pages a moment ago, you first of all have to know which part of the code you want to revise. For non-programmers, that’s a huge threshold that trips up almost all of us. But let’s say that we finally figure out that since we’re wanting to change the line spacing of the body text, we likely want to alter some part of this block of code:
body { /* changed for readability from 76%
 as recommended in CSS guide */
 background: #ffffff;
 color: #50504d;
 font: 14px Hoefler;

   You’re part of the way there. But now how do we alter the code to change the line spacing? You’d have to know that you want to alter the font: line. And you’d have to know to alter it this way:
 font: 14px/120% Hoefler; See what I mean about a bridge too far?

...but wait - there’s help!…

   Fortunately, I found a little inexpensive utility app named CSSEdit. It can’t help you find the main.css file, but once you’ve opened it in CSSEdit, it makes it very easy to find and change what you want to change. That’s because it uses a split screen, with the code gobbledygook on the left and dialog boxes like the Pages Text Inspector on the right. It’s actually a really good CSS teacher (if you want to learn it) because you can see what the code does when you make changes in the dialog boxes.
   Recently, CSSEdit has been absorbed into a bigger app called Espresso by MacRabbit, the same people who wrote CSSEdit.

Note: I haven’t used Espresso because CSSEdit works just fine for me.

© 2012 The Guild Foundation Press