How do I apply custom branding to DITA content (topic pages) published via AEM Sites?

@nithyani : conceptually the styles that apply to the sites are driven by the clientlibs (1) included within your Site template.

The client libraries include the styles and scripts that you can manipulate to meet specific style guide (branding).

From here, it depends on the type of template (2) you are using for your AEM Sites:

1. Legacy static template: where to find clientlibs
   • Locate the template's code: In CRXDE Lite or your project's codebase, navigate to the template's component. Static templates are usually defined under /apps/<your-project>/components/page/<your-template-name>.
   • Open the template file: Look for the main JSP or HTL file for the template. This file often has a name like page.html, template.html, or body.jsp.
   • Search for clientlib inclusion tags:
     - HTL: You would look for the data-sly-use and data-sly-call attributes, specifically referencing the clientlib.html template.
     - JSP: You would look for the cq:includeClientLib tag.
2. Editable template: use Page Policies to manage client library inclusions. Editable template are more flexible and allows content authors to manage some styling aspects without direct code changes. To find the clientlibs in an editable template:
   • Navigate to the Templates console: In your AEM instance, go to Tools > General > Templates.
   • Select your template: Find and open the editable template you are interested in
   • Open the Page Policy: Click the "Structure" icon (a lock icon) in the top-right corner. Then, select the "Page" component at the top of the template structure and click the Policy icon (a small clipboard or gear icon) in the toolbar.
   • Examine the Page Policy: In the Page Policy dialog, look for the "Client-Side Library" section.
   • You will see a field called "Client Libraries Categories". The values entered here are the clientlib categories that are included on every page created from this template.
   • You might also see "Client Libraries Categories for Head" and "Client Libraries Categories for Body End," which specify where the clientlibs are loaded on the page.

In summary

To customize styles for AEM Sites template you intend to change the css/js of the Site. In AEM you will find those under "clinetlib" included in the Sites template. Depending on whether you use "Static" or "Editable" template you need to find the clientlib for them and in short you do following in respective cases:

• Static Templates: The clientlib inclusion is hard-coded in the template's JSP or HTL file. You have to look at the code directly.

• Editable Templates: The clientlib inclusion is configured through the Page Policy in the AEM UI. You need to navigate to the Templates console to find this information.

References

1 Client libraries in AEM Sites: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs

2 Sites template types: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/platform/templates/templates

I hope this helps.