Inline Styling example capture for troy uyans post

Inline CSS Styling in WordPress

WordPress by default strips out any code in posts and Pages that may be considered “code” or malicious. Yet, there are ways to add color, splash, and fun to a WordPress post or Page without WordPress Plugins to overwrite the default functionality of WordPress. Here’s a quick how-to of what you can do to jazz up your posts and Pages (and when not to) on WordPress.com or WordPress.org without using a Plugin or going into the CSS file.

The best way to explain inline CSS is to just do it. So here we go. Having a basic knowledge of at least how CSS works is probably needed to get some sense of the things in this article. But I will show you the code for a reason! So copy, paste, and reference all you like! These are proper working examples of inline CSS.

<h2>Sample Header</h2>

Sample Header

We have a level-2 header, no problem at all.

<h2 style="color:red;">Sample Header</h2>

Sample Header

Here’s your first example of inline styling. So our h2 tag now has style added to it with the attribute of color:red;. The style code basically tells the browser that this HTML element has additional CSS to it than what it has so far loaded from the stylesheets. Then color: is the CSS font-color property with the value of red;. Colons denote switching from the property to the value and semi-colons denote your done with that attribute.

Remember as well that inline code is local to the element, so this style info is only applied to this particular h2 element. CSS also has keywords like “red”, “green”, “blue”, etc. for common colors, but you can make your inline colors any shade you want with the hexadecimal code.
I want to switch to a medium blue font with a light grey background for my h2 element.

<h2 style="color:#0066ff;background-color:#dddddd">Sample Header</h2>

Sample Header

You’ll notice the background color spans the entire width of the content area. You may want this, but it still looks a little weird flush against the left side of the grey box. We add padding.

<h2 style="color:#0066ff;background-color:#dddddd;padding:12px;">Sample Header</h2>

Sample Header

You’ll have to experiment with it, but you can try to find a better width for your background.

<h2 style="color:#0066ff;background-color:#dddddd;padding:5px;width:170px;">Sample Header</h2>

Sample Header

Keep in mind my examples here are a little extreme in terms of how much inline you’re using here, but it’s just to get the point across that the full power of CSS is available for your element to get it to fit into the page. I should warn against potential abuse of this power, crazy colors all over the place is not the way to go, however tiny changes to particular elements like adding padding to a header or list item are perfect uses of inline CSS.
Here are a few last code examples of using this for different elements.

<h2 style="color:white;background-color:#666666;padding:5px;width:170px;border-radius:10px;border:2px solid black;">Sample Header</h2>

Sample Header

<ol style="list-style-type:upper-roman;font-size:1.2em;">
	<li>Jupiter</li>
	<li>Diana</li>
	<li>Vulcan</li>
	<li>Vesta</li>
	<li>Cupid</li>
	<li>Maia</li>
</ol>
  1. Jupiter
  2. Diana
  3. Vulcan
  4. Vesta
  5. Cupid
  6. Maia
<ul style="list-style-type:square;">
	<li style="color:red;">Red</li>
	<li style="color:green;">Green</li>
	<li style="color:blue;">Blue</li>
</ul>
  • Red
  • Green
  • Blue

The issue with Inline CSS is it’s really only used for one-off occasions! You would never really use this to apply a consistent feel across all your pages. Its best use is for quick snippets of localized CSS specifically for the section of the page or Post you’re working on.

But nevertheless, enjoy the potential!

For More Information

Advertisements

4 thoughts on “Inline CSS Styling in WordPress”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s