Branding your HTML Outputs with CSS

When you publish to HTML, the appearance of your content is defined in a Cascading StyleSheet (CSS). This is a list of instructions that tell the browser how to style the HTML elements on the page. For example, the CSS tells the browser what color the heading text should be and what font to use for the body text.

Paligo has a default CSS stylesheet that is generated automatically, but you can create your own CSS stylesheet and use that instead. To create a valid stylesheet, you will need to know at least the basics of CSS. For the most common types of style change, such as colors, fonts, and margins, you will only need to make small changes. Typically, all you need to do is find out which class the content uses and then change a value or add a new attribute and value.

Example of a CSS stylesheet. It contains a list of classes and for each class, attributes and values. The attributes represent a type of styling, for example, margin-top, and the values define the style or value to use for that property.

Example of a CSS stylesheet

If your organization has web designers, you may be able to leave the CSS customization to them, as they will already have CSS knowledge.

To create your own CSS, we recommend that you:

  1. Use a code editor or text editor to create the CSS file. You can use any editor that can save a file with the .css extension.

  2. Use a sample publication on your computer to test the changes you make to the CSS. You can use the browser's inspection tool to find classes and add and change attributes and values.

  3. When you have made your custom CSS, you can then upload it to the layout that you use for publishing to HTML.

    The CSS will then be used the next time you publish your content with that layout.

Note

The layout that you use to publish also has settings that affect your published HTML. To find out more about layouts, see Layouts, Create a Layout, and Edit a Layout.

Tip

If you want to learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

You can use a code editor or text editor to create a CSS stylesheet. There are many different applications available, and you can use any that support saving with a .css file extension.

  1. Use a code editor or text editor to create a CSS file. Give it a name and save it with the .css extension.

  2. Add the styling rules that you want to apply to your content.

    To create your own CSS stylesheet, you need to identify the classes that you want to change. You can do this by publishing an HTML output and then using the browser's inspect feature to view the class names of the elements. When you have the class names, you can add them to your CSS and include attributes and values for styling.

    To find out about using a publication for testing your CSS changes, see Change CSS and Test the Results

    If you are completely new to CSS, you can find a simple explanation of the syntax below.

    Tip

    If you want to learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

  3. Save your CSS file.

    You can then upload it to an HTML5 or HTML layout in Paligo.

Basic CSS Syntax

A CSS stylesheet contains a list of instructions or "rules". They tell the browser how to style content that is marked up to have a class name or id. For example, a paragraph could have the class name "aside" and you could then use a CSS rule for "aside" to define the color, font, margins, etc., to apply to that paragraph.

Example of a CSS stylesheet. It contains a list of classes and for each class, attributes and values. The attributes represent a type of styling, for example, margin-top, and the values define the style or value to use for that property.

Example of one of the default CSS stylesheets used by Paligo

For a CSS rule, you define the selector and then the attributes and values that will apply. Here is a simple example of the styling for a class named "para-main".

.para-main {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 1.5pt;
    color: #333;
    background-color: #f5f5f5;
}
  • The rule begins by defining the class the style rules will apply to. This is the "selector" and it can include one or more classes. Here, there is just one and it is preceded by a period ( . ) so that it can apply to different HTML elements. For example, if there was an h1.para-main selector, the style rules would only apply to heading 1 (h1) elements that have the class "para-main".

  • An opening curly bracket begins the rules for styling.

  • On each line, there is an attribute and the value(s) for that attribute. For example, font-size is the attribute and 13px is the value. Note that the font-family attribute has several values, each separated by a comma. In this case, the browser will use the Open Sans font. If that is unavailable, it will use Helvetica Neue instead. If that is unavailable, it will use Helvetica, and so on.

  • A colon separates a value from its attributes.

  • A semi-colon is used to mark the end of the value(s).

  • A closing curly bracket ends the rule.

This is a basic example, but the main principles are the same for CSS styles. You begin with a selector to define which class the rules apply to , then define the rules for that class as attributes and values.

Tip

If you want to learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

If you have lots of styles to change, we recommend that you publish your content as a "test" publication. You can then view the publication in a browser, and edit the CSS file in the output. When you make changes to the CSS file, you can save it and refresh the browser to see how the changes affect the content.

This is quicker than applying each change individually in the browser's inspect feature and then copying those changes to your CSS.

  1. Use a code editor or text editor to create a CSS file. It must contain at least one CSS style rule and have a .css file extension.

  2. Upload the CSS file to an HTML5 or HTML layout.

  3. Choose a publication and publish it using the layout from the previous step. When your browser downloads the output, save the output on your computer to use as a development sample.

  4. Unzip the download and open the out/css folder. You will see your custom CSS file, but it will be renamed with a random ID name:

    customstylesheet.png
  5. Open the index.html file in your browser.

    The HTML content is shown and it uses the rules in your custom CSS and also the rules in the default stylesheets. The rules in your custom CSS stylesheet takes priority over the default CSS stylesheets. For example, if your custom CSS has rules for styling the h2 class, the browser will apply those rules and not the h2 class rules in the default CSS stylesheets.

  6. Use the browser's inspect feature (or similar) to view the classes in the HTML. You can make changes to the styles in the inspector panel to see what effect the changes will have.

  7. When you make a change that you want to keep, add the rule to your CSS stylesheet. This will override the default CSS rules.

  8. Refresh the browser to see the changes that have been added to your CSS stylesheet.

  9. When you are happy with your changes, upload your CSS file to your layout in Paligo. This will overwrite the one you uploaded previously, and it will be applied the next time you publish.

Modern browsers such as Google Chrome and Mozilla FireFox have inspection features that you can use to view the classes in your HTML content and test changes to the CSS. The inspection features may use different terminology, but they work in a similar way. If you have never used the inspection features before, here's a quick overview based on Google Chrome.

To use the inspection tool:

We recommend that you publish an HTML output to your computer and use it for testing. You can use the browser inspection tool to test your changes, and then add them to your custom CSS file before uploading it to Paligo.

Open the Inspection Tool

  1. Use a browser to open the index.html file in your published HTML output.

  2. Right-click on the webpage and select Inspect (or the equivalent option if you are not using Chrome).

    The browser reveals the inspection tools.

    Help center homepage shown in Google Chrome with the Inspection tools on show.

    Let's look at the various parts of the Inspection interface:

    1. The viewer. This is where your webpage content is shown as it will appear to visitors.

    2. The Elements tab shows the HTML of the page you are viewing.

    3. The underlying HTML code for the page. This is also called the DOM Tree (Document Object Model Tree). You can expand the elements to see the full structure of the page. From here, you can see the class names and ids that are assigned to the various HTML elements. You style your content by creating rules that apply to these classes and ids.

    4. The Styles tab. This is where you can see the CSS that is currently applied to the selected class. You can make changes to the CSS here to see what effect the changes will have. For example, if you change the color value for a heading, you will see the heading change color in the viewer. The changes you make here are only for testing as they are not stored and will be lost when you browse away from the page or refresh it. To keep the changes, you need to add them to your custom CSS file.

    5. The selection tool. If you activate this, you can select any part of the page shown in the viewer, and the browser will show you the HTML for that part of the page. The Styles tab then updates to show you the various classes and styles that apply to that HTML element.

Find Classes in the Inspection Tool

Use the selection tool to find the class you will need to change if you want to restyle part of a page.

  1. Select the selection tool icon.

    select-inspect-mode.jpg
  2. Hover the cursor over the part of the page that you want to restyle. A highlight appears and a pop-up to show the class and the styles that are currently being used.

    inspection-classes.jpg
  3. Select the part of the page that you want to restyle. When you click the button, the cursor will change and the styles for that part of the page are shown in the Styles tab. The HTML elements for that part of the page are also highlighted in the DOM Tree.

    styles-and-domtree.jpg

Now that you have found the classes that you want to change, you can use the Styles tab to apply different styles.

Note

Some HTML elements are inside "container" elements, which are at a higher level in the DOM Tree structure. The styles you want to change may be set for the "container" rather than the individual element.

Change Styles in the Inspection Tool

The Styles tab shows the classes, attributes, and values that the browser applies to the currently selected HTML element. You can change the values or add extra attributes and values, and see the results in the browser.

  1. Use the selection tool to select the part of the page that you want to change.

  2. In the Styles tab, find the classes that you want to change. For example, if you use the default Help Center Layout and select the "How can we help you today?" heading on the homepage, you will see styles like this:

    styles-in-chrome.jpg

    The CSS shown here styles the heading. There are several different classes that are used.

    1. This is a media query, which means this style only applies when the content is viewed on a device with certain attributes, in this case, a screen that is 768px wide or more.

      The class name is .portal-header h1 and it has a font-size of 36px. You can change the font-size to make the portal heading text larger or smaller, and you can add other attributes and values, such as color.

    2. The .portal-header h1 class. These settings apply to elements that have the portal-header h1 class, but only when the content is viewed on a device that is smaller than 768px wide. Notice that the font-size here is crossed through. This means it does not apply as the font-size is being set in a class that takes precedence (the media query .portal header h1 class, which is shown higher up the list).

    3. These are general values that apply to heading classes such as h1, h2, h3. Again, if a value is crossed through, it means that value has been set for another class that takes priority over this class.

    The same principles apply to all elements on a page. You can find out what classes apply and which styles are used.

  3. To make a change, select a value and replace it with the value you want. For some values, the browser provides a list of possible values you can use.

  4. If you want to add an extra attribute and value, position the cursor below the last attribute and above the closing curly brackets, and then click. A colon appears.

    position-cursor-for-css-style.jpg

    Enter the name of the attribute on the left side of the colon and the value on the right side of the colon.

    styles-added.jpg
  5. When you are happy with the changes you have made, add them to your own CSS stylesheet. When you are finished, upload your CSS to your HTML5 or HTML layout in Paligo.

When you have created a custom CSS file, upload it to your HTML layout.

  • Select Layout and edit the layout you are going to use for publishing.

  • Select CSS, JS, logos and other assets.

  • Upload your CSS file in the CSS section.

    CSS settings box with a single field. The field has an Upload button.

    Important

    When you upload a CSS file, it will replace any CSS file that is currently associated with the layout.

  • Select Save.