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.
18 Comments
Leave a Reply
Hi Tess,
I agree 1000% with your example above, and the idea that inline styling is a no-no. I also think that having a full blown WYSIWYG editor at the disposal of all content creators helps to make this problem worse for most websites.
If they see all these cool buttons and effects at their disposal, then it must be OK to use them right?
One thing web developers and site builders can do is to limit the amount of options that are available in the editor. Another is to educate the content creators about best practices as you described above. They may not have the time to learn to code themselves, but knowing what not to do can be a great first step.
Thanks for your feedback Robert!
As you say, it’s important to “educate the content creators about best practices”, and it’s the responsibility of both the content creator and the web developer.
The content creator must be willing to learn and implement it, and the developer must have the patience to explain the basics in a non-geek language.
Cheers,
Tess
Robert,
This is exactly what I do with the editor on my sites. I have set up a basic set of options in JCE and exported it. So when I set up a new site, I only need to import that and I am all set
Hi Svein,
That’s a clever idea, and something not all web developers even care about.
I know both you and Robert work with the Joomla content management system, and I’m wondering if you have a tutorial about how to set options in JCE? It would be a very interesting thing to share with other web developers, and I’d be happy to share it in a blog post on http://joomlatips.com.
Thanks,
Tess
I am sure we could come up with something
Would some screenshots and a little explanation do?
Yay! Absolutely! Please connect with me via email: tess at fortheloveofseo.com and we’ll talk.
I hope a quickly-coming blog is titled “How to build the CSS for your wordpress blog.” I’ve tried using HTML in a blog post to make a table, and WordPress has some way around this.
Otherwise, do you have any suggestions on finding documentation about making the most of WordPress or of getting around its enforced limits?
Tom
Hi Thomas,
Do you have any examples of CSS/HTML/styles you want to implement? An example will make it easier for me to give you good suggestions and tips.
Regarding tables – it’s a big no-no. Rather use “div” than “table” to create 2 or more columns for your content…except if it’s actually tabular data (numbers etc), in which case a table is the right way to go.
Usually some styling for this is already built into the theme, and if you go through the style.css file you might find something mentioning ‘column’ or something similar that can help you figure out which class to use.
Not sure if the above really answers your questions, but I’m looking forward to your examples and we’ll see what can be done.
Cheers,
Tess
The art of writing is communication. Writing codes is execution. You can have all the code-writing skills in the world but if your writing is rubbish….. Guess it depends if you are a coder who does some writing now and then or if you are a writer who leaves the coding up to those who code.
Hi Barry,
I agree – writers should write and coders should code…but I believe the two should work together to present content in a way that is up to modern web standards.
One clever way of doing it (which was suggested in a LinkedIn group for writers) is for the writer to write the content and then hand it over to an editor with the needed html/css skills.
That way the writer doesn’t even have to think about putting the content in the website system. Just focus on writing, and still know the content will be online in the most optimized way possible.
Cheers,
Tess
In my opinion, if you write for the web with any regularity, you need to know a handful of HTML tags and at least a very basic understanding of the mechanisms of CSS.
Although I can write standards-based, compliant HTML by hand for each post (and some snobs insist you must do it this way all the time), I achieve the same result one of two ways:
1) Writing in Microsoft Word using Styles to format the content, and pasting into WordPress visual editor. The key here is using Styles (e.g. Heading 2, List Bullet), which are lightning-fast to implement if you’re willing to learn keyboard shortcuts. Text you formatted in Word as “Heading 2″ or “Heading 3″ becomes or paragraphs. (Ditto for bullet lists, hyperlinks, etc.) And it’s all clean and attribution-free if you do it correctly.
2) Write your content using Markdown instead of HTML. Markdown is its own syntax (so yes, more learning) that replicates the functions of HTML. However, it’s easier to write (it involves fewer characters and doesn’t require closing tags) and is easier to read in its raw form. There are several text editors for Windows and Mac that include Markdown functionality, ie converting your Markdown to HTML in one click.
Hi Ashlee,
You’re spot on! I personally prefer html code, but I occasionally like using Markdown as it’s quick and easy (once you know it). Maybe it’s also easier to learn if you don’t come from a coding background?
Word of warning though: when using Word it’s too easy for writers to just copy/paste the text from a Word document and paste it into a WYSIWYG/visual editor. Without viewing the html code after that.
That has given me and website owners too many headaches trying to clean up the messy code that Word always creates (not shown in the visual editor, but when viewing the html of the article). It can break a whole page without the writer having any idea about it.
Do you have any recommendations for Word users so this doesn’t happen?
Love and light,
Tess
I guess I take my tech-savvy for granted. But my 3 main guidelines for Word use for HTML authoring are as follows:
1) If you’re going to convert the Word document to HTML yourself, you need to know HTML so you can double-check the code.
2) In Word, use Styles to format text, as opposed to changing fonts etc. Styles, Styles, Styles. So if your blog uses H3 for subheads, you’ll format your subheads as “Heading 3.” Save the file as a regular Word document and copy its text (Never save the document in Word as a webpage.)
3) In WordPress, use the “Paste with Word” button. (I forget what the equivalent is for Dreamweaver, but I remember there’s a not-entirely-intuitive way to paste Word so it yields clean code.)
That’s it. For me, using Word is not a substitute for HTML knowledge, but a faster method than having to manually type it out.
Thank you Ashlee!! That is an amazing reply!
Thank you so much for making the effort to outline the process – I’m sure this will help a lot of people!
Love and light,
Tess
I am so glad I came across this blog post. Tess, you’ve taken some of the stress out of what I’m preparing to do, which is launching my freelance copywriting career. I am not a “geek” – although I have the utmost admiration for them. I am a copywriter in the making who is currently studying writing for the web. It’s fascinating learning the different ways of communicating and marketing through different media. However, actually constructing a website remained a mystery so I enrolled in a basics class at the local technical college. Then one for WordPress. Both left me with a smattering of ignorance and not a lot of confidence. You all helped to put some of it into perspective.
Thanks so much.
And Tess, I hope you are enjoying Cape Town! I lived there for 18 years and worked in the marketing department of The Argus. It was awhile ago, but it was the work I enjoyed the most! We lived in Tamboerskloof. Judy
I’m so happy you feel less stressed after reading my blog.
It’s exactly what I’m trying to do here – take away the confusion and frustration for everybody working with SEO (even non-geeks).
Best of luck with your copywriting career! It’s all about doing as much research as you can, and never stop studying. I spend 1-2 hours every day to read as much as possible about a specific topic I’m interested in or curious about. It’s a big investment of time, but it pays off in the long run as you can do your work better and faster.
I love Cape Town! Been here for 7 years now, and live not far away from Tamboerskloof.
Love & light,
Tess
Nice Article. The subject is appealing and true of course. Thoroughly explained articles are the most helpful ones. Very nice examples indeed
Thanks Bobby!
The topic sparked a bit of a debate in a few LinkedIn groups, which was very interesting.