A WYSIWYG is a blunt instrument

Yeah so I am obviously more than a little bias on this and have somewhat a headstart regarding building websites as it’s my day job. However in my opinion HTML and is styling sister CSS should be one of the most important tools to anyone that creates content online. HTML/CSS are some of the fundamental building blocks of the web and they are not likely to go away anytime soon (even in internet time). Now I’m not talking about the kitchen sink here such as floats, background-colors, clearing divs and valid xHTML strict markup, but the basic tags and styling elements like

<li style="color:red;padding-bottom:10px;list-style-type:disc;"> 

that can bring to life a blog post, a news item, an article or basically any website based around a CMS. Most CMS’s allow for a html view as well as a visual editor such as wordpress’s own:

More often the tools for managing and publishing content online are handed back to the people that operate within the company rather than a web design/development agency that built the site in the first place. With the web agency model changes can cost alot and take a long time for the request to be carried out. This handing back control is a great thing, meaning errors are fixed more quickly and more content is produced by the people within the organisation as barriers to production are reduced. But also quite often we find the the user wants more than what the visual editor allows, headings or fine manipulation of the content (image sizes, additional padding or unwanted content that appears with embeddable content). Now it’s possible to extend these visual editors, add more buttons, more rules in the main css file. However this is simply an abstraction and can’t possibly cater for all eventualities.

The answer in my opinion is that a basic understanding of HTML and CSS is an essential tool for employees and user generated content in general. Most comment textareas allow for simple styling, this can make your comment stand out, become more readable or attractive, as well as your own website’s content. How many times have you seen blog posts with too much space or elements buffering up against one and other (this may just be me though) and been distracted by it?

I am not going to go into HTML 101, there are plenty of resources out there for that. But here are a bunch of tags and css styles that I think should be part of any content producers toolbox:


<h1>This is the largest heading</h1>
<h2>This is a slightly smaller heading, maybe a sub-heading</h3>
<h3>This is an even smaller heading, maybe a section heading</h3>
<h4>This is probably a sidebar heading</h4>


This is the largest heading

This is a slightly smaller heading, maybe a sub-heading

This is an even smaller heading, maybe a section heading

This is probably a sidebar heading

A guide to heading hierachy:

Text formatting

<p> – A paragraph, most default css will add padding to the bottom of a paragraph, so if your content is publishing as a huge block of text the WYSIWYG is probably just adding one <br /> (a line break rather than a paragraph) – you may need to click to HTML view and remove the br’s and wrap each paragraph in <p> and closing with </p> – most HTML tags need to wrap the content they are containing, otherwise the browser will continue in that context, so no closing tag and the rest of the page would be considered a paragraph and potentially confuse the browser

<br />A line break, see above, one of the exceptions a this is self closing

<strong>make the content bold <strong>this is bold</strong>

<em> -make something italic <em>this is italic</em>

<ul> – a list container

<li> – a list item

combine them for

<li>list item</il>
<li>list item</il>


  • list item
  • list item

<a> – a link, one of the building blocks of the web, this  tells the browser where the text inside the <a> where the link should point to <a href=”http://www.google.com”>Google.com</a> – here we see the first attribute for a tag, some additional information informing the browser what it should do with that tag. in this case the link should point to Google.com

<img> – an Image  – maybe it’s too big and you don’t/can’t/won’t go to an image editor (by far the best method – but that’s another blog post) so <img src=”mygreatphoto.jpg” width=”150″ /> change the width and it will scale NOTE uploading your 10 megapixel holiday snaps and resizing to 100 pixels is not cool, also be careful of aspect ratios, if the height and width attributes are both present changing one with stretch the image.

<blockquote> – put something in a quote


<table> – if you want to display some data perhaps many CMS’s don’t have great or any table editors. Now the code is a little tricky but basically it follows something like this (not strictly accurate, nor standards compliant but we have to start somewhere and this will work):

<td>Heading one</td>
<td>Heading two</td>
<td>Value 1</td>
<td>Value 2</td>


Heading oneHeading two
Value 1Value 2

TR are rows and TDs cells much like excel.

Right so that’s the basics of HTML but what of CSS, now this is a bit more of a nebulous beast, but we can cover some of the basic styling concepts, now ideally CSS would go in a stylesheet  – a file linked within the webpage that sits of the server and isn’t really accessible for editing within the CMS – so for this we will need to inline styling (certainly not ideal, markup and styling where possible should be separated as this makes for cleaner, efficient, faster and more accessible code, but we are talking about people with access only to the CMSs hre). The CSS can be applied to the directly HTML tag but use of the style attribute, e.g

