CSS vs. Post Formatting Issues
A lot of confusion when using WordPress for new users deals with formatting issues. When working with template pages or blog posts, one might put in a string of code to center items, add a border, etc. only to find that the change didn't process when reloading the page. What happened?
The big thing to remember is that the CSS stylesheet is the brain of the operations, so its commands can't simply be overridden. For example, if you are putting in some code to put a red border on an image in your post, but the stylesheet has some formatting to set all images to have a black border, more than likely the image will display with a black border.
The easiest way to make sure that what you want to see is actually what you get is to make the change in the stylesheet. Even though it sounds tricky, just learning a few simple tags can take you a long way.
Create a Red Border
Let's work with this same example. *You will need to work with the html post editor, and not the visual editor for this to work.
If all images are showing up with a black border, then there is code in your stylesheet that is telling it to format that way. If you just want a few images to show up with a red border, we can create a new division in the stylesheet, much like the following:.
#redborder img {border:1px solid red;}.
To add this to the CSS stylesheet, navigate to your Editor option under the Appearance tab on the left sidebar of your dashboard. Paste the code somewhere in the stylesheet page and update.
To break down the line of code a bit more, what we have done here is created a div ID called "redborder". When we call the "redborder" ID, anything that is an image (img) in that division will contain a border of 1 pixel in the colour red.
Now, navigate to the blog post or page that you would like to include the image with a red border within. Remember, you must work in the HTML editor page, and not the visual editor page (choose the tab at the top of the content box).
Before the image code, you will need to add the "redborder" division with closing division tags after:
<div id="redborder">
<img src="http://wordpresswebhosting.com.au/images/logo.jpg">
</div>
The image contained within this division should now show up with a red border. Now, whenever you want to contain any other image with a red border, just simply pull up this division again.