Answers.Body: <p>It can be accomplished with the <code>page-break-after</code> (<a href="http://www.w3schools.com/cssref/pr_print_pageba.asp" rel="nofollow noreferrer">link</a>) or <code>page-break-before</code> (<a href="http://www.w3schools.com/cssref/pr_print_pagebb.asp" rel="nofollow noreferrer">link</a>) CSS properties. Pretty obviously, these create a page break after or before the element that they are applied on.</p>
  
  <hr>
  
  <p>Here are a couple of examples of their use:</p>
  
  <p><strong>page-break-after</strong></p>
  
  <p><em>CSS style</em></p>
  
  <pre><code>.newpage {
      page-break-after:always;
  }
  </code></pre>
  
  <p><em>HTML code</em></p>
  
  <pre><code>&lt;p class="newpage"&gt;This text is on a page. The text will be split after this paragraph.&lt;/p&gt;
  
  &lt;p&gt;This text is on the following page, after the split.&lt;/p&gt;
  </code></pre>
  
  <p><strong>page-break-before</strong></p>
  
  <p><em>CSS style</em></p>
  
  <pre><code>.newpage {
      page-break-before;
  }
  </code></pre>
  
  <p><em>HTML code</em></p>
  
  <pre><code>&lt;p&gt;This text is on a page. The text will be split after this paragraph.&lt;/p&gt;
  
  &lt;p class="newpage"&gt;This text is on the following page, after the split.&lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <p>As you can see, they accomplish the same thing with a small difference (where you should put the property itself); depending on the situation, one could be more appropriate than the other.</p>
  
  <p>I tested it with Calibre internal reader and on a Kobo Glo device, and it works in both of them.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-27T18:41:25.817Z
Answers.Text: I changed page-break-after to page-break-before and it does exactly what I wanted. ;)
Answers.UserDisplayName: WordBear
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-27T19:05:43.167Z
Answers.Text: On second glance, I see that your solution is fine as is; I guess there are two different ways of accomplishing the same thing.
Answers.UserDisplayName: WordBear
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-27T19:43:43.000Z
Answers.Text: Yes, they both do the same thing, the only difference is where you should put the styling. Anyway, I've expanded my answer to include also a page-break-before example.
Answers.UserDisplayName: Sekhemty
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-27T22:04:31.303Z
Answers.Text: Another tip: I just learned about a second rule "for future devices." I don't know any details, but here it is: new-page {
      page-break-before: always;
      break-before: always; /* for future devices */
  }
Answers.UserDisplayName: WordBear
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-27T18:27:44.893Z
Answers.LastActivityDate: 2017-01-27T19:42:17.713Z
Answers.LastEditDate: 2017-01-27T19:42:17.713Z
Answers.UserDisplayName: Sekhemty
Body: <p>I'm learning to create epubs with InDesign. If you want a particular element inside a chapter (e.g. a subheading) to appear at the top of the next page, you can assign it a CSS style that has been designated for that purpose.</p>
  
  <p>However, the CSS is really just a gimmick; the file is literally split, with the text you want to appear at the top of the next page beginning the new file.</p>
  
  <p>I have separate files for each of my chapters. But imagine a chapter that has several subheadings that are supposed to appear at the top of different pages. I don't want to create a separate file for each subheading.</p>
  
  <p>So is there a CSS style that will remove an element from the normal flow and force it to appear at the top of the next page, so I don't have to literally split my file into separate files?</p>
  
Tags: <epub><creation><css><editing><indesign>
Title: Can I split chapters with CSS?
UserDisplayName: WordBear
ThreadText: # Can I split chapters with CSS?
  
  (Asked by: username_0 on 2017-01-27)
  
  I'm learning to create epubs with InDesign. If you want a particular element inside a chapter (e.g. a subheading) to appear at the top of the next page, you can assign it a CSS style that has been designated for that purpose.
  
  However, the CSS is really just a gimmick; the file is literally split, with the text you want to appear at the top of the next page beginning the new file.
  
  I have separate files for each of my chapters. But imagine a chapter that has several subheadings that are supposed to appear at the top of different pages. I don't want to create a separate file for each subheading.
  
  So is there a CSS style that will remove an element from the normal flow and force it to appear at the top of the next page, so I don't have to literally split my file into separate files?
  
  **Tags:** epub, creation, css, editing, indesign
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-01-27. Score: 3 | Accepted answer
  
  It can be accomplished with the page-break-after (link) or page-break-before (link) CSS properties. Pretty obviously, these create a page break after or before the element that they are applied on.
  
  Here are a couple of examples of their use:
  page-break-after
  CSS style
  .newpage {
      page-break-after:always;
  }
  
  HTML code
  This text is on a page. The text will be split after this paragraph.
  
  This text is on the following page, after the split.
  
  page-break-before
  CSS style
  .newpage {
      page-break-before;
  }
  
  HTML code
  This text is on a page. The text will be split after this paragraph.
  
  This text is on the following page, after the split.
  
  
  As you can see, they accomplish the same thing with a small difference (where you should put the property itself); depending on the situation, one could be more appropriate than the other.
  I tested it with Calibre internal reader and on a Kobo Glo device, and it works in both of them.
  
  > **Comments:**
  > **username_0**: I changed page-break-after to page-break-before and it does exactly what I wanted. ;)  
  > **username_0**: On second glance, I see that your solution is fine as is; I guess there are two different ways of accomplishing the same thing.  
  > **username_1**: Yes, they both do the same thing, the only difference is where you should put the styling. Anyway, I've expanded my answer to include also a page-break-before example.  
  > **username_0**: Another tip: I just learned about a second rule "for future devices." I don't know any details, but here it is: new-page {     page-break-before: always;     break-before: always; /* for future devices */ }  
  
  ---
  
  