<p style="padding-bottom:10px;">some text with some extra padding</p>

this will add another 10 pixels (the default mesurement for much web design)

<p style="color:red;">I'm red text</p>

colours the text red, note the american spelling the code is called a HEX color and is a representation of any of 16 million colours (thus a code and not a name). See here for a nice long list of colours you can also use.


I’m red text

Alignment: maybe you want to align some text, or an image.

For text:

<p style="text-align:left;">align left</p>
<p style="text-align:center;">align center</p>
<p style="text-align:right;">align right</p>


align left

align center

align right

For images:

<img src="myaweslomeimage.jpg" style="float:left;" />, <img src="myaweslomeimage.jpg" style="float:right;" /> 

note the text will ‘wrap’ around the image.

Font size, increasing the font size can be something often the CMS will not allow, this can be mostly to ensure there is a consistency in the output of the content, the same can be said for the font. But there may be a legitimate reason for this being required:

Font size:

<p stlye="font-size:16px;">A bigger piece of text</p>

note that most text on the web will be around 12-14px depending on the site. So 15px 16px 17px will be ‘large’ text, 12px, 11px 10px will be ‘small’ text.


A bigger piece of text

Font type, now this is one to be taken rather carefully, not only are there very few fonts to choose from (for far too many reasons that I care to go into lest I bore you more that I already have) but using too many fonts on a size can be confusing and not very pretty. However a well placed header in Georgia can really bring the content out:

<h2 style="font-family:Georgia,"Times New Roman",Times,serif;">A serif heading</h2>
<h2 style="font-family:Arial,Verdana,Helvetica,sans-serif;">A sans-serif heading</h2>


A serif heading

A sans-serif heading

The reason we put three or for fonts down is because the user’s computer may not have that particular font available so in that case the next font on the list is used and so on.

Now that’s really only a taster, but for many purposes you won’t need too much more, the WSYIWYG although an excellent tool, is a blunt instrument, it tries the best it can but for those instances where you need a more precision instrument, HTML and CSS is the best way to go, click thew HTML view and delve about, there will be a lot of stuff in there and it can be quite daunting, but with practice the results will be better styled and robust content with less rendering errors.

Common ie6 fixes

Like many I tend to come across ie6 rendering bugs and like many have developed my own (read others) set of techniques to overcome theme.

Correct doctype, with full correct DTD, transitional or strict (solves so many issues without having to change anything):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Reset stylesheet (via Eric Meyer) the goal of a reset stylesheet is “to reduce browser inconsistencies” see here for a deeper explanation, again solves many many issues and enables a new build to start from the same starting point on every browser by resetting common element behaviour.

/* remember to define focus styles! */
/* tables still need 'cellspacing="0"' in the markup */
blockquote,q{quotes:"" "";}

And some other fixes I have picked up

/* -------------------- */
/* =IE6 FIXES */
/* ------------------ */
img {border:none;display:block;}
/*display block to avoid IE6 whitespace on inline elements
due to baseline spacing (for descender space),i.e. images*/

.inline {display:inline;}
/*used to fix IE6 double margin bugs*/

.haslayout {height:1%;}
/*used to fix IE6 haslayout bugs*/

.button {overflow:visible;display:block;}
/*add this class to form buttons with issues*/

a, a:link, a:visited, a:hover, a:active {color:red;}
/*link styles should be in the order LVHA esp for IE6 to display them well*/

Also, avoid/beware overuse of widths, heights, margins (esp with floats), too many position: relative’s (esp. nested position:relatives), widths + heights + padding + margin (box model issues, add padding/margin to fixed-width child elements). There are many more issues and many other ways to solve them, but generally most can be solved via fairly well documented locations, a good one here, otherwise search on google.

Adiós ie6

Sorry ie6, your names not down your not coming in.

ie6 is ancient, crap and quite frankly I can’t be bothered, not when it’s my own site. I deal too much with that in my day job to be arsing about with rendering bugs and bad programming in my own time.

So for ie6 users I have applied “Aggressive Graceful Degradation” via Andy Clarke and his Universal Internet Explorer 6 CSS.

The site is still very accessible via IE6, but just no visual goodies. There have been too many advances in css for me to stick with 6 year old knowledge, to allow me to grow professionally I need to be able to play with the new toys. I mean it’s not too much to ask for li:last-child or input[type=”button”] is it?

So if you are an ie6 user, just think of it as a realllly minimalist version of the design, or if you want to see websites not framed via technology from the last century upgrade now.

For those not using satan’s own browser, screengrab below:


2023 2022 2021 2020 2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004