Moving Out: Making Your Cascading Style Sheet External

Everything we’ve done so far has used an internal cascading style sheet (CSS). Now we’ll move it outside our .html files.

Remember: an .html file is a document full of code such as HTML, CSS, and JavaScript. A .css file is a page full of CSS code. An .html file can have HTML and CSS code inside it, but a .css file should have only CSS code. Bicycle Comics doesn’t use JavaScript in most of our E-books, so for these tutorials, we’ve been working with one big .html file that has both HTML and CSS inside it. With this tutorial, we’re moving 99% of our CSS into an external .css file .

External CSSThere are dozens, maybe hundreds, of tutorials that do a fine job explaining how you can move an internal cascading style sheet to an external .css file. I’ll give you just the basics, and then I’ll spend a little more time on the why, as pertains to E-book production.

In the previous post, we streamlined the CSS so that it is smaller and more elegant. Let’s pick up right there with the file “YBR_7_StreamlinedCSS.html .” (You can download all source code files for YBR for free.)

In short, we’re going to do three things:

  1. Remove the complete CSS info from our .html file with the “cut” command.
  2. “Paste” that CSS info into a separate, new document, which we’ll save as a .css file.
  3. Tell our .html file where the .css file is, so that our HTML can find our CSS whenever it needs it.

1. Remove the complete CSS info from our .html file with the “cut” command.

This is pretty easy. Looking at your code view in Dreamweaver or your HTML editor of choice, highlight from <style> all the way down to </style>, grabbing those tags and everything in-between. In this case, that takes us from Line 7 down to Line 181:
screenshot of code view of internal stylesheet

<style>
<!--
h1, h2, h3, h4, h5, h6 {

 …and so on…  

.Section {
page-break-before: always;
}

-->
</style>

Go Edit -> Cut to cut all that CSS information to your computer’s clipboard.

Note: I’m showing you the cut & paste method because it works for many different HTML editors. But if you actually have Dreamweaver, you can export internal cascading style sheets using the CSS Styles panel.

2. Paste that CSS info into a separate, new document, which we’ll save as a .css file.

In Dreamweaver, I go to File -> New Document and select “CSS,” but you can do this with something as simple as TextEdit or WordPad. Open up a blank page and paste all that stuff in. However, you should remove the <style> and </style> tags. They aren’t necessary. Start off your CSS with this tiny bit of info instead:

@charset "UTF-8";
/* CSS Document */

I’ve also added some language about the Creative Commons free licensing for these style sheets:

/* CSS for poetry by Yellow Buick Review. 2014 Bicycle Comics Productions. This document and associated .html and .css files are licensed under a Creative Commons Attribution 4.0 International License. Based on a work at https://yellowbuickreview.wordpress.com . CSS classes are organized alphabetically where possible. */

And then get right to the CSS you’ve pasted in. Remember to remove that </style> tag down at the bottom of the document, too. Here’s how the .css file looks for Yellow Buick Review :

screenshot of external css when pasted

When you save this file, name it whatever you like, but make sure you end the filename with “.css” so your computer (and everyone’s computer) knows it’s a cascading style sheet. Importantly, save your .css files in the same folder (directory) as your .html file, or there will be trouble.

From this point on, it’s entirely possible—heck, it’s likely—that my changes and updates to “YBReview_X.html” will happen at a different pace than my changes and updates to “YBReview_X.css .” I don’t want to confuse myself, my future self, or my coworkers with lots of different version numbers, so I name my .css files after fruits, in alphabetical order: “apricot, banana, cranberry,” etc. Right now, I’m using “YBReview_8_ExternalCSS.html” with “YBReview_Apricot.css .”

3. Tell our .html file where our .css file is, so that our HTML can find our CSS whenever it needs it.

Back over on my .html file, there’s a gap where the cascading style sheet information used to be. I have to indicate where that styling information went. So I’ll type this in on line 6, right above the title:

<link href=”YBReview_Apricot.css” rel=”stylesheet” type=”text/css”>

That’s saying “To whom it may concern, there is a stylesheet for making the following text look good over at the document named ‘YBReview_Apricot.css,” and you can find it in the same place you found this .html file.”

I’ll save this file as “YBReview_8_ExternalCSS.html” for now.

Okay, so that’s the how. Now let’s talk about the why.

If things looked okay before, why make the CSS external at all? It will pay dividends in future books, and it will help you pinpoint problems you may encounter later. Yellow Buick Review is a short-term project, but the real cascading style sheets we use for Bicycle Comics’ poetry books don’t change too much from one project to another. Mostly, we change the typefaces to suit each book. We feel pretty solid about the number of levels of indent, putting 1em of space between stanzas, all that stuff. So when we start a new anthology, we can just duplicate the trusty old Bicycle Comics .css file and get most of our formatting done quickly. Then, if/when we want to make any changes to the look and feel of the new book, we can tweak the CSS for that book.

HTML is a decades-old standard, but the HTML5 specification is still being ironed out, and the EPUB and device specifications are changing all the time. So it’s in our interest to keep things modular. if Amazon unveils a new Kindle format, if Apple rolls out a new iBooks standard, or if millions of people start reading E-books on their Android smart watches, those changes are unlikely to change the poety in our anthologies. But they could well change the styling requirements. From a business/manpower perspective, it’s comforting to know we could change the CSS for our titles and roll out updated, standards-compliant E-books in a matter of days or even hours.

Finally, not everybody and everything is as open-source as the Yellow Buick Review. If you keep your CSS styles and your HTML poetry in one .html file, you might not be as eager to ask for help from others. You might not be as willing to share best practices if doing so would undercut the sale/exclusivity of your E-book titles. But now that our CSS is on its own, you can apply it to anything, including a nonsense Lorem Ipsum poetry anthology. Clever, no?

In the next few posts, we’ll discuss the path ahead, validate our code files, and slice our big .html file into smaller sections, each section linked to our common .css file.

Updated March 3, 2015 with new artwork and a few text changes.

4 Comments

Filed under Code Samples, Look and Feel

4 responses to “Moving Out: Making Your Cascading Style Sheet External

  1. Pingback: After Step 3 Comes…Step 3? | The Yellow Buick Review

  2. Pingback: Famous Last Word Post | The Yellow Buick Review

  3. Pingback: Before You Break Up, Make a List of Your Stuff | The Yellow Buick Review

  4. Pingback: Let’s Split Up but Stay Friends | The Yellow Buick Review

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s