3.3. Adding CSS Files

By default, Bookdown does not come with any CSS files. The HTML output is functional, but not particularly stylish.

To add CSS files:

  1. Place .css files of your choosing somewhere the "target" directory.

  2. Modify the {$REPO}/_bookdown/templates/head.php file to add <link ... /> tags for the .css files. Note that these should be linked relative to the "target" directory, not the Bookdown origin files.

  3. Regenerate the HTML and browse the results.

Let's try an example.

First, create a css/ subdirectory in the "target" directory. By default, the "target" is the {$REPO} root.

cd {$REPO}
mkdir css

Next, copy the following stylesheet to the css/ subdirectory as style.css:

body {
    font-family: sans-serif;
}

Then edit the {$REPO}/_bookdown/templates/head.php override template file to add a link to the stylesheet.

The file will end up looking something like this:

<head>
    <title><?php echo $this->page->getTitle(); ?></title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>

(Note that the link HREF is in relation to the "target" directory.)

Finally, regenerate the HTML files and browse through them. You should see that the stylesheet is now being honored on every page.

N.b.: Because the css/style.css file is static and not generated by Bookdown, you can edit it and re-browse the pages, and see the style changes immediately.