Open Standards: Spotlight on CSS

Steve Lay HeadshotPosted by Steve Lay

In my role as Integrations Product Owner and champion of Questionmark’s Open Assessment Platform strategy I often write on the topic of open standards.

When we browse the internet on our mobiles, tablets or even on the humble PC, our experience is based on a vast stack of open standards covering everything from the way the information is wrapped up in ‘packets’ for sending over the network to the way text and graphics appear on our screens.

You’ve probably all heard of HTML, the main markup language used for creating web pages. HTML, or HyperText Markup Language to give it its full name, allows web servers to specify how text is broken up into paragraphs, lists or tables, when it should be emphasised and how it relates to media files like images and videos that are also rendered on the page. But HTML has a lesser-known yet powerful helper: Cascading Style Sheets (CSS).

CSS is a standard which allows a designer to apply ‘style’ to a web page. By style, we are talking about formatting information: things that affect the appearance of the page without affecting the meaning. Essentially, information on the web is split into these two halves: content (in HTML) and style (in CSS). Initial versions of the CSS standard were rudimentary, and support across different browsers was often inconsistent. But the standard is now on version 3, often abbreviated to CSS3, and renderings are much more predictable. Also, adoption of more advanced features is rapidly becoming the norm rather than the exception.

By adopting HTML and CSS at Questionmark, the content/style division translates into different responsibilities for the question author (responsible for content) and the graphic designer (responsible for style). By being mindful of this division — and the fact that the same question may have different styles applied on different devices or in different contexts — authors can avoid question wording that is dependent on the style or type of rendering.

For example, a phrase such as “which category applies to the text in red?” makes specific reference to an element of style appearing elsewhere in the content. If colour is not essential to the meaning it would be better to use a more neutral term such as the emphasised text. Being aware of different styles has the knock-on benefit of making assessment content more accessible while ensuring they look good!

Questionmark has embraced CSS as the best technology for customising the appearance of tests. It is easy to copy the default CSS files and change the colours and fonts, say, to match your company portal.

In this screenshot shot, I’ve created a yellow background simply by changing one line in the default style sheet:

css

With CSS, web designers can help you make your assessments look even more professional!

Leave a Reply