Work with the common content styles work-with-common-styles

Open the required stylesheet for editing.

In the Styles list, expand the Heading Styles.

Right-click on Heading Styles style and choose New Style.

In the Add Style dialog, keep the Tag name as h2 and enter chapter in the Class name field.

Click Done.

Open the required stylesheet for editing.

In the Styles list, expand the Heading Styles.

Select the h1 style from the list.
The properties for the h1 style are shown in the Properties panel along with its Preview.

Select the Autonumber property.

The styles that you can apply on the auto-number list are shown below the Autonumber property.

Set the following properties:

• Style: Select from a wide range of locale-specific or generic numbering styles. You can choose styles like Arabic-Indic, Devanagari, Georgian, Decimal, Lower-Alpha, and more. For the current example, select upper-alpha.

• Format: The default format is set to <x>, wherein the x value is replaced with the numbering Style that you selected in the Style property. For example, if you have selected decimal (1) style, then the value of x auto-increments for every instance of the h1 style and goes as 2, 3, and so on. You can also add custom text in the field to format the heading style. For example, if you want all h1 headings to have a prefix of Chapter, then you need to set this field as Chapter <x>.

• Insert Character: If you want to add any special character in the Format, then click the Insert Character ( {width="25"}) icon. Select the desired character that you want to add in the style format and click Insert. There are different types of special characters that you can choose from the Select Category drop-down list. For our example, select the Right-Pointing Double Angle Quotation Mark from the Punctuation category.

  {width="400"}

• Start Numbering From: If you want the numbering to start from a specific number, then provide that value. For our example, keep the default value of 1.

• Indent: If you want to indent the heading, then you need to set the Indent value. For our example, set it to 0 px.

  note note
  NOTE
  You can enter the value in px (pixels), pt (points), rem, em, % (percentage), or in (inches) units.

• Prefix Width: This is the area that is occupied by the auto-number format. It is automatically set to a size that can easily accommodate the selected style format. If you want to increase the size, then you can replace the default value.

  When setting this value manually, try changing the other properties that will have an impact on the width. For example, change the font size, the format with prefix (Chapter) or a suffix (:), set the maximum value in the Start Numbering From property, and the various font properties to come up with the optimal size.

  For our example, keep the default value.

• Spacing: Specify the horizontal and vertical spacing. For our example, keep the default values.

  With the above customizations, the style is customized as shown below:

  {width="500"}

• Apply Formatting To: The properties under the Autonumber category will help you define the numbering style. To apply further customizations to the numbering style or the content of your heading format, you can choose Numbering or Paragraph in this field. If you choose Numbering, then any changes to Font, Border, Layout, and other categories will be applied only to the numbering style in the heading. However, if you choose Paragraph, then the changes will be applied on the heading content and not the numbering style.

Use the following settings to generate an output shown in the following screenshot:

{width="500"}

Open the required stylesheet for editing.

In the Styles list, expand the Paragraph Styles.

Right-click on the Paragraph Style and choose New Style.

In the Add Style dialog, keep the Tag name as p and in the Pseudo Class field, select ::first-letter.

Click Done.

A new paragraph style named ::first-letter is created and added under the Paragraph Styles list.

Select ::first-letter under the p style, and set the following properties:

• Font: Set the desired font for the first letter in your paragraph. For our example, set the Font Family to cursive, font weight to 500, font size to 30 pt, and choose a font color.

• Layout: Set the vertical alignment of the text around the drop cap style. For our example, we will set the Vertical Alignment to Bottom.

Open the required stylesheet for editing.

In the Styles list, expand the Character Styles.

Right-click on the Character Style and choose New Style.

In the Add Style dialog, keep the Tag name as span and enter BoldItalic in the Class name field.

{width="400"}

Click Done.

A new character style named code is created and added under the Character Styles list.

Select span.BoldItalic from the Character Style list, and set the following properties:

• Font: All font-related properties can be customized from this section. By default, there are some fonts bundled with the product. You can choose the desired font for the character style. For our example, set the Font Family to Serif, and select Bold and Italic in the Font Style property. You can also customize other font properties such as Font Weight (like bold, lighter), Text Decoration (like underline, overline), Font Size, Font Color, Text Alignment, and more.

  note note
  NOTE
  You can also add fonts to your template, which are stored in the Resources section of your template. For more details about adding fonts and working with Resources, see Work with resources.

• Layout: You can set the layout-related properties such as Height and Width, Margin, Padding, Alignment, and more.

• Background: The Background properties allow you to format the background color of a particular style. You can define the background color or image for any style.

Open the required stylesheet for editing.

In the Styles list, expand the List Styles.

Select the ol style from the list.

The properties for the ol style are shown in the Properties panel along with its Preview.

{width="500"}

Select the Advanced Formatting option.

A Confirmation message is displayed.

Click Yes on the Confirmation message to open the Advanced Formatting properties.

The following properties are available by default:

• Level: By default, there are 6 levels of numbered lists. The level that you select in this drop-down controls the style changes on the selected level and all subsequent levels. For example, if you select level 4, then all style changes that you apply are set on levels 4, 5, and 6.

• List Style Type: There are a number of list numbering styles that you can choose from. The list contains locale-specific and generic numbering styles that are used to create a numbered list. Some of the list style types are Arabic, Cambodian, Devanagari, Ethiopic, Hangul, Hebrew, Japanese, Korean, Simple Chinese, Urdu, and more.

Further, you can work with the following Advanced Formatting properties:

• Number Format: The default format is set to <x>, wherein the x value is replaced with the numbering Style that you selected in the List Style Type property. For example, if you have selected decimal (1) style, then the value of x auto-increments for every instance of the list element and goes as 2, 3, and so on. You can also add custom text in the field to format the list style. For example, if you want all first-level list styles to have a suffix “)”, then you need to set this field for first-level list style as “<x>)”.

• Insert Character: If you want to add any special character in the Number Format, then click the Insert Character ( {width="25"}) icon. Select the desired character that you want to add in the style format and click Insert. There are different types of special characters that you can choose from the Select Category drop-down list.

• Insert Level: You can include the number from any of the preceding levels in your number format. For example, if you want to include the number format from 5th level in your 6th level number format, then choose 5 in the Insert Level drop-down list. Note that the Insert Level drop-down shows the numbers of only preceding levels and not the following level. For example, while you are at Level 3, the Insert Level list will only show levels 1 and 2.

  {width="400"}

  You can also change the Number Format to present the list values as required. For example, when you are using a nested numbering style for level 3, then you can format it as “<2>.<x>))”. This will show list number 2, followed by a period, then followed by list number 3, and then two brackets, as 2.3)).

• Indent: If you want to indent the list, then you need to set the Indent value. Any changes in the indent can be reviewed in the Preview panel and adjusted.

  note note
  NOTE
  You can enter the value in px (pixels), pt (points), rem, em, % (percentage), or in (inches) units.

• Prefix Width: This is the area that is occupied by the Number Format. It is automatically set to a size that can easily accommodate the selected format. If you want to increase the size, then you can replace the default value.

  When setting this value manually, try changing the other properties that will have an impact on the width. For example, change the font size, the format with prefix or a suffix, and the various font properties to come up with the optimal size.

• Spacing: Specify the horizontal spacing in between the list number format and the content. The vertical spacing controls the gap between the two list items.

  The following screenshot shows the customized ordered list for each level:

  {width="500"}

Open the required stylesheet for editing.

In the Styles list, right-click on the Table Style and choose New Style.

In the Add Style dialog, keep the Tag name as table and enter double-border in the Class name field.

Click Done.

A new table style named table.double-border is created and added under the Table Styles list.

Select table.double-border from the Table Styles list, and set the following properties:

• Apply Formatting To: You can choose to apply the style formatting to the entire table, odd/even rows or columns, or first/last row or column.

  note note
  NOTE
  The following settings are available under the General section when Apply Formatting To is set to Whole Table.

• Text Wrapping: Select how to wrap text around the table. This is useful when the table is within another block-level element, and the table has to be rendered along with other content in the block element. The wrapping options are left or right aligned, or none.

• Border Collapse: Select the appearance of the table border. If you select collapse, then only a single border line is drawn in between the table cells. However, for separate style, the border is visible around each cell with additional padding.

  {width="500"}

• Border Spacing: This setting is available only when Border Collapse is set to Separate. Using this setting, you can specify the vertical and horizontal spacing in between cell borders.

  {width="500"}

  note note
  NOTE
  The following settings are available under the Cell section when Apply Formatting To is set to Whole Table.

• Padding: Specify the padding in between table cells. You can specify different padding values for top, bottom, left, and right sides.

• Vertical Alignment: Specify the vertical alignment for cell content. Available options are: Top, Middle, and Bottom.

• Border Side, Style, Color, Width, Radius: Specify the border-related properties. You can choose to have borders only on specific sides like Left or Right. The Border Style lists the available border styles like Solid, Dashed, Double line, and more. Specify the border color using the color palette. You can specify the border width in px, pt, rem, em, %, and in units. The Radius defines the curve to make circular corners.

The other properties under the Font, Border, Layout, Pagination, and Background are explained under other examples in this topic. Depending on your selection in the Apply Formatting To property, you can apply these values to the entire table or selected rows or columns.

A preview of a sample table with different rows formatted in a different way is shown below:

{width="500"}

Open the required stylesheet for editing.

In the Styles list, expand Other Styles.

Right-click on the Other Style and choose New Style.

In the Add Style dialog, keep the Tag name as blank and enter wintitle in the Class name field.

As wintitle is a recognized DITA element name, its style definition is automatically mapped to the <wintitle> element in your source.

Click Done.

A new style named .wintitle is created and added under the Other Styles list.

Select .wintitle from the Other Styles list, and set the properties as required.