Stylesheets

As touched upon in the header section, stylesheets enable you to format the content of your headers, footers and templates.

Stylesheets are built using a standard language called CSS. CSS and HTML are the fundamental elements of the internet and so in many ways the content of a template can actually mirror what one could do when building a web page.

You will be glad to know you don’t have to be an experienced developer to learn this language in depth but understanding HTML and CSS are very useful skills to have. To add a new stylesheet simply click on the add button on the stylesheets tab:

Template Stylesheets

If you want specific style for the header/footer/body then it is best to name them in a way that will make this obvious when creating a header/footer/body etc.

The best way to understand HTML is that it represents the words, structure and the content of a template. The CSS is simply formatting that you wish to apply to that content.

To help explain further, we will provide an example. The following text was added to this header:

Using the format menu in the rich text editor we selected Heading 2:

What this meant is the HTML was updated in a way that was different to normal. I.e. regular text in the text editor will be formatted as paragraph as shown:

So when you choose a different type using the Formats menu what’s happening is that the text is being given a different category of HTML - these are called classes.

Heading 2 = h2 Paragraph = p

Using the View menu from the rich text editor one can select the Source Code option to see the HTML for our large header text:

So we can see the h2 label is before and after the text. This is how HTML is written and if you right click on an internet page and click view source/show page source you will see that it is made up of lots of these kinds of labels.

The way that CSS works is that you tell is which class of HTML you want to manipulate/reformat. So say I wanted to make this large header text purple and also a different font. I can click on the little gray pencil icon to the right of the word stylesheet and do this:

This will mean anywhere in the content where there is text formatted to be Heading 2, it will show as purple and will use the font Garamond. This means that you can ensure that your corporate font is used.

If your Council uses a font that is not a standard font it is possible to add these into the style sheet itself. To provide an example say my Council uses the Open Sans font. This is a free font that can be accessed via Google Fonts as shown below:

If you click a font and then select the @IMPORT option it will show this line which you can copy:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

You can copy this and place it at the top of your style sheet file in OpenProcess and then set the font-family to ‘Open Sans’ as shown in the example from Google. Doing this has automatically set our large header text to the Open Sans font:

This is a very simple example of how HTML can be added in a template and the styling updated using CSS.

HTML has many types of different classes and you can even name new classes. Plus we’ve only shown very simple CSS things like colour (color in CSS) and font changes (font-family).

There is a huge wealth of information - because the internet is written in HTML and CSS and the best place, as it allows you to test it here:

HTML

HTML Tutorial

CSS

CSS Tutorial