Blog styles for better academic writing, 30/05/06, Transversality

May 30, 2006

Blog styles for better academic writing

If you write a blog using the Warwick Blogs system, you can modify its style to make it look more interesting/pretty/cool. These same techniques can also be used to make your writing more effective and readable, with clearer structure and purpose. I have done just that in this blog, and am finding that it is improving my writing skills. This entry explains how.

The appearance of a Warwick Blogs blog can be altered by its owner using a language called CSS. This allows for the appearance of elements on the page (such as the calendar) or classes of elements (such as the entries) to be modified. The Admin –> Appearance page of your blog contains a text area (bottom of the page) into which you can enter your custom CSS. It also contains a warning that should be taken seriously:

Caution: If you don't know what CSS is or how you use it, then you should probably leave this textbox empty.

Despite this rather forbidding note, there are some things that you can do very easily. You can, for example, create custom styles to indicate extra semantic class differences between various items of text in your blog entries.

What do I mean by semantic class differences? Within a well written text, especially an academic text, different paragraphs do different kinds of work. For example, this is a definition paragraph. Marking this paragraph out as such helps me in constructing my text, and helps others in reading it.

I have defined text types for:

Overview, used as the first paragraph of each of my entries.
Conjecture, used when I am making a claim to be assessed.
Definition.
Example.
Technote.
Conclusion.

If you look at one of my recent blog entries using the Firefox browser (as any sensible person would), then you will see various paragraphs that are marked up as having one of these specific roles. In Internet Explorer 6 (an older browser) each of these types of text looks the same, with a grey background and a dashed edging. In the more recent Firefox, however, each type of text is prefixed with the name of the type of text.

Firefox supports the more recent version of CSS, called CSS2. This includes many neat tricks such as the 'before' and 'after' pseudo-elements. Pseudo-elements are so called because they create extra elements in the page view, onto which styles can be applied. In the case of 'before', some extra content is placed at the start of the element to which the class is applied, and styled as specified. In my case, each special type of text has its title added at the start of the text to which it is applied. Most of the time I write my blog entries for my own use, with a few other readers in mind who all use Firefox, so I'm not that bothered about Internet Exploder users. I'm also not interested in how my texts appear out of context in RSS aggregators, so it doesn't matter that they lose their additional formatting in such systems.

If you want to have a go at this, you need to add two extra styles to your CSS for each of the types of text. For example, for overview I have added:

.overview {margin-bottom:10px; padding:3px; border: 1px dotted #A1A1A1; font-family: georgia, Times, serif; background-color: #EAEAEA; } .overview:before {content: "Overview: "; font-weight:bold; font-style:oblique}

The first of these styles changes the background, border, layout and font. I could, if I wanted, use different colours and fonts for each type of text, but I personally like to keep things visually simple. The second style adds the 'before' pseudo element. In order to apply this to a paragraph of text in your blog, you need to wrap that paragraph in special tags that apply the style to the text:

<div class="overview">This is an overview text.</div>

I also have some styles that change the background colour of selected phrases, allowing me to highlight them with some extra meaning. For example, I can mark them as key terms or just apply a yellow highlighter pen:

.highlighter {background:yellow} .keyterm {background:#BBE9F6}

In these cases, I use a different tag to contain the text to be effected:

<span class="highlighter">Highlighted text</span>

Highlighting is particularly useful when I am working with a qoute from a text.

Marking up parts of a text as being of a specific kind, doing a specific type of work, makes writing easier. The logical and semantic construction of a text becomes easier to see, assess and modify. Using CSS, this can be done consistently across a very large number of pages. Just define the styles once (in your custom CSS), and use them repeatedly.

Robert O'Toole : 30 May 2006 07:32 | Tags: Academic Writing E-Learning Warwick University | Comments (0) | Report a problem