Although I cover blogging in some depth in my online journalism book, I thought I should write a supplementary section on what happens when you decide to start customising your blog.

Specifically, I want to address 3 key languages which you are likely to encounter, what they do, and how they work.

What’s the difference? HTML, CSS, and PHP

Most blog platforms use a combination of HTML, CSS and PHP (or similar scripting language). These perform very different functions, so it saves you a lot of time and effort if you know which one you might need to customise. Here’s what those functions are:

• HTML is concerned with content.
• CSS is concerned with style.
• And PHP is concerned with functionality.

If you want to change how your blog looks, then, you will need to customise the CSS.

If you want to change what it does, you will need to customise the PHP.

And if you want to change how content is organised or classified, then you need to change the HTML.

All 3 are interrelated: PHP will generate much of the HTML, and the CSS will style the HTML. I’ll explain more about this below.

But before I do so, it’ll help if you have 3 windows open on your computer to see how this works on your own blog. They are:

1. On your blog, right-click and select ‘View source‘ (or a similar option) so you can see the HTML for that page.
2. Open another window, log in to your blog, and find the customisation option (you may have to Google around to find out where this option is). You should be able to see a page of code.
   • If you have a blog hosted on WordPress.com, there is no customisation option beyond choosing themes and widgets, although you can pay for the ability to customise CSS.
   • If you’ve paid for that, or are hosting a WordPress blog yourself, this page has more on customising.
   • You can find details on customising Tumblr here,
   • and customising Posterous here.
   • And Google provides a range of help pages for customising a Blogger blog.
3. Open a third window which you will use to search for useful resources to help you as you customise your blog.

Understanding your content: HTML

HTML (HyperText Markup Language) describes content. The ‘markup’ bit means that it marks up content in the same way as a sub-editor might mark up a reporter’s copy.

It tells a browser whether a particular piece of content is a header, a list, a link, a table, emphasised, and so on. It tells you if something is an image, and what that image represents. It can even say whether a section of content is a piece of navigation, a header or footer, an article, product, and so on.

Look at the first window you opened where you are viewing the source of a page on your blog. You will see a mix of HTML and other code.

HTML is written in tags contained within triangular brackets, also known as chevrons, like this: <>. Here are some examples:

• The <p> tag indicates a new paragraph.
• <ol> indicates the start of an ordered (i.e. numbered or lettered) list
• <ul> indicates the start of an unordered (i.e. bullet) list
• <li> indicates one list item within a list.
• <table> says that the content that follows will be contained in a table

And so on. If you see a tag that you don’t recognise, Google it.

Meaning, not style

HTML can indicate importance, too:

• <h1>, for example, indicates a ‘first level’ header – or the most important header of all.
• <h2> indicates a header which is slightly less important, and a <h3> header is less important, and so on, down to <h6>.

Editorially, the use of header tags should be pretty easy to understand:

• <h1> is likely to be the title of the publication or website
• <h2> may be used for all your headlines
• <h3> may be used for subheadings, or intros.
• <h4> might be used for box out headings
• And so on.

You don’t have to use them all – but you should use them consistently. Because doing so allows you to change the appearance of all your headlines (or subheadings, etc.) at the same time, by simply changing the style that is applied to anything that uses the HTML <h2> (or <h3>, etc.).

Some HTML will be applied to your content automatically by your blogging platform. Whatever you type in your title box might be published inside <h2> tags. The title you give your blog will be published within <h1> tags.

But when you type your post content you may be able to select from a drop-down menu of header categories such as ‘Heading 3’. You can also choose to format content in a bullet or numbered list, bold or italic, or make text into a link.

Whenever you do this, remember that HTML is being created and that you can style it accordingly (with CSS – covered below). So use formatting consistently – make subheadings the same type of header, for example.

If you are using bold or italic, by the way, it is worth noting how the tags that are used make an important point about HTML:

• <em> indicates that a word is emphasised. The word will look italic, but the distinction is important: HTML describes the content, not its appearance.
• <strong> indicates a strong emphasis. This time the word will look bold, but it doesn’t have to – as we’ll come onto when we look at CSS. More detail on the subtle distinction between the two forms of emphasis can be found here.
• Previously designers would use the tags <i> (italic) and <b> (bold) to achieve the same effect – and you may come across these tags – but the change was made because HTML is not meant to concern itself with appearance. Likewise tags such as <font> were created to allow designers to control the appearance of content, but its use is now discouraged.

Attributes and values

More information about a particular piece of content can be provided by a tag’s attributes and values, like so:

<a href="http://paulbradshaw.wpengine.com">

