Create a sample topic containing:

Select the second para element and use the Element attributes panel to give it the role attribute. Set the value of the role attribute to:

indentbody

When you publish, Paligo will give the paragraph the class name "indentbody" in the HTML. You can then style it using CSS.

Select the table element and use the Element attributes panel to give it the role attribute. Set the value of the role attribute to:

data-table

When you publish, Paligo will create a div element to contain the table. The div element will have the class name "data-table" and you can style it by using CSS.

Select the last cell in your table. In the Element Structure Menu at the top, select the td element and then Go to element from the menu. Use the Element attributes panel to give the td element the class attribute and set its value to:

yellow-cell

When you publish, Paligo will give this cell the class name "yellow-cell". You can then style it using CSS.

Save your sample topic.

Create a publication, add your sample topic to it, and then save it.

Select the dotted menu ( ... ) for your publication and then select Publish.

Publish your publication and use the built-in default HTML5 Help Center Layout.

Select HTML5 and choose the default HTML5 Help Center Layout.

Select Publish document.

Open the zip file and browse to the out folder. Open the index.html file in a browser. For this tutorial, we are using Google Chrome.

Select the panel for your sample topic to open it.

Create a CSS file. You can use any third-party text editor or code editor that supports saving a CSS file. Leave the editor open so that you can add CSS to it as you work through this tutorial.

Right-click in the browser window and select Inspect*.

*This is correct for Google Chrome. Other browsers may use a different name.

Use the Inspect tool in the Browser Inspection Tool.

Move the cursor over the TOC sidebar so that the entire bar is highlighted and then left-click to select it.

In the Styles, find the rule that is setting the background color.

Select the color box and change the color to:

#a94442

Right-click on the rule that you changed in steps 4 and 5 and select Copy Rule.

Paste the rule into your CSS file (from Prepare a Sample Topic and CSS).

It is best practice to add comments to your CSS so that anyone who opens the CSS file can tell what each rule is styling. To start a comment, enter /* and to end a comment enter */

Here is an example of a comment before a rule:

/* The following rule changes the background color of the sidebar */

.bg-primary, .btn-primary, .pagination>.active>a, 
.pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, 
.pagination>.active>span:focus, .site-sidebar, 
.portal-single-publication .publication-icon {
    background-color: #a94442;
}

Use the Inspect tool in the Browser Inspection Tool to select the main heading on the page.

In Styles, find the rule that sets the heading 2 (h2) font-size and increase the size to 40px.

Click on the line below the font-size property and add a color property with the value set to #a94442. Remember to add a semi-colon at the end of the color value.

Add another rule to the same class. This time set the font-weight to 800. Again, remember to add a semi-colon after the font-weight value.

Right-click on the rule in the Styles panel and select Copy rule.

Paste the rule into your CSS file, after the closing curly bracket of the previous rule.

Using the same technique, set your:

Copy and paste these rules into your CSS file.

Use the Selector tool in the Browser Inspection Tool to select a step in a procedure.

In the Styles, select the ::before that comes immediately after the selected <li class="step">. The ::before is a pseudo element and, in this case, it represents the step number icon.

Change the background color:

.theme1 .procedure > li::before {
    background-color: #a94442;
}

Copy the rule and paste it into your CSS file.

Use the Selector tool in the Browser Inspection Tool to select an item in a top-level bullet list (itemized list).

In Styles, select the ::marker that comes between the <li class="listitem"> and the <p>.

Notice that the ::marker has some rules that come from "user agent stylesheet". This means it is using the default styling that is defined by the browser. You cannot change these, but any rules that you add for the same class will override the browser defaults.

Select the plus icon on the Styles toolbar to add a new rule. It automatically includes the selector (in this case, ::marker).

Edit the selector and create this rule:

.itemizedlist ul.itemizedlist > li::marker {
    color: ##a94442;
    font-size: 1.2em;
}

Here, you are making the selector more specific and setting a color and size for the bullet points. The browser will only apply the styles to markers that are located in this structure:

<element with class = itemizedlist>
    <ul with class = itemizedlist>
        <li>

Copy the rule and add it to your CSS.

Select a bullet list and look in the HTML. It shows that the <ul> HTML contains inline styling, in this case, it is setting the bullet lists to use a disc bullet.

The browser will use this styling in preference to the CSS. To tell the browser to use a style in your CSS instead, you can include !important. This should be used carefully, as it tells the browser to use the !important style in preference to any other styling, including styling in other CSS files.

