Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Add CSS that belongs to the current document. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A small, scoped document style
Scenario: A small, scoped document style. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Identify the class you want to change, such as a tutorial callout.
- Add a rule scoped to that class in the document stylesheet or CSS Code when available.
- Check a page with and without the class to confirm the rule's scope.
A scoped callout rule
.tutorial-note {
border-inline-start: 2px solid #b9f65c;
padding-inline-start: 1rem;
}Use the class on the intended callout only. In this installation, put the rule in the available stylesheet controls rather than looking for an unregistered CSS Code element.
Expected result
You should have a small, scoped document style. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If the rule affects unrelated headings, replace a broad selector with a class. This installation does not register CSS Code as an element; use available stylesheet controls here.
Checks before publishing
Prefer shared classes and variables for your design system. This documented code element is not registered in the current site build; use the available stylesheet controls when needed.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official CSS Code reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.