In this case:

• <a> is the tag
• href is the attribute
• “http://paulbradshaw.wpengine.com&#8221; is the value. Values are normally contained within quotation marks.

You’ll notice that only the tag is turned off – with </a> – which is an easy way to identify it.

Here’s similar code for an image:

<img src="http://paulbradshaw.wpengine.com/logo.png" />

Again, the <img> tag tells us that this is an image, but where does it come from? The src attribute directs us to the source, and the ‘value’ of that source is “http://paulbradshaw.wpengine.com/logo.png&#8221;.

A single tag can have multiple attributes and values. An image, for example, is likely to not only have a source, but also a title, alternative description (both of which are often legal requirements and improve SEO – see comments), and other values, like so:

<img src="http://paulbradshaw.wpengine.com/logo.png" alt="OJB logo" title="Site logo" />

Classifying sections of content: div and span

The use of attributes and values is particularly important when it comes to the use of the <div> tag to divide content into different sections.

Your blog, for example, might use the following HTML to separate content (i.e. blog posts) from navigation and other page elements such as headers and footers:

<div id="header">

<p>Here is the header.</p>

</div>

<div id="content">

<h2>Post title</h2>

<p>Here is a blog post.</p>

</div>

<div id="footer">

<h6>My blog, my place.</h6>

</div>

The same tag – <div> – is used for each part, but they all have a different ‘id‘ value. Chances are you’ll come across these when you start to customise the CSS.

Customising style: CSS

CSS (Cascading Style Sheets) describes the style of your content. It may, for example, say that:

