The header on Scalar pages sits at the very top of the page. It contains a book's title, author and login options. It's spatial boundaries on Scalar pages are represented by the highlighted area in the image to the left.

Header Text

CSS accepts two values for font styles, or more specifically, for the font-family property: actual font family-names (e.g."Times New Roman" or “Arial”) and generic font families (e.g."serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style of the header one needs to begin by declaring the selector for the header (.cover), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the header to “Georgia” with a fallback of a generic “serif” one would insert:


Learn more about the font-family property here.

Title Text

Font Style
To change the font style of your Scalar project’s title located in the header, one needs to designate the selector .cover_title and then select the font-family property and font style(s) just as above. Thus, to change the text style of your Scalar project’s book title to “Georgia” with a fallback of a generic “serif” one would insert:


Font Size
To change the font size of your Scalar project's title, one needs to designate the selector .cover_title, select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of your Scalar project’s book title to 30 pixels, one would insert:


Learn more about the font-size property here.

Header Background Color

CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the header one needs to begin by declaring the selector for the header (.cover), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the footer to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:

To change the background color of the headerto black using hexadecimal colors, one would insert:


And to change the background color of the header to bright blue using RGB colors, one would insert:

Distance Between Header and the Content Area

To adjust the distance between the header and the content area one needs to create a margin below the header. Thus to create a distance of 20 pixels between the header and the content area one needs to begin by declaring the selector for the header (.cover), the property (margin-bottom) and the value in pixels (e..g. 20px) for the flowing statement:

Comment on this page