Yesterday I told you about BookMaker and the publishing model I built on Google Docs heading styles. Maybe my account made it all feel a little grandiose (and I haven’t even gotten started telling you about my long-term plans), but really what I described is the whole point of templates and standard styles: generalization. If you’re doing it right, you’re making something that’s easy to repeat, and to share.
Last week I told you how to use the standard HTML heading styles in WordPress, and if you were paying attention you probably noticed in yesterday’s story that I used the same heading hierarchy I recommended for your blog posts in my new BookMaker best practices.
The problem with that advice is that it might not make your chapter headings look right when you log into Docs to work on your book. And looking right is what styles are for…right?
Right. But to make them really work, you have to learn how to modify styles — not format text on the page, but modify the standalone style descriptions. I’m going to show you how I did that for the Consortium Novel Template, and in the process I’ll teach you how to program CSS.
Programming CSS
Okay, the easiest way to customize styles in any authoring software I’ve ever used is to start with a new document you don’t care too much about messing up, and paste in a bunch of text that you know what it should look like. In this case, since I’m working on a novel, it’s pretty straightforward. The only really important pieces are the top 3 heading styles (down to chapter headings), and the body text.
So I started with a blank document in Google Docs and pasted in the unformatted text of one of my works-in-progress, The Girl Who Stayed the Same.
Paste some unformatted text into a new document
Then, of course, you’ve got to apply your styles. For reasons of SEO that I talked about last week, and reasons of portability that I’ll talk about tomorrow, I strongly recommend using (and customizing) the default styles, rather than just designing your own headings.
So the next step is to go through the document and apply all those styles and see what it looks like.
Apply default styles to the text and see how it looks
That’s already better, but that’s the “not right” I was talking about earlier. The H1 is way too big, and they’d probably both look a lot better centered.
That’s a matter of personal preference, of course, but that’s sort of my point. Your personal preference might not match mine, but it also might not match the one the IEEE picked for H1 (or would that be somebody like Mozilla or Microsoft?). Well…it doesn’t matter. CSS exists to let us fix that.
So the next step is to get started making changes. Open up the complicated CSS built-in integrated development environment by going to the menu and choosing Edit | Edit CSS. Try not to be intimidated by the dialog box that appears.
The "Edit CSS" dialog is just a big empty box. Helpful!
Well okay, maybe that wasn’t so bad after all. It’s just a blank page. It doesn’t really give you any hints where to get started, though, and that’s a little frustrating on its own. Luckily, I can help.
Programming CSS is as simple as providing the name of a style, then opening some curly brackets ( { and } ), and then using pre-defined attributes and values to tell the web browser how to draw each of those styles when they show up.
Does that sound complicated? It’s really not too bad, especially for what we’re doing. To get started, provide all the names of the styles you know you want to customize (including “p” for normal body text), and follow each one with a pair of curly brackets. It’s normal to add some empty lines between the brackets to fill in later, since CSS ignores the line breaks.
These are the default heading styles, waiting to be formatted
Then it’s just a matter of deciding what you want your named styles to look like. Do you want all your headers to be bold? Then add a line that says, “font-weight: bold;” between the brackets for each of the heading styles. Do you want them to be centered? Add “text-align: center;” too. And if you want some whitespace between those densely-packed paragraphs, just put “margin-bottom: 1em;” in the p brackets.
Bold and center your headings, and add some whitespace between paragraphs
I can hear you now. “Hey, wow, it’s magic, but how do you expect me to memorize all those keywords?” (Actually, no, my readers are smarter than that. I was imagining Keanu Reeves there.)
But of course you don’t need to memorize anything. The ultimate guide to CSS programming (along with every other kind of programming, and nearly everything in the universe) is a simple mouseclick away. Just go here, and you’ll become an instant master.
It really is as easy as that. You could easily find all the style methods I listed above with a bunch of quick searches based on what you’re trying to do:
That’s actually one I wanted for my template, because I know some writers would prefer to be able to work with the old-fashioned familiar. Turns out, it’s as easy as any of the rest. One line between your p brackets:
text-indent: 1.5em;
It might also help to add “font-family: Times;” if you’re going for the genuine Microsoft Word look-and-feel. That’s easy enough to do, though, and just like that you’ve got a book.
And now it looks a lot more familiar.
Becoming a Publisher
Really, that should be enough to help you make Google Docs feel more like home while you’re learning to use the Heading styles, but it offers big benefits I’ve barely even touched on yet. Come back tomorrow and I’ll tell you how to take advantage of all this set-up work to export your Google Docs beautifully.
