# Custom CSS for Specific Blocks, Loaded Only Where Used

> Lets you write extra CSS for individual block types (for example tables or quotes) that WordPress prints only on pages that actually contain those blocks.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: css, performance, block-editor
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/per-block-css-only-when-used/

## Code

```php
// Block name => CSS for that block.
$wpide_block_css = array(
    'core/table' => '.wp-block-table table{font-size:.95em;}.wp-block-table th{text-align:left;}',
    'core/quote' => '.wp-block-quote{border-left-width:4px;padding-left:1.25em;font-style:italic;}',
    'core/code'  => '.wp-block-code{border-radius:6px;padding:1em 1.25em;overflow-x:auto;}',
);

add_action( 'init', function () use ( $wpide_block_css ) {
    if ( ! function_exists( 'wp_enqueue_block_style' ) ) {
        return;
    }

    foreach ( $wpide_block_css as $block => $css ) {
        $handle = 'wpide-block-' . sanitize_key( str_replace( '/', '-', $block ) );

        wp_register_style( $handle, false, array(), '1.0' );
        wp_add_inline_style( $handle, wp_strip_all_tags( $css ) );
        wp_enqueue_block_style( $block, array( 'handle' => $handle ) );
    }
} );
```

## Notes

Works best with block themes, or classic themes that load block styles separately. Edit the CSS per block name.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Custom CSS for Specific Blocks, Loaded Only Where Used" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/