The current housestyle of the main Computer Laboratory web pages is based on a style developed and released by the Computing Service for the University's main website in 2006.
What has changed?
The 2006 style is a revision of, and visually very similar to, the previous style first introduced in 2001. The most obvious difference to the 2001 style is that the page title no longer appears in red in the top-right corner (where you find now in black the name of the department). The page title therefore has to be repeated now in an h1 element at the start of the main text. Most other changes are rather subtle, e.g. changed font sizes, less cluttered templates by better use of CSS facilities, XHTML compatibility, better “accessibility” (i.e., easier navigation with voice/braille/etc. browsers), etc.
In the Computer Laboratory version of the ucam2006 style files, we have made a few local extensions that you might find useful:
Use <table class="solid"> if you want your table cell content left adjusted, top aligned, and cells bordered by black solid lines, as in
Use <table class=grey> if you want your table cell content left adjusted, top aligned, with grey background, as in
Use <table class=plain> if you want your table cells to look like normal text:
Writers of long pages found it necessary to visually subdivide the text with horizontal rules or other tricks, as the standard h2 element was not giving enough of a visual separation. We therefore added a more visible h2 variant that can be activated by writing <body class="prominent-h2">.
You can use <p class=note> or <div class=note> if you want to insert a remark (like a footnote) in smaller font size and optically separated from the main text by a gray background:
Remember: Not every footnote is actually important, but they can enrich your life with detail.
You can use <pre class=sh> for giving examples of how to do something on the shell command-line interface of a computer. In there, you can use <kbd> to mark user input, <var> to mark variable content and <em> to provide some emphasis on part of the output. Example:
$ date -I 2009-02-25 $ ifconfig eth0 Link encap:Ethernet HWaddr 00:11:11:33:76:AA inet addr:126.96.36.199 Bcast:188.8.131.52 Mask:255.255.240.0 inet6 addr: fe80::211:11ff:fe33:76aa/64 Scope:Link UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 $ cd /homes/crsid/.ssh
With <samp class=sh> you get the same inline: ssh email@example.com
Use <img class=right ...> or <img class=left ...> in order to let an image float to the left or the right side of the text. Best avoid using <table> to position images relative to text; in most cases floating images lead to simple HTML and better results.