In Styles, select the plus icon + and add this new rule:

.itemizedlist > ul.itemizedlist {
    list-style-type: square !important;
}

This tells the browser to use square bullets on top-level unordered lists.

Copy the rule and add it to your CSS.

Now let's create some similar styling for the second-level ("nested") bullet points. This time, you will set the bullet points to blue squares. For this, add these two rules:

.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist {
    list-style-type: square !important;

}
.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist > li::marker {
    color: #6495ed;
    font-size:1.2em;
    
}

Here, you have used more specific selectors. The first rule targets the unordered list (ul) that is inside a listitem in a parent unordered list. The second rule targets the marker of list items in an unordered list that is inside a listitem in a parent unordered list.

Copy the rule and add it to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the number for a number list item.

In the Elements section, you should see that the ::marker pseudo element is highlighted in the ordered list structure.

In the Styles, select the plus icon + to add a new style. By default it will be ::marker but you should change it to:

.orderedlist ::marker

Here, you have told the browser to only apply the style rule to ::marker when it appears inside the "orderedlist" class. This is to make the selector more specific, so that the style does not apply to other lists that have the ::marker pseudo element, such as bullet lists.

Enter the following styling for the orderedlist ::marker:

.orderedlist ::marker {
    color: #a94442;
}

This sets the color of the number in ordered lists to dark red.

Copy and paste the rule to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the image in your content.

In the Styles, look for img.materialboxed. This is the rule that applies to all block images in Paligo content.

Change the rule so that it has these properties:

img.materialboxed {
    border: 2px solid #ddd;
    max-width: 100%;
    height: auto;
    padding: 10px;
}

This sets your block images to have:

Copy the rule and add it to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the second paragraph in your sample topic.

In the Elements section, you should see that the paragraph has the class name in the HTML:

<p class="indentbody">

In the Styles section, select the plus icon + to add a new rule.

Edit the rule so that it applies a left margin indent to the text:

p.indentbody {
    margin-left: 2.5em;
}

Here, you are targeting any paragraph element that has the class "indentbody".

Copy the rule to your CSS file.

Use the Selector tool in the Browser Inspection Tool to select the table in your sample topic.

Select the thead element (the table header).

In the Styles , select the plus icon + to add a new rule.

Change the selector to:

.data-table > .table thead

With this selector, you are targeting the header (thead) of tables that are inside a parent element (in this case, a div) with the class name "data-table". The CSS you set inside this rule will not apply to the header of other tables.

Set the background color and the text color for the header:

.data-table > .table thead {
        background-color: #9b9ba4;
        color: #ffffff;
}

Copy the rule and paste it into your CSS.

Select the plus icon + to add another rule.

Change the selector and add these style properties:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
}

Again, this selector targets a table that is a child of an element that has the class "data-table". The styles set the table to have a solid, thin, dark gray border.

The border shows that the table has some extra space at the bottom. You will remove this in the next step.

Add the following style to rule you created in the previous step:

margin-bottom: 0px !important;

So your previous rule should now look like this:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
        margin-bottom: 0px !important;
}

This tells the browser to set the bottom margin to zero. The !important overrides the margin-bottom value that is set for all tables in another CSS.

Copy the rule and paste it into your CSS.

Now let's give a background color to alternate rows in the table. Create this new rule:

.data-table > .table tbody tr:nth-child(2n) {
        background-color: ghostwhite;
}

With this selector, you again target the table that is a child of the "data-table" div. This time, you also target the table body and the tr:nth-child (2n) targets the even rows. You have set the background color of the rows to "ghost white".

Back when you created your sample table, we asked you to give the last cell (td) a class attribute with the value "yellow-cell". Let's style that cell next.

Use the browser's Select tool to select the last cell in the table.

In the Styles, select:

<td class="td yellow-cell">

Select the plus icon + to add a new rule and give the cell a yellow background:

.td.yellow-cell {
        background-color: #fdef20;
}

Copy the rule and paste it into your CSS.

Save your CSS.

Upload Customized CSS.

Select the dotted menu ( ... ) for your sample publication.

Select Publish.

Select HTML5 and then choose your custom HTML5 Help Center Layout.

Select Publish Document.

In the download, browse to out/index.html and then open the index.html file in your browser.

On the hub page, select your sample topic.