Introduction
We are using HTML & CSS to typeset and layout publications. HTML (Hypertext Markup Language) is a markup language and the base of every website. HTML contains your contents in a structured, machine readable form. CSS (Cascading Style Sheets) adds styling to HTML documents, so they no longer just a wall of text.
HTML
A basic HTML document would look like this:
This is not a useful template and just an example how basic HTML works
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> Templates
Our templates are not pure HTML, they are written with handlebars. The templates contain HTML but also adds placeholders where your content blocks (e. g. a headline and a paragraph) will be added later. The template is used to generate the finished HTML file.
So this template:
<!DOCTYPE html>
<html>
<body>
{{#each children}}
{{html}}
{{/each}}
</body>
</html> with two content blocks inside, children could generate the HTML above.
CSS
When we created a template, we can add CSS to style our publications. There are multiple ways to add CSS:
Inline CSS
This should only be used if you only want to style one specific element.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> This will result in a red headline.
Stylesheets
This is the preferred way to style your publications since it defines universal styling rules that will be automatically applied.
Firstly, we have to add a head block with a link to our css file (here book.css):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="book.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> Now we will need to create this css file:
h1{
color: red;
}Now all level 1 headings (h1) will be rendered red.
More Resources
This article can only give you a first impression of what HTML/CSS is. You can find a detailed guide to create templates in the next articles, but you should learn the HTML/CSS basics first.
Here is a list of good resources for learning the basics: