Article Styling

Article Styling Templates

Customize the look and feel of your generated articles. Choose from pre-built templates or create your own custom styles.

Configure in Dashboard

Access the live style editor with real-time preview

Open Dashboard

Available Templates

Minimal Clean

Simple, readable layout with generous whitespace

CSS Code

css

/* Minimal Clean Theme */
.article {
  max-width: 680px;
  font-family: system-ui, -apple-system, sans-serif;
}
.article h1, .article h2, .article h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.article p {
  line-height: 1.8;
  color: #374151;
}
.article a {
  color: #2563eb;
  text-decoration: none;
}
.article a:hover {
  text-decoration: underline;
}

Creating Custom Styles

CSS Selectors

All article content is wrapped in a .prose class. Use these selectors to style different elements:

Selector	Description
`.prose`	Main article container
`.prose h1`	Article title
`.prose h2, .prose h3`	Section headings
`.prose p`	Paragraphs
`.prose a`	Links
`.prose ul, .prose ol`	Lists
`.prose blockquote`	Blockquotes
`.prose pre`	Code blocks
`.prose table`	Tables

Example Custom CSS

css

/* Custom Brand Theme */
.prose {
  font-family: 'Your Brand Font', system-ui, sans-serif;
  max-width: 720px;
  margin: 0 auto;
}

.prose h1, .prose h2, .prose h3 {
  color: #your-brand-color;
  font-weight: 700;
}

.prose a {
  color: #your-link-color;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: #your-hover-color;
}

.prose blockquote {
  border-left: 4px solid #your-accent-color;
  background: #f8f9fa;
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.prose img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Using Google Fonts

You can use any Google Font in your custom CSS. All Google Fonts are licensed under the SIL Open Font License, which permits commercial use.

css

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

/* Apply to your articles */
.prose {
  font-family: 'Playfair Display', Georgia, serif;
}

.prose h1, .prose h2 {
  font-weight: 700;
}

Popular choices: Merriweather, Lora, Playfair Display (serif), Inter, Roboto, Open Sans (sans-serif)

Frequently Asked Questions

Will my articles match my existing site's design?

Yes. Choose the Inherit template and articles ship without extra CSS, picking up your site's existing .prose or body styles for perfect brand consistency. Prefer a designed look? Pick a built-in template or write custom CSS targeting the .prose selectors listed above.

Do these styles carry over when I publish to WordPress or Shopify?

When you publish, SEO Sniper sends a styledContentHtml version with your chosen styling baked in, so the article renders the same on your platform as it does in the preview. If a theme overrides certain CSS, switch to Inherit or scope your custom CSS to the post template.

Can I use a custom font?

Any Google Font works — they're licensed under the SIL Open Font License for commercial use. Add an @import line at the top of your custom CSS and set font-family on .prose, as shown above.

Does styling affect my SEO or rankings?

No — styling is purely visual. Your headings, structure, and meta tags stay intact. Better readability (comfortable line length, font size, and spacing) can actually lower bounce rate and keep readers on the page longer without touching your rankings.

Next Steps

Open the live style editor in Dashboard Apply styles to WordPress Integrate with Next.js