How To Add CSS in WordPress Using Inline CSS

Bywsadmin

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.

Similar Posts