You’ve heard it before, and you’ll almost certainly hear it again: content is king. Whether you’re a full-time writer or just writing to share with your followers, customers, and potential customers, you should know by now that there’s nothing more important in content than creating something worthwhile.
There’s more to it than just expressing your ideas, though. No matter how well you word your piece, no one wants to spend time on a site or article that looks cluttered and congested. Breaking up your text with headlines and images can be a great start, but taking the next step in formatting can go a long way toward creating a clean and attractive page or blog post.
If you’ve never delved into coding before, a page full of code can certainly be intimidating. Don’t fret, though; with a few tips and tricks, you can take control of your site and get your page looking as good as it does in your mind’s eye.
We’ve already gone through some WordPress basics to help out with HTML and CSS, but here are some more to get your next blog post or new page looking nice and clean:
Use the Right Canvas
This isn’t so much an HTML or CSS trick as it is making sure you’re working on the proper foundation. Editing code in a word processing program like Word can be confusing, and can even have unintended formatting consequences in your piece.
A good text editor can help you stay organized as you work on things. Sublime Text, for instance, is a great program which not only allows you to keep things neat, but can even color code to help you stay on top of things.
Get Organized with Properties
When you’re reading a piece as a viewer, nothing is quite as obnoxious as an image that breaks up text or clutters the page. To move an image to the left or right side of a paragraph, you need to use style attributes made up a CSS property and its value.
Find the HTML image tag in the code to add the style attribute (without removing any other info, especially if you’re not sure what’s what). Use the “float” property to move the image to either the left or right (its value).
An example: <img style=”float:right;”>
In this instance, the image will be shifted to the right side of the area it’s in. If your image is part of a paragraph of text, it will float neatly on the right side of the text.
Give Yourself Some Space
Now that your image is in the correct place, you can go ahead and clean things up a bit. In many platforms, you’ll see that the text isn’t giving your image any space. This creates a cluttered feel, but can be easily rectified by adding a margin or padding property to the style attribute of the image tag.
Keep in mind that if you’re using a border, padding creates space inside the border and margin creates space outside of it. If there’s not a border or background color, though, these will look the same.
In this example, the image will be on the right of the element (text) with five pixels of space below it and 10 pixels of space to the left. These numbers can be easily altered by changing the numbers next to px. Just remember that the numbers start above and go clockwise (top, right, bottom, left).
Spacing an element in this way will only work on elements like images or other block-level elements where the height and width of the element have been specified.
While using a style attribute (as opposed to placing CSS properties and their values in a CSS file) is not best practice to web developers, it is recommended for most automotive dealer websites because there is often no access to the CSS files on their platform. It’s a trick to get back some stylistic control that has been otherwise taken away from them by some platforms.
While these quick tricks also won’t make you a magical code ninja, they’ll certainly help you create pages that are more appealing for your audience. Your audience may not consciously recognize the difference, but they’re sure to appreciate your neatened up space!