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.
We have a level-2 header, no problem at all.
<h2 style="color:red;">Sample Header</h2>
Here’s your first example of inline styling. So our
h2 tag now has
style added to it with the attribute of
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 style="color:#0066ff;background-color:#dddddd">Sample Header</h2>
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
<h2 style="color:#0066ff;background-color:#dddddd;padding:12px;">Sample Header</h2>
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>
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>
<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>
<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>
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!