This is an article on how to add CSS in WordPress using inline CSS. Inline CSS is useful for styling specific elements within a post, page, or block,  especially when you want to apply quick, one-off styles.

What Is Inline CSS?

Inline CSS means you apply CSS styles directly inside HTML elements using the style=”” attribute.
Example:

<p style=”color: red;”>This is red text.</p>

This is different from external or internal CSS, which are stored in theme or plugin files.

When Should You Use Inline CSS?

  • You want to style a specific part of content in a post/page.
  • You don’t want to touch theme files or the Customizer.
  • You need quick, one-off styles.
  • Not recommended for site-wide styling or maintainable design.

Step 1: Log in to Your WordPress Dashboard

  1. Go to yoursite.com/wp-admin
  2. Enter your username and password.
  3. Click Log In.

Step 2: Open the Page or Post Editor

  1. Go to Posts → All Posts or Pages → All Pages.
  2. Click Edit on the post or page where you want to add inline CSS.

Step 3: Switch to HTML Editing Mode

Depending on your editor type (Gutenberg or Classic):

For Gutenberg (Block Editor):

  1. Click on the block you want to style (like a Paragraph block).
  2. Click the three vertical dots (⋮) in the block’s toolbar.
  3. Select “Edit as HTML“.

For Classic Editor:

  1. Click on the Text tab (top right of the content editor) to switch from Visual to Text (HTML mode).

Step 4: Add Inline CSS

Now add your HTML with inline styles.
Example:

<h2 style=”color: navy; text-align: center;”>Hello World/h2>

<p style=”font-size: 18px; line-height: 1.6; color: #555;”>

  This paragraph has custom font size and color using inline CSS.

</p>

<a href=”https://example.com” style=”background-color: #ff6600; color: white; padding: 10px 15px; text-decoration: none; border-radius: 5px;”>

  Click Here

</a>

Step 5: Preview and Update

  1. Click Preview to check how the content looks.
  2. If everything looks good, click Update or Publish to save your changes.

Optional: Adding a <style> Block in a Page/Post

If you want to apply styles to multiple elements inside a post, you can embed a <style> tag (use sparingly):

<style>

  .custom-button {

    background-color: blue;

    color: white;

    padding: 10px;

    border-radius: 5px;

    text-decoration: none;

  }

</style>

<a href=”#” class=”custom-button”>Styled Button</a>

Some themes or page builders may strip out <style> tags or certain attributes for security. Always preview and test.

When Not to Use Inline CSS

  • For global styles — use the WordPress Customizer or a child theme instead.
  • To style the entire site — inline styles are not reusable and are harder to maintain.
  • If using a visual page builder — it likely has built-in styling options.

Related Posts