If you want to different page orientations and sizes in the same document, this is easy to do through "named pages". Here's how it works:
<!DOCTYPE html>
<html>
<style type="text/css">
/* define a few different page types we can refer to from CSS classes */
/* see http://www.princexml.com/doc/page-size/ */
@page landscape {
size: A4 landscape;
margin: 20px;
}
@page portrait {
size: A4 portrait;
margin: 10px;
}
/* setup CSS classes to refer to these pages we just defined */
.landscape {
page: landscape;
}
.portrait {
page: portrait;
}
/* reference http://www.princexml.com/doc/page-breaks/ */
.page_break {
page-break-before: always
}
</style>
<body>
<p class="portrait">Page 1 content</p>
<p class="landscape page_break">Page 2 content</p>
</body>
</html>
Named pages can also be used to apply different headers and footers to various pages.