• Links should be green and bold, with a black background.
• Images should have a 1 pixel grey border around them.
• Bullet lists should use a small image for each bullet.
• A particular section of your blog (using the HTML <div> tag should be 500 pixels wide
• Headings (using the <h1> tag) should be red and large

CSS is the most likely piece of code that you will need to customise – and certainly the easiest to. The problem is finding it and understanding it.

To do that, it’s best to play around with your own site’s CSS. So go to the second window you opened earlier where you can customise your blog’s code. You are looking for some code inside curly brackets (try doing a search for ‘{‘) – something like this*:

The ‘body’ bit before the curly brackets refers to a HTML tag – which we’ll come on to later. It doesn’t have to say ‘body’, and indeed there will probably be quite a few bits of CSS code that relate to different HTML tags.

To understand what this is styling, switch to the second window showing the HTML of a page on your blog. Now search for ‘body’.

Somewhere in that HTML should be a <body> tag. Everything after this will be styled by that CSS – until the tag is turned off with </body> (normally right at the end of your page: everything that is visible on your webpage starts with <body> and ends with </body>).

If there is no style for <body>, look in the CSS for h1, or h2 (headings), or li (list items), and then look for the same in the window showing the HTML.

Your CSS will probably have a number of styles for different HTML tags, and a number of different things that are being styled (e.g. color, background, typeface, size, etc.)

Hexadecimal codes

Colour is an easy thing to customise, and a good place to start. Colour is normally described by a hexadecimal code. This is a hash symbol followed by 6 (hence the ‘hexa’ part) characters, like #000000 (black) or #FFFFFF (white).

The characters describe the amounts of red, green, and blue light needed to paint the colour.

#000000, for example, says ‘use 00 amount of red; 00 amount of green; and 00 amount of blue light’. The result of using no light at all is, of course, the colour black.

In some cases you might see fewer than 6 characters, such as #000 or #fff – but that’s just a shorthand way of writing a hexadecimal code (possible where characters are in pairs).

If you google ‘hexadecimal codes’ you’ll find a number of resources that provide a list of different codes and the colours that they describe. Likewise if you’re using image editing software like Photoshop or Fireworks you can click on a colour and find out the hexadecimal code for that colour.

Customising colour

So for one of your styles (body is best, or h1), make a note of the colour and then replace it in the CSS code with a colour you’ve found from one of those reference pages – preferably one that’s bright and easy to spot, such as #99FF33 (lime green).

Save the changes, and then visit a page on your blog to see the results. If it’s worked you should now have lime green text or a lime green header (or the colour you chose).

And you should now have an idea of how to customise the rest of your site: it’s basically a case of:

1. Deciding where the content is that you want to customise – in header tags, or linked text, or a particular <div>, for example;
2. And editing (or writing) the CSS to style content in that tag.

If you can’t see any changes then one of three things has happened:

1. Your page hasn’t refreshed properly and you’re looking at a ‘cache’ from your computer rather than the internet. Try refreshing again or use another browser.
2. That page doesn’t use the HTML tag that you just styled – check the source HTML to see if it does.
3. Or there is another style which is ‘overriding’ the style you just changed. That’s what we come on to next.

The last tag is the most important: the ‘cascading’ part of CSS

CSS works by looking for the last tag that has been used. So although you might have a style for <body> that specifies how your content looks generally, you might also have another style for <p> which specifies how paragraphs look.

Because <p> is used after <body> in the HTML, that style will take priority when it comes to applying styles.

Another way to think about this is the way that your browser reads the HTML.

When it comes to the <body> tag it looks for the style that tells it how to display anything within that tag…

But then it comes to <p> and looks again. If there is a <p> style too then it will use that instead (if there’s no style for <p> then it will stick with the style for <body>).

This pattern continues with every HTML tag that the browser comes across. The most recent tag takes priority over tags that were used before.

However, it only takes priority where there are clashing styles.

So if your <body> style specifies the background colour, and the <p> style specifies the font, your browser will use the font from one style and the background colour from another.

But if the  <body> style and the <p> style both specify the background colour, your browser will use the background colour specified in the most recently used tag, which will be <p>.

Nested styles – more ‘cascading’ CSS

In addition to the parts of CSS which style basic HTML tags, there will probably be more specific styles that only customise content if it sits within a number of different tags.

For example:

ul a {

color: #000000

}

Here we see some CSS which looks for two tags: <ul> and <a>. Specifically, it is only looking for links (<a>) within unordered lists (<ul>). Links which are not in unordered lists will not be affected by this style.

A particularly common area where nested styles are used is when the HTML uses a <div>.

The <div> tag is typically used to classify different areas of the page. You might find <div id=”content”>, <div id=”navbar”>, <div id=”footer”>, and so on.

This can then be used to style content in each area differently like so:

A style which begins with the hash sign, is a <div id>, like that in this HTML:

A style which begins with a full stop is a <div class>, also shown in the images above.

If you are trying to customise how content works, and it’s not working, this might be why: your content is contained within a <div> which has its own style (and which overrides the style you were editing). Search the CSS to see if that div class is mentioned anywhere, and try editing that instead.

Write your own CSS

Of course editing existing CSS only takes you so far. You may want to achieve an effect which is only possible through writing a new style from scratch. Hopefully by editing existing CSS you should have a good idea how to do that – in fact, a good way to do this is to copy and paste some existing CSS before editing the tag and the properties that you want to style.

You can find a list of those properties here. This post has focused on colour and mentioned some others, but there are dozens of different elements of appearance that you can style with CSS, including the position of an element on the screen, borders and padding.

You can also write CSS that styles content differently depending on whether that content is viewed on a computer, mobile phone, or if it is printed.

Afternote: A quick note about PHP and other scripts

This post was about style, so I’ve not covered PHP. But it is worth explaining how to spot PHP when customising your blog’s code.

PHP begins and ends with question marks, and it often calls content from elsewhere. A piece of PHP like this, for example:

– is calling some content from the server (the computer hosting the website).

If you were wondering where that content was (in this case a header), now you know – and if you wanted to customise that, then you have a good clue on where to find it (it’s saying ‘get_’ a file called ‘header’, so look for that name in your list of pages)

A good post explaining how WordPress uses PHP (with a helpful infographic) can be found here. For more, see WordPress.org’s own support pages on theme customisation.

If you’re using Tumblr or Posterous you probably won’t see any PHP but instead will see ‘variables’ (as Tumblr calls them) or ‘blocks’ and ‘elements’ (as Posterous calls them) in curly brackets like this: {RSS}. They do pretty much the same thing as PHP: either grabbing content from elsewhere or providing some interactivity or operation. More details can be found on these in the pages on customising Tumblr, and customising Posterous. Use those links to guide you if you need to customise these.

Finally, Blogger has its own equivalent, which it simply calls ‘tags’. These use dollar signs and tend to look like this: <$BlogFeedsVertical$>. Again, they do pretty much the same thing.

The end

But customising scripts like PHP is for another time. I just wanted you to know what those pesky question marks/dollar signs/curly brackets were doing and where missing content might be.

That’s it. I hope this is a useful introduction to customising your blog whatever platform it’s on. If you find your blog hosting platform doesn’t adhere by these principles, let me know and I’ll add an update. And if you have your own tips, please share them in the comments.

*(If you can’t see any code like this, you may not be looking at the stylesheet. On WordPress, for example (if you’re hosting it yourself), you need to look on the right hand side for a button marked ‘style.css’ or something else ending in ‘css’.)