WordPress Typography Patterns: Styled Lists, Notice Boxes, and Code Blocks with Reusable CSS

If you manage documentation or blog content in WordPress, consistent typography for lists, notice boxes, and code snippets makes pages easier to scan, maintain, and standardize across teams. This revision turns the original class-based examples into clear, reusable patterns with modern CSS and editor-friendly HTML.

Originally published on 2010-07-14; fully revised and updated.

Original reference: Website Typography.

What the original post demonstrates

The original article is a short style demo showing custom list marker classes (.arrow1, .arrow2, .circle), notice box classes (.alert, .info, .download), and a CSS code snippet. The core idea is still useful: define a small set of reusable typography classes so authors can keep content visually consistent.

Implement custom list marker styles with maintainable CSS

Instead of deeply nested lists and theme-specific hacks, use semantic lists with explicit classes. This keeps markup cleaner and simplifies future design changes.

CSS for arrow and circle variants

.list-arrow-1,
.list-arrow-2,
.list-circle {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.list-arrow-1 li,
.list-arrow-2 li,
.list-circle li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0.35rem 0;
}

.list-arrow-1 li::before {
  content: '➜';
  position: absolute;
  left: 0;
}

.list-arrow-2 li::before {
  content: '➤';
  position: absolute;
  left: 0;
}

.list-circle li::before {
  content: '●';
  position: absolute;
  left: 0;
  font-size: 0.75rem;
  top: 0.32rem;
}Code language: CSS (css)

Example HTML markup

<ul class='list-arrow-1'>
  <li>First item with arrow marker</li>
  <li>Second item with arrow marker</li>
</ul>

<ul class='list-arrow-2'>
  <li>Alternative arrow style</li>
</ul>

<ul class='list-circle'>
  <li>Circular marker style</li>
</ul>Code language: HTML, XML (xml)

Create reusable notice boxes for alert, info, and download messages

The original post uses inline <span> classes. For better spacing and readability, block-level notice components are usually easier to manage.

.notice {
  border-left: 4px solid #6b7280;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  background: #f9fafb;
}

.notice.alert {
  border-left-color: #dc2626;
  background: #fef2f2;
}

.notice.info {
  border-left-color: #2563eb;
  background: #eff6ff;
}

.notice.download {
  border-left-color: #059669;
  background: #ecfdf5;
}Code language: CSS (css)

<div class='notice alert'>
  <strong>Alert:</strong> This action affects production settings.
</div>

<div class='notice info'>
  <strong>Info:</strong> This section explains optional configuration.
</div>

<div class='notice download'>
  <strong>Download:</strong> Get the latest build artifact from the release page.
</div>Code language: HTML, XML (xml)

Workflow for rolling out typography classes in WordPress

flowchart TD
    A[Define content components] --> B[Create shared CSS classes]
    B --> C[Apply classes in WordPress editor]
    C --> D[Preview on desktop and mobile]
    D --> E{Readable and accessible}
    E -- no --> B
    E -- yes --> F[Publish and reuse pattern]

Legacy class approach vs modern reusable pattern

Legacy CSS snippet from the original post

The original article included the following CSS example:

#subheader h1 {
  float: left;
  margin-top: 28px;
  background: url(../images/logo.gif) no-repeat;
  width: 335px;
  height: 58px;
  text-indent: -9999px;
}Code language: CSS (css)

Best practices

• Keep content markup semantic, and use classes only for intentional variants.
• Centralize typography classes in one stylesheet so editors do not rely on inline formatting.
• Prefer reusable notice components over one-off colored paragraphs.
• Test list markers and notice contrast for readability on mobile and dark/light themes.
• Document approved classes in your editorial or engineering style guide.

Rajesh Kumar

I’m Rajesh Kumar, a DevOps, SRE, DevSecOps, Cloud, and Platform Engineering expert passionate about sharing practical knowledge, real-world experiences, and industry best practices. I have worked at Cotocus and regularly write about technology, travel, investing, health, product reviews, and digital marketing through my various platforms.

I publish technical articles at DevOps School, travel stories at Holiday Landmark, stock market insights at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at TrueReviewNow, and SEO and digital marketing strategies at Wizbrand.