Historian’s Guide to Blogging - Part Two
Setting up your blog was the easy part now matters get a little more tricky.
Every blogging platform is made up of three components: HyperText Markup Language (HTML), CSS (Cascading Style Sheets) and PHP: Hypertext Preprocessor (PHP).
Oh my god, my head’s going to explode!
What?!!
Firstly, don’t worry about PHP. That’s something for the army of geeks who wrote your blog script to be concerned about.
Secondly, if you already use the internet to post comments on other blogs you would have encounted some basic HTML. When you post a comment it often instructs what HTML markup is allowed: ‘You can use some HTML tags, such as <b>, <i>, <a>’.
<b> is for bold, <i> for italics and <a> is for a link.
You would use these tags like this: <b>place text here</b>, <i>place text here</i>. The use of the <a> tag is a little more complicated and which I’m not going to go into details about here.
Basically, you do not need any knowledge of HTML to build a blog.
Okay. You do not need any knowledge of HTML to build a blog.
Every decent blog has inbuild editors to take care of HTML for you. These editors are very similar to anything you would find on an email service. You know how to send emails with bold, big or italic text contained within, right? Then you know how to post up an item on a blog. It’s exactly the same.
But what you do need is some knowledge of CSS, the abbreviation of Cascading Style Sheets.
Why?
CSS came into being in 1996, but it’s not until the last couple of years that it has become the standard for webdesign.
Style Sheets (CSS) are what lays out the great majority of the webpages created today. It dictates the layout and the content – bold, italics and many, many other aspects of the page.
Previously, this was done via HTML. You want a certain part of the layout to have a certain size and have a certain background colour? Then issue instructions via HTML. But not any more. You now do that via CSS. This is a separate page which is attached in the head of your HTML.
Lets put it this way. You want a new layout for your blog. So you change over to a new template. I can absolutely guarantee that any new template you chose will use CSS. So in order to change the design of your site, you have to have some sort of appreciation of CSS.
Lets start off with some useful tools. I presume you are using the Firefox browser? If not download the Firefox browser here – it’s free and you’ll find it more developed and user-friendly than Internet Explorer.
Once you’ve got Firefox up and running download the Web Developer toolbar here
After you’ve downloaded it you’re need to close and then reopen your Firefox browser for it to work.
You’ll then see an additional toolbar as below. This is a great aid to webdesign. It has many different functions, but we’ll concentrate on its uses for CSS.
Click on ‘information’ and then on ‘display element information’.
No click on an element of the page that you are working on. In this case I’ve clicked on the first paragraph of the page. What this function does is give you a guide to where the CSS you want to alter is in the actual CSS file.
The image below is a bit too small to read properly but it is giving a clear (cascading) line of where this item rests in the file.
Now click on ‘CSS’ and then in the drop-down list click on ‘edit CSS’. A side panel will open in your browser. This will reveal the full CSS file(s) of the site you are working on. Now you can alter the CSS and the effects of your work will become apparent straight away. Nobody else will see this other than yourself. This tool is a great way of becoming familiar with CSS. You can play around with the code and straight away you can see any mistakes that you make.
So what am I getting at?
There has much research into how people interact with a webpage, not least because now the net is a multi-billion dollar revenue generating affair.
The fact is that most people do not read an article from beginning to end – they skim read it.
So in order to make an article more appealing to readers you need to offer the following design: make sure that your font is of a good size, make sure that there is plenty of space between the lines and paragraphs and make sure that you have black, or at least dark text on a white background. (You must have a strong contrast between the colour of your text and the colour of the background).
And you can do this through CSS.
If you read a typical broadsheet you’ll notice that it has small text with little space between the lines and paragraphs.
You are not designing for print – you are designing for the web.
You need to promote a design that is easy for people to read in their browser.
If people want to print off their article and then read it, then that it is up to them.
You’ll not designing for that though, you are designing for your article to be read on the screen.
Editing CSS
Getting back to using the Web Developer Toolbar.
I’m going to edit the first paragraph and this is how it looks before I’ve edited it.
Now using Webdeveloper Toobar we have the CSS of the site opened in the left hand panel.
And I have added a new section which the arrow is pointing to.
Lets have a breakdown of this.
Firstly #page p - this is the selector.
The instructions I am issuing here are to change all the text in the paragraph - p - in the page division. The text will not be changed elsewhere in the content - only inbetween the page divs.
The #page division is hardcoded into the sites html. You do not add divs via CSS. But that’s okay for our purposes as we are only going to alter what is already there.
The second part is that after the selector we add two curley brackets { } so it looks like this:
#page p {
}
Within the curly brackets we’ll issue instructions.
First we’ll add a property:
#page p {
font-family :
}
So now we are going to alter the font family. I’m sure you are familiar with a number of fonts: Times New Roman, Helvetica and Geneva are some of the most commons ones.
We’re going to change the font to Trebuchet MS. Maybe not the prettiest of fonts, but then again certainly not the ugliest 
#page p {
font-family : ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif ;
}
So what are all those other fonts doing there? Well, Trebuchet MS is a sans-serif type. It may be that the person who is accessing your site doesn’t have this particular font on their operating system. So it is giving the instruction that if the reader doesn’t have use of Trebuchet MS then use Lucida Grande instead, another sans-serif font. And if they don’t have Lucida Grande then use Verdana; if they don’t have Verdana use Arial, and finally if they don’t have Arial just use any goddamn sans-serif font! Just use something.
Notice too that if a fonts name is two separate words then you’ve got to place it inbetween apostrophes like this: ‘Trebuchet MS’
So now we have changed the font style we are going to add another property - font-size.
#page p {
font-family : ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif ;
font-size : 140% ;
}
This will increase the font size to 140% of its original size. The font size for the site has already been set at the beginning of the CSS file.
Notice as well that I’ve placed a semicolon at the end of every line. You have to do this.
Now we are going to add another property - line-height.
#page p {
font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif ;
font-size : 140% ;
line-height : 160% ;
}
This CSS instruction will increase the space between the lines to 160% of its original height.
And finally we will add margin-top:
#page p {
font-family : ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif ;
font-size : 140% ;
line-height : 160% ;
margin-top : 20px;
}
This will add 20px space above every paragraph.
So what we’ll now is just cut and paste the entire CSS file - the whole lot, not just the little bit you have added.
We can find the template in the backend of our site. You would have been given a url, username and password by your hosting provider for this. In Cpanel you will find all this information in the file manager as below.
And then we’ll just delete all the original contents of the CSS file and add what we’ve just grabbed.
Now after we’ve done that we’ll go back to the webpage and refresh the browser.
It my case the changes I made in the CSS file means that the text now looks like as below.
And the addition to the CSS has - surprise, surprise - changed the design: a different, bigger font with more space between the lines and paragraphs.
You can also view this on the website here.
Moving away from CSS, here’s two more tips: write in small paragraphs of a few sentences at a time, and keep your article to around 400-500 words ( Of course, rules are there to be broken as this item is over 1,000 words 
)
Feel free too to liberally use pictures in any item.
It’s not that attractive really to see a whole page of text without images.
I use Photoshop and Fireworks to help me play around with pictures, but these are quite expensive. You can download GIMP here for free - this is an open source alternative to the aforementioned.
A lot of CMS’ and blogging platforms today have add-on modules that automatically resize pictures as you upload them, but it’s good to have some sort of image manipulation software at hand.
And if don’t have a suitable picture for an article? Then use Googles Image Search and copy one from somebody else’s site - everybody does it. It’s not as if we all have a personal photo library to dip into.
If you are using a free blogging service you can change the CSS, but not with the method I’ve used above.
In Blogger at least, the CSS is in the header and not as a separate file, but nevertheless do download and play around with the Web Developer toolbar as it has so many different features.
The conclusion
This isn’t supposed to be an all-round guide to CSS and webdesign.
What I am saying in this article is:
1. CSS is important so try to get to grips with it. This isn’t easy, but every historian loves a challenge. Bear in mind that you don’t have to use the default template that comes with your blogging platform. In the case of Wordpress there are absolutely tons of free templates out there for you to download and use.
2. Here are some free tools assist you in web design: namely, the Firefox Web Developer toolbar.
3. And here is some further reading:
I haven’t actually read any books on CSS design, but here’s a couple that look hopeful:
CSS Web Site Design Hands on Training (Hands-on Training) by Eric Meyer
Years ago I bought the Hands-on-Training for Dreamweaver and Flash. What I really like about this series of books is that it comes with a CD-ROM of training exercises. It’s a great way to learn.
Also, this book is written by Eric Meyer who is a top authority on Cascading Style Sheets.
A cheaper option may be HTML, XHTML and CSS for Dummies.
There is plenty of tutorials across the internet - the web is heaving with them.
The main reference point is W3Schools Online Web Tutorials.
It also may be worth looking to do an evening course if they offer this at your local further education institution.
Unfortunately, there aren’t many of these as academic institutions are not geared up for the new media.
Most web designers out there have prospered not because of formal qualifications, but because of their portfolio.
I look forward to the day when humanities degrees offer modules on CSS and webdesign as these are now skills for life.
I’ll finish off with some advice from Rob MacDougall, ‘historian and robot fancier’, and owner of Old is the New New:
"I designed my site myself - or, rather, I took the Cutline theme (which you can see in its unmodified form at www.foundhistory.org , which is where I saw it and stole it as I thought it looked nice) and modified it into what I wanted. I scanned in the robot from a comic book, and I bought the font that "Old is the New New" appears in from a site called Letterhead Fonts that specializes in retro style fonts. (Note that there are A LOT of free fonts out there, and if you’re not a graphic designer, having to buy one should be rare, but I will splurge one from time to time for a website or a wedding invitation.)
"I know very little CSS, but I know just enough to change a line, save it and reload the page, see what it looks like, change another line, save it and reload the page, etc. etc. I just did that again and again and again until the website looked like what I wanted it to. I downloaded a bunch of themes, looked at the source code, saw how they differed, and spent a lot of time experimenting with colors and font sizes and that sort of thing.
"It’s a wholly unscientific, herky-jerky kind of process that will appeal to certain types of people and not at all to others. There are so many nice themes for Wordpress that you really truly don’t need to mess around with this stuff if you don’t want to. But if you do want to, there’s no substitute for getting under the hood and experimenting."
Part three will be about ideas on how to promote a history blog.
The first part of the Historian’s Guide to Blogging can be found here.
Tags: ccs, html, php
