If you write content for a website, you should understand basic CSS and HTML coding. It’s not as scary and complicated as it might seem, and you’ll be proud of yourself next time you create an article that is up to the standards of the web (and your web developer will thank you).
Photo credit Sorensiim (Creative Commons)
What you want to do, and why you shouldn’t
So you want to add some nice styling to the text and images in your blog post? Some red text, some bigger text, maybe a border around your image?
It’s easy to do with a click or two in your website’s article editor…but, please do not do this! Unless you just want to make your text bold or italic, do not style anything via your editor.
If you do, you’re creating something called “inline styling”, and it goes against web development standards. With years of experience in web development and technical SEO, I know how much trouble it can cause the website owner later. The styling of your content should (almost) always be based in your CSS files.
Why learning CSS and HTML is so important
When the time comes to change the design of your whole website, that’s when you find out how important well-coded content is. If you have a ton of inline styling in each article, you’ll give your web developer nightmares…and yourself a lot of extra work (because you’d be the one going through all articles to change it).
A practical example
Imagine that you’ve manually styled all your headings with a specific color and size, then this is how your HTML code would look (feel free to open one of your own articles now, to check the coding):
<p style=“color:#D9671C; font-size:14px;”>This is a heading above a paragraph</p>
But, a few months from now, someone decides that the website should have headings in a different color and size. Congratulations..! You now have to change the code of every heading in every article. You’ll kick yourself.
Instead, you should’ve coded your headings like this (using h2, h3, h4, etc):
<h2>This is a heading above a paragraph</h2>
…and have the color and size in your CSS file (for example style.css):
h2 {
color:#D9671C;
font-size:14px;
}
Then it’s only one place to change it (in your CSS file), and your whole site will be changed. Much easier!
What’s the status of your website?
View the source of a few of your articles, and check the coding. If your articles already look pretty from a coding point-of-view, pat yourself on the back and give yourself some muffins and coffee.
I hope this blog post gave you some inspiration to learn basic CSS and HTML, and that you’ll double-check the code of your articles from now on?
If you have any questions, opinions or tips, don’t hesitate to let me know in the comments below. Want more tips like this one? Subscribe to our updates via email.
