Inline code style

Monospace font, subtle background, and proper padding — the foundation of technical documentation.

Set display: flex on the container and add gap: 1rem to space children evenly.

Use oklch() instead of rgba() for perceptually uniform color manipulation.

The :focus-visible pseudo-class targets keyboard focus without affecting mouse users.

Widely Supported

typographyno-js

Quick implementation

/* HTML: Use <code> inside <p> for inline code:
   Set <code>display: flex</code> on the container. */

:not(pre) > code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.82em;
  background: oklch(0.24 0.03 260);
  color: oklch(0.82 0.12 265);
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  border: 1px solid oklch(0.32 0.03 260);
  white-space: nowrap;
}

/* Variant: accent-tinted for property names */
:not(pre) > code.code--property {
  color: oklch(0.78 0.15 180);
  background: oklch(0.22 0.04 180);
  border-color: oklch(0.30 0.05 180);
}

/* Variant: warning/deprecated */
:not(pre) > code.code--deprecated {
  color: oklch(0.78 0.15 50);
  background: oklch(0.22 0.04 50);
  border-color: oklch(0.30 0.06 50);
  text-decoration: line-through;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a design system for technical documentation.

Goal: Style inline <code> elements so they are visually distinct from body text — monospace font, subtle tinted background, gentle border, and correct vertical rhythm — without breaking line spacing in surrounding paragraphs.

Technical constraints:
- Target only inline code using :not(pre) > code to avoid affecting code blocks.
- Use oklch() for all color values — background, color, and border-color.
- The font-size must be relative (em) so it scales with the parent font size.
- padding must use em units (top/bottom 0.1em, inline 0.4em) to preserve vertical rhythm.
- white-space: nowrap prevents awkward mid-property line breaks.
- border-radius must be small (0.3em) — it's an inline element, not a pill badge.

Framework variant (pick one):
A) Plain CSS targeting :not(pre) > code globally — drop into any stylesheet.
B) CSS Module scoped to a .prose class — safe for component-level use in React or Vue.

Edge cases to handle:
- Long inline code inside a narrow container must be allowed to wrap — add a .code--wrap modifier that removes white-space: nowrap.
- Code inside headings needs a smaller font-size reduction — target h1 code, h2 code separately if needed.
- Code inside links must not inherit link underline — add text-decoration: none to the rule.
- Dark mode vs light mode: provide a @media (prefers-color-scheme: light) override with appropriate lightness values.

Return CSS only.

Why this matters in 2026

Inline code styling is one of the most frequently overlooked details in technical documentation, yet it is one of the first things developers notice when reading documentation for a library or framework. Unstyled <code> elements blend into surrounding body text, making property names, values, and selectors harder to scan. A well-considered style — monospace font, tinted background, subtle border — creates an immediate visual contract with the reader: this is something you can type. With oklch(), the background tint and border can share the same hue as the accent color, giving inline code a sense of belonging to the design system rather than looking bolted on.

The logic

The selector :not(pre) > code ensures these styles apply only to inline code, not to the <code> blocks inside <pre> elements which have their own styling. Using em units for both font-size and padding means the element scales correctly when placed inside headings, small print, or any other context where the inherited font size differs. The font-size: 0.82em reduction compensates for the fact that monospace fonts appear visually larger than proportional fonts at the same nominal size. The subtle border adds a crisp edge that remains visible even when the background color is very close to the surrounding surface color.

Accessibility & performance

Inline <code> elements carry implicit ARIA semantics — screen readers announce them as "code" regions, which communicates to users that the content is a literal string rather than prose. The contrast ratio between oklch(0.82 0.12 265) text and oklch(0.24 0.03 260) background exceeds WCAG AA at 4.5:1 for normal text sizes. Performance impact is negligible — these styles are purely cosmetic and affect no composited properties. The white-space: nowrap rule prevents hyphenation algorithms from splitting property names across lines, which would render them unreadable.