# Styling with Law Widgets ## In this section * Installing the Law Widgets web components library * Using Law Widgets to add styles to document content * Customising styles with CSS ## Law Widgets Akoma Ntoso HTML documents don't look very good without styling. Laws.Africa's [Law Widgets](https://github.com/laws-africa/law-widgets/blob/main/core/README.md) is a collection of web components that make it simple to style the HTML provided by the Laws.Africa Content API. Using Law Widgets is easy: 1. Add a reference to the Law Widgets javascript. 2. Use the law widgets in your HTML. We'll use the [\](https://github.com/laws-africa/law-widgets/blob/main/core/src/components/akoma-ntoso/readme.md) widget to apply appropriate styles to the expression HTML in `expression_detail.html`. {% code title="expression\_detail.html" %} ```html {{ expression.title }} Home

{{ expression.title }}

{{ expression.content|safe }} ``` {% endcode %} If you refresh your expression page in your browser, you should now have a well-styled document.
{% hint style="info" %} You can also work directly with the Law Widget SCSS styles without using Law Widgets. See for more details. {% endhint %} ### The frbr-expression-uri attribute We included the **frbr-expression-uri** attribute on the `` element. If you inspect the `` element in your browser's inspector, you'll see that new attributes have been added automatically: ```html ... ``` These additional attributes are derived from the Expression FRBR URI. They allows Law Widgets (and you) to customise the applied styles depending on a country's legal tradition. For example, in Namibia's legal tradition editorial comments are **green** and **bold**. This styling is applied based on CSS selectors that work on the FRBR attributes added above. {% hint style="info" %} The different legal tradition styles that Law Widgets supports are in the [traditions folder in the GitHub repo](https://github.com/laws-africa/law-widgets/tree/main/law-widget-styles/scss/mixins/traditions). {% endhint %} ## Customising styles You can easily apply your own CSS styles to the Akoma Ntoso HTML using regular CSS selectors. For example, we can add a red border to all sections, except for Kenya (country code KE) where we can add a green border: ```css la-akoma-ntoso .akn-section { border: 1px solid red; } la-akoma-ntoso[frbr-country=ke] .akn-section { border-color: green; } ``` You can use different attribute-based CSS selectors to change styling for different document types, countries, localities and languages. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developers.laws.africa/tutorial/module-1-build-a-legislation-reader/styling-with-law-widgets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.