20 Useful WordPress CSS Snippets

CSS provides a straightforward way to customise WordPress without modifying PHP templates or installing another plugin. Many common adjustments, including typography, content spacing, responsive layouts, navigation, images and buttons, can be handled with a few carefully targeted CSS rules.

The main difficulty is usually identifying the correct element to style. WordPress generates much of its page markup through themes and blocks, and a selector that works with one theme may have no effect on another. CSS supplied by page builders, plugins and the block editor can also override custom rules.

The following 20 snippets cover practical customisations suitable for blogs, business websites, resource libraries and digital product websites. Several use standard WordPress block classes, while others use custom classes that can be assigned to blocks or containers.

Adding Custom CSS to WordPress

On a classic theme that supports the Customizer, CSS can generally be added through Appearance > Customise > Additional CSS. The location may differ on websites using a block theme or a third-party builder. A child theme stylesheet is another option for maintaining customisations independently of the administration interface.

For a block theme, the Site Editor provides native controls for many typography, colour and layout settings. Use those controls when appropriate before introducing duplicate CSS rules.

If a snippet uses a class such as .custom-content-box, that class must be assigned to the relevant element. In the block editor, select the block, open its advanced settings and enter the class name under Additional CSS class(es), where supported. Enter the name without a leading period.

When using a builder such as Divi, assign the class through the module, row or section’s CSS class setting. The precise location depends on the builder version.

WordPress block classes commonly begin with wp-block-. A paragraph block may include .wp-block-paragraph, while a standard Button block typically contains an anchor with the class .wp-block-button__link.

Inspect the rendered HTML using the browser’s developer tools before applying selectors to an unfamiliar theme. The editor preview does not always reproduce the exact front-end markup or styling.

Before applying multiple snippets: Check whether the theme or page builder already supplies the required feature. Custom CSS should supplement existing controls rather than create unnecessary competing styles.

Typography and Content Formatting

1. Improve Paragraph Line Height and Spacing

Long technical articles are easier to read when paragraphs have sufficient line height and consistent spacing.

.entry-content p {
    line-height: 1.75;
    margin-bottom: 1.4em;
}

The line-height property controls the distance between lines of text. A unitless value scales with the element’s font size, making it suitable for responsive layouts.

The bottom margin introduces separation between consecutive paragraphs.

The .entry-content selector is used by many WordPress themes, but it is not universal. Some block themes and page builders use different content containers.

If the selector does not match the rendered page, replace it with the content wrapper used by the active theme.

Avoid applying large paragraph margins globally without checking footer widgets, navigation elements and other compact text areas.

2. Create a More Readable Article Width

Very wide lines of text can make long articles difficult to follow, particularly on large desktop monitors.

A custom class provides a predictable way to limit the width of a specific content area.

.readable-content {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

Assign readable-content to a suitable article container or Group block.

The max-width property prevents the container from exceeding 760 pixels, while the horizontal margins centre it when sufficient space is available.

The padding provides breathing room on smaller screens.

box-sizing: border-box ensures the specified width includes padding and borders.

This technique is useful for instructional content, documentation and ebook extracts. It should not be applied indiscriminately to pages containing full-width layouts, galleries or complex multi-column sections.

3. Add Consistent Spacing to Article Headings

Headings often need more space above them than below them. This makes the relationship between a heading and its following content clearer.

.article-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-content h3 {
    margin-top: 1.8rem;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

Assign article-content to the appropriate wrapper.

The CSS gives H2 headings greater separation because they usually represent major article sections. H3 headings receive less spacing because they are subordinate to H2 headings.

This is particularly useful for long technical guides with code examples, tables and troubleshooting procedures.

Block themes may already use block-gap settings to control the spacing between headings and neighbouring elements. Inspect the final result to avoid excessive spacing caused by competing margin rules.

4. Style Inline Code for Technical Articles

WordPress development articles frequently contain inline PHP functions, CSS properties, filenames and configuration constants.

Distinct styling helps readers identify code without confusing it with ordinary paragraph text.

.technical-article :not(pre) > code {
    background-color: #f3f4f6;
    color: #9f1239;
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

Assign technical-article to the article wrapper.

The :not(pre) > code selector targets code elements that are not direct children of a pre element. This helps prevent the inline styling from being applied to standard code blocks.

The rule does not replace syntax highlighting. It simply distinguishes short code identifiers such as add_action(), wp-config.php and margin-bottom.

The overflow-wrap property permits long identifiers to break if they would otherwise overflow the container.

5. Improve Code Block Readability

Long code examples require different treatment from inline code. They need consistent background colour, padding and horizontal scrolling.

.technical-article pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.55;
    tab-size: 4;
}

.technical-article pre code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9rem;
    white-space: pre;
    overflow-wrap: normal;
}

These rules preserve whitespace and indentation within conventional <pre><code>...</code></pre> structures.

Horizontal scrolling prevents long code lines from breaking the overall page layout on smaller screens.

The tab-size property controls how tab characters are displayed. It does not alter the underlying source code.

Some syntax-highlighting plugins generate additional nested elements and apply their own colours. The background and text colours shown here may need adjustment to match the highlighting stylesheet.

This snippet works best when the actual code container uses normal pre and code elements.

Layout and Responsive Design

6. Create a Responsive Two-Column Layout

A simple two-column arrangement can be useful for resource listings, product descriptions and related article sections.

.custom-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .custom-two-column {
        grid-template-columns: 1fr;
    }
}

Assign custom-two-column to a container holding the two elements.

CSS Grid creates two equal-width columns. The gap property controls spacing between them.

When the viewport width falls to 768 pixels or below, the layout changes to a single column.

The minmax(0, 1fr) expression helps prevent wide content from forcing a grid column beyond its allocated width. Child elements containing large tables or code blocks may still require their own overflow rules.

If the native WordPress Columns block already provides the necessary responsive behaviour, additional CSS may not be required.

7. Create a Responsive Card Grid

A resource website may need to display cheat sheets, tutorials or products in a grid without fixed column counts.

.resource-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 24px;
}

.resource-grid > * {
    min-width: 0;
}

Assign resource-grid to a container containing the cards.

The auto-fit keyword allows the browser to determine how many columns fit within the available width.

Each column aims to be at least 260 pixels wide, but the min() expression prevents the minimum width from exceeding the container on narrow screens.

This is suitable for a collection of downloadable WordPress references, plugin listings or tutorial cards.

The snippet controls layout only. Card backgrounds, borders and internal spacing can be added separately.

8. Create Consistent Card Styling

Resource cards often appear inconsistent when titles, descriptions and links contain different amounts of text.

A reusable card class can standardise their appearance.

.resource-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
    min-width: 0;
}

.resource-card .card-action {
    margin-top: auto;
}

Assign resource-card to each card container.

The flex layout arranges elements vertically. When cards are stretched to equal heights by their parent layout, margin-top: auto pushes the action element towards the bottom.

The .card-action class must be added to the relevant link or button wrapper.

This is a useful companion to the responsive grid in the previous example.

Avoid styling every Group block as a card. A dedicated class prevents the design from affecting unrelated page sections.

9. Prevent Wide Tables from Breaking Mobile Layouts

Technical articles often contain comparison tables with several columns. On mobile devices, those tables may be wider than the available content area.

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.table-scroll th,
.table-scroll td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d1d5db;
}

The table must be placed inside an element with the table-scroll class.

In the block editor, a Group block can provide this wrapper. Alternatively, a suitable table block wrapper may be given the class.

The minimum table width prevents columns from becoming excessively narrow. Horizontal scrolling allows mobile visitors to access the remaining columns.

For tables with only two short columns, a 600-pixel minimum may be unnecessary. Adjust the value according to actual content.

This approach is particularly useful for WordPress function references, command tables and plugin comparisons.

10. Make Images Responsive Without Distortion

Modern WordPress themes generally handle responsive images, but custom content areas may require additional protection.

.custom-content img {
    max-width: 100%;
    height: auto;
}

Assign custom-content to the relevant container.

The max-width declaration prevents an image from exceeding its available containing width.

Setting the height to auto preserves its intrinsic aspect ratio when the width changes.

WordPress already generates responsive image markup for many images, including srcset and sizes attributes. CSS sizing complements those mechanisms; it does not replace them.

Avoid applying height: auto to images deliberately cropped through fixed-height containers or object-fit rules without checking the intended result.

Buttons, Navigation and Interactive Elements

11. Customise WordPress Block Buttons

The standard WordPress Button block uses the .wp-block-button__link class for its clickable element.

A custom wrapper class lets a website maintain consistent button styling without affecting every button.

.custom-buttons .wp-block-button__link {
    background-color: #2563eb;
    color: #ffffff;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.custom-buttons .wp-block-button__link:hover {
    background-color: #1d4ed8;
}

.custom-buttons .wp-block-button__link:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

Assign custom-buttons to a parent container around the relevant Button blocks.

The hover state provides visual feedback, while the focus-visible rule creates an obvious keyboard focus indicator.

The code uses a simple colour transition rather than an animation that moves or resizes the button.

Some themes apply button colours through inline styles or more specific selectors. Those declarations may override this example.

12. Style Links Within Article Content

Links in long articles should remain distinguishable from ordinary text without becoming visually intrusive.

.article-content a:not(.wp-block-button__link) {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.article-content a:not(.wp-block-button__link):hover {
    color: #1e40af;
}

.article-content a:not(.wp-block-button__link):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

This targets links inside an article-content wrapper, excluding standard WordPress Button block links.

The underline improves identification without relying solely on colour.

The text-underline-offset property increases separation between the text and its underline.

On websites with linked images or navigation components inside the same wrapper, a narrower selector may be preferable.

The class deliberately limits the rule to the selected content area rather than changing links throughout the website.

13. Add an Underline Effect to Navigation Links

Navigation links can use a simple underline transition to indicate mouse interaction.

.custom-navigation a {
    position: relative;
    text-decoration: none;
}

.custom-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.custom-navigation a:hover::after,
.custom-navigation a:focus-visible::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .custom-navigation a::after {
        transition: none;
    }
}

Assign custom-navigation to the appropriate navigation container.

The pseudo-element creates a line beneath each link. Its horizontal scale changes when the link is hovered or receives keyboard focus.

The reduced-motion media query removes the transition for visitors who have requested less animation.

This technique is most suitable for simple horizontal navigation. Dropdown menus and mobile navigation components may require narrower selectors to prevent unintended underlines on controls.

14. Improve Keyboard Focus Visibility

Keyboard users need a clear visual indication of which interactive element currently has focus.

The following rule provides consistent focus styling for common controls inside a selected container.

.accessible-controls a:focus-visible,
.accessible-controls button:focus-visible,
.accessible-controls input:focus-visible,
.accessible-controls select:focus-visible,
.accessible-controls textarea:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

Assign accessible-controls to the relevant section or page wrapper.

The :focus-visible selector generally displays focus styling when keyboard navigation or other user-agent heuristics indicate that a visible focus indicator is appropriate.

An outline is preferable to removing the browser’s existing focus indication without providing a replacement.

Check contrast against the actual background. The selected orange may need adjustment for different themes.

This CSS improves focus visibility, but it does not correct missing keyboard support in custom JavaScript components.

Images and Content Presentation

15. Create Consistent Featured Image Cropping

Featured images with different aspect ratios can produce uneven card layouts.

The following snippet creates a consistent 3:2 image area.

.custom-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
}

Assign custom-featured-image to a container holding the relevant image.

The aspect-ratio declaration establishes a consistent visual shape.

The object-fit: cover property fills the image area while preserving image proportions. Content extending beyond the available area is cropped.

This works well for article listings, resource cards and product previews.

Do not apply it indiscriminately to technical screenshots, diagrams or images containing important text. Cropping could remove information that readers need to see.

16. Create a Styled Information Box

Technical articles often contain warnings, compatibility notes and important configuration details.

A reusable CSS class can distinguish these notices from ordinary article content.

.custom-info-box {
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 18px 22px;
    margin-block: 24px;
    border-radius: 0 6px 6px 0;
    color: #1e3a8a;
}

.custom-info-box > :first-child {
    margin-top: 0;
}

.custom-info-box > :last-child {
    margin-bottom: 0;
}

Assign custom-info-box to a Group block or other content container.

The left border creates a visual distinction without requiring decorative icons.

The first-child and last-child rules prevent excessive spacing inside the box.

A separate class could be created for warnings, using different colours and border styling.

The box should not depend on colour alone to communicate a serious warning. Include an appropriate text label such as Warning or Compatibility note.

17. Style Blockquotes for Reference Articles

WordPress supports blockquotes through the standard Quote block.

A more restrained appearance can work well for technical observations and quoted source material.

.custom-quote {
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #64748b;
    background-color: #f8fafc;
    color: #334155;
    font-style: normal;
}

.custom-quote p {
    margin-top: 0;
    line-height: 1.7;
}

.custom-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #475569;
}

Assign custom-quote to the Quote block.

The CSS removes the expectation that all quoted material must be italicised and uses a border to separate it from surrounding content.

The citation styling places source attribution on a separate line when a citation element is present.

This customisation is appropriate for quotation blocks, but ordinary technical warnings should use a note or warning container rather than semantic blockquote markup.

Forms and Mobile Usability

18. Improve WordPress Form Field Appearance

Forms may be generated by WordPress, a theme or a plugin. Their markup varies, but ordinary HTML form controls can be styled using a shared wrapper class.

.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="url"],
.custom-form input[type="search"],
.custom-form textarea,
.custom-form select {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid #94a3b8;
    border-radius: 5px;
    background-color: #ffffff;
    color: #111827;
    font: inherit;
    box-sizing: border-box;
}

.custom-form textarea {
    min-height: 140px;
    resize: vertical;
}

.custom-form input:focus,
.custom-form textarea:focus,
.custom-form select:focus {
    border-color: #2563eb;
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

Assign custom-form to the form or its containing element.

The rule gives common text-based inputs a consistent appearance while allowing them to fill their available container width.

The textarea retains vertical resizing.

The focus styling helps visitors identify the active field.

The input selectors can be expanded to include other appropriate field types, but checkbox and radio inputs should not inherit the same full-width styling.

Some form plugins apply highly specific styles. Review the actual field markup and existing rules before adding overrides.

19. Improve Mobile Typography and Spacing

Desktop typography settings do not always translate well to small screens.

Large headings, generous margins and wide padding can consume too much space on mobile devices.

@media (max-width: 600px) {
    .mobile-readable {
        padding-inline: 16px;
    }

    .mobile-readable h1 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
        line-height: 1.2;
    }

    .mobile-readable h2 {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem);
        line-height: 1.3;
    }

    .mobile-readable p {
        line-height: 1.7;
    }
}

Assign mobile-readable to the selected content wrapper.

The media query applies only when the viewport is 600 pixels wide or narrower.

The clamp() function establishes minimum, preferred and maximum heading sizes.

The viewport-relative preferred value allows some variation between narrow and wider mobile screens while retaining sensible limits.

Use this technique carefully with themes that already have responsive typography rules. The new declarations should complement the theme rather than introduce inconsistent heading sizes between page templates.

20. Create a Sticky Sidebar

A sticky sidebar keeps selected reference material visible while the visitor scrolls through a longer article.

This can be useful for documentation navigation, quick-reference links or a table of contents.

.custom-sticky-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
}

@media (max-width: 900px) {
    .custom-sticky-sidebar {
        position: static;
    }
}

Assign custom-sticky-sidebar to the sidebar container.

The position: sticky declaration allows the element to remain within view once its normal position reaches the specified offset.

The top property sets the distance from the top of the viewport.

The mobile media query disables sticky behaviour on smaller screens, where a fixed-position sidebar could consume too much space.

Sticky positioning depends on the surrounding layout. Ancestors with certain overflow settings can change the sticky scroll container or prevent the expected effect.

A sidebar taller than the available viewport may also behave poorly.

If the WordPress administration toolbar is visible, the top offset may need adjustment to prevent the sticky element from appearing beneath it.

CSS Specificity and Theme Compatibility

A custom CSS rule does not automatically override the CSS supplied by the active theme, page builder or plugin.

The browser determines which declaration applies using the cascade, including origin, cascade layers, importance, selector specificity and source order.

Consider the following rules:

p {
    color: #333333;
}

.article-content p {
    color: #111827;
}

The second selector is more specific because it combines a class and an element selector.

However, specificity is only one part of the cascade. An important declaration, a different cascade layer or an inline style may affect the result.

Avoid adding !important to every custom declaration. It can make future maintenance unnecessarily difficult and may interfere with responsive or accessibility styling.

Use browser developer tools to inspect the affected element, identify the competing rule and determine why the intended declaration is not being applied.

Theme-specific class names should be verified against the rendered HTML. A selector such as .entry-content may be present in one theme but entirely absent from another.

Troubleshooting WordPress CSS

Checking CSS in Browser Developer Tools

Most modern browsers provide an element inspector through the context menu or developer tools.

Select the affected element and examine its computed styles. The styles panel shows which rules match, which declarations are overridden and where each rule originates.

Temporary changes can be made directly in the browser to establish whether a selector or property produces the intended result.

These changes do not modify the WordPress website. Once a suitable rule has been identified, apply it through the site’s chosen CSS management method.

When debugging responsive behaviour, use the browser’s device emulation tools and test several viewport widths rather than relying on a single mobile preset.

Managing Custom CSS on a Growing WordPress Website

As a website accumulates customisations, CSS organisation becomes increasingly important.

A practical approach is to group rules by functionality, such as typography, cards, buttons, forms and responsive adjustments.

Use descriptive custom class names rather than relying entirely on broad selectors such as div, p or a. Broad selectors can unintentionally affect plugins, checkout pages, administration interfaces and third-party components.

For a website containing downloadable products and technical reference articles, a small set of reusable classes is often sufficient. Consistent card layouts, readable code blocks, responsive tables and clearly styled notices can serve hundreds of posts without requiring individual page-specific CSS.

Where a page builder provides global design settings, use them for site-wide typography, colours and spacing when practical. Reserve custom CSS for behaviours that are unavailable or awkward to configure through the builder.

Before removing older CSS, search the website for classes that may still depend on it. A rule that appears unused on one page could be required by a product template, archive or older article.

Custom CSS is generally straightforward to maintain when selectors are scoped carefully, naming is consistent and each rule addresses a specific requirement.