Sample Page using the Sinorcaish Stylesheet

This Sample Page shows you how to use the Sinorcaish stylesheet to best advantage. You are encouraged to examine the HTML source code whilst reading the rest of this document. You may also want to consult the official Sinorcaish web site for updated instructions, updated stylesheets and/or appropriate images.

Making a Start

The best way to use the Sinorcaish stylesheet is to start with the supplied template document. So, make a copy of that file and fire up your favourite text editor — GNU Emacs is a good one to use!

The first thing you will notice about the template document is that it conforms to the XHTML 1.0 Strict standard. This means that you will need to be a little more picky about the HTML code you write — if in doubt, use the W3 Markup Validation Service to check your newly-created document.

Start modifying your new file by changing the <title> element, as well as the Author, Description, Copyright and <link rev="made"> meta-elements. You would probably want to include an element of your web site’s name in the title. For example, the Sinorcaish Company web site might include “Sinorcaish:” as part of every title.

The next element to modify is the location of the stylesheets. Sinorcaish actually uses two files to provide the style information needed: sinorcaish-screen.css for screen-based User Agents, and sinorcaish-print.css for printing HTML pages to paper. You can, of course, rename the files at your leisure.

Following the <head> element is the visual page header. You will want to replace the left division with your own web site name (or replace the entire paragraph with an image; see the section on Main Design Elements for more information about doing this). Similarly, replace the links in the right and subheader divisions with your own site-wide ones. Note the presence of the highlight class: it indicates which part of your web site this particular page will fit into.

Next comes the left sidebar. Replace these links with ones that reflect the local page layout in this section of your web site. Note the presence of the highlight class once again: it indicates the actual page you are editing. Make sure you keep the associated “(this page)” line: it helps readers using non-visual or non-stylesheet-aware browsers make sense of your page.


Maintaining a Largish Web Site

If you are planning to maintain a medium to large web site, you most likely will want to split the header, sidebar and footer portions out to other files, to be incorporated via server-side includes, dynamic content creation systems or other means. But you probably already knew that.


After the sidebar comes the main content area. Since you are still modifying the template file, you probably don’t need to make too many modifications here: the idea is that you first create an appropriate template file for your own web site, then copy that file as needed for all other pages. You should modify the navigation head so that users will be able to find the path to this page in a logical fashion (the level-1 header provides the last part of this path). The <h1> level-1 header element should contain the same text as the page title, apart from any web site-wide prefixes.

Finally, modify the footer to suit your web site. If your template is for a corporate site, you will probably want to change the wording of the “maintained by” portion. You should also make the Terms of Use and Privacy Policy links point to the appropriate documents.

Main Design Elements

The main design philosophy of the Sinorcaish stylesheet is the separation of style and content. In other words, as much as is possible, all style information is contained in the CSS files (sinorcaish-screen.css and sinorcaish-print.css), with your HTML documents containing text with minimal markup and boilerplate. This allows you to concentrate on the structure and content of your documents without worrying too much about presentation. It also makes your documents accessible to the visually-impaired and to those using non-stylesheet-aware browsers.

As you have already seen in Making a Start, a typical document based on the Sinorcaish stylesheet is composed of four parts: the visual page header, the left sidebar, the main content area and the footer. In addition, the main content area can contain floating boxes that are displayed on the right-hand-side of the page. Each of these design elements will be examined in turn.

Visual Page Header

The visual page header appears first in a typical document and is displayed at the top of the rendered page. You should use this header to provide a unifying theme for your entire web site: each document should have essentially the same header.

As shown in the Sinorcaish template file, the visual page header is divided into three sections: the left, the right and the subheader, as shown in the following diagram:

Left Right
Subheader

The left part of the header is meant for a global title, such as the name of your web site. Ideally, this would be provided by a suitably-styled image. In that case, the markup would look something like the following:

<div id="header">
  <div class="left">
    <a href="http://www.example.com/"><img src="example.png"
      alt="Browse the Example home page" width="350" height="60" /></a>
  </div>
  ...

As you can see from the above markup, the suggested size of the header image is about 250–500 × 60 pixels. The background of the image should either be a flat colour with RGB code #8CA8E6 (to match the left header background), or include a linear gradient from #3365CB on the left to #8CA8E6 on the right. Text in the image should be white (#FFFFFF), or #FF9800 for highlighting, with #003399 for text shadows. You can view a suitable example at the top of this page. Creating your own header image is easy with the step-by-step logo instructions included with Sinorcaish.

In the case of a linear gradient, the gradient need not appear across the entire image: you might want to divide the image into thirds, with the first third being the darker #3365CB colour, the second being the gradient and the third being the lighter #8CA8E6 colour.

If you do not wish to use an image, replace the previously-shown markup with something like the following:

<div id="header">
  <div class="left">
    <p><a href="http://www.example.com/">Example
      <span class="alt">page</span></a></p>
  </div>
  ...

The right part of the header is meant for global and/or external links. It can also contain code for searching your web site, as demonstrated on the official Sinorcaish example page.

The subheader is designed to contain links to the main sections of your web site. For example, you might decide to partition your company’s on-line presence into Products, Services, Support and so on — much like this sample page. Most of the pages on your site should then fall into one of these categories; the section a particular page falls into should be indicated with the class="highlight" attribute.

Please note that the only markup that should appear before the visual page header is the mainlink: a link to the start of the main content area. It is not rendered by stylesheet-aware browsers, nor is it printed to paper. Its purpose is to allow a visually-impaired user to quickly ignore all of the links that appear in the visual page header and left sidebar (imagine yourself listening to all of the links in these sections for each and every page!).

Left Sidebar

The main purpose of the left sidebar is to provide navigation in the current (local) section of the web site. Links should be provided to all pages at this level of the web site, as well as possibly to their parent. For example, the left sidebar of the Products overview page might list Product A, Product B and Product C as relevant links, as well as a link to the Overview page itself. In turn, Product A’s overview page might list Overview, What’s New, Features, System Requirements, Download, Reviews, FAQ and Submit Comments as links in its left sidebar.

The best way to provide all of the relevant links is to use an unordered list (<ul>), as shown in this document: apart from being styled correctly by the Sinorcaish stylesheet, non-visual or non-stylesheet-aware browsers will be able to render something meaningful. You indicate the current page in the left sidebar by using the class="highlight" attribute to the <li> element; you should also use the sample “(this page)” HTML fragment for accessibility.

The left sidebar is actually a series of <div> markup sections, each of which is displayed one after the after, top to bottom. You can have ordinary text and markup in the sidebar, as illustrated by this sample document. Please note, however, that the left sidebar is not printed out to paper.

Main Content Area

The main content area is the portion of the document that will contain the vast majority of your prose. This paragraph, for example, is part of the main content area, as are other paragraphs, headings, diagrams, tables, floating boxes and so on. Its structure — particularly headings — is essentially dictated by your text.

As illustrated by this sample document, each page should contain a main content area that starts with a navigational head. This navigational head, identified by a navhead ID, allows readers to quickly locate this particular page in the web site hierarchy. The <h1> level-1 header provides the last part of this navigational head; for this reason, a document based on the Sinorcaish stylesheet should have only one <h1> element.

Given that the level-1 heading appears only once (and should be similar, if not identical, to the document title), you should use level-2 to level-6 headings (<h2> to <h6>) to indicate a document’s structure. In addition, you should not use headings in any section other than the main content area (you should not use headings in floating boxes, either).

The different levels of headings can be used to indicate the importance (or otherwise) of this particular section in the prose. In particular, level-2 and level-3 headings are larger than their surrounding text, level-4 headings are about the same size, and level-5 and level-6 headings are smaller. This document, for example, only uses level-2 and level-3 headings (apart from sample headings in the Brief HTML Sampler).

Incidentally, a good rule of thumb to observe is that you should never place two headings (of any level) next to each other without placing some text between them. Thus, for example, a level-2 header should not be followed by a level-3 header without an introductory paragraph of some sort — even a few words are usually sufficient.

In addition to headings, you may use any valid XHTML markup in the main content area. Many of these are illustrated in the Brief HTML Sampler found later in this sample document. The only elements you should avoid are <address> and <q>, for reasons explained in the section on Deprecated Elements.

The last element in the main content area should be <br id="endmain" />. This forces the main content area to extend to at least the end of the left sidebar, should that sidebar be longer than your text.

Floating Boxes

The Sinorcaish stylesheet provides you with two types of floating boxes: the navigational box for intra-page/inter-page links, and general floating boxes for sidebar-type content.


Navigational Box Width

The default navigational box has a fixed width of 12.5em, where 1em is typically defined to be the height of the letter “M”. This may be too wide or too narrow for your links, in which case you should add an attribute such as style="width: 14em".

In general you should avoid using the style attribute as it violates the principle of separating style and content. You should certainly avoid using any units other than em for the width of the navigational box.


If your document is particularly long (as is this one) or is split into logically consecutive pages, you may want to include a navigational box just after the level-1 heading. This box (identified by <div class="navbox">) should contain nothing more than an ordered list of links to the main section headings; these links are not meant to point to material that is not logically part of the current document — use the left sidebar for that. In addition, please note that the navigational box is not printed out to paper, just as for the left sidebar.

General-purpose floating boxes may be used to visually separate prose that is merely an aside to the ordinary flow of text. You can see an example of such an aside (called a “sidebar” in typographical circles) on the right-hand side of this page, in the vicinity of this paragraph.

The following markup may be used as a template whenever you wish to include a floating box in your document:

<div class="floatbox">
  <hr />
  <p class="hidden">(Hidden text)</p>
  <p class="title">Floating Box Title</p>
  <p>(Actual text)</p>
  <hr />
</div>

Notice the horizontal rules and hidden text: these are only displayed in non-visual or in non-stylesheet-aware browsers and help the reader to make sense of your document. Depending on the content of the floating box, the hidden text may not need to be present. Alternatively, it might read something like “[The following paragraphs represent a sidebar. You may need to read some of the text following this sidebar to fully understand it.]”.

You should also note that the title of a floating box is given by a title class, not by a heading: headings are for main content only.

By default, floating boxes have a width of about 35% of the main content area. In general, you should not need to change this width, except in the case that you include <pre> or (wide) <table> elements within the actual floating box.

One limitation of floating boxes is that they must appear between block-level elements such as paragraphs. In other words, it is not possible to start a floating box in the middle of a paragraph. This is a limitation of XHTML in general, not of Sinorcaish in particular.

Due to the Cascading Style Sheets 2.1 specification of floating elements, floating boxes in this stylesheet do not always visually interact well with elements having the highlight class. For example, if you have a highlighted paragraph defined by <p class="highlight">, the grey background of that paragraph may overlap the grey background of a floating box in its vicinity. The way to avoid this situation is to include the clearboxes class as well:

<p class="highlight clearboxes">Highlighted paragraph</p>

The clearboxes class is possibly even more important with the preformatted paragraph element (<pre>, with or without the highlight class). The reason is that the XHTML specification forbids text inside such a paragraph from being wrapped, potentially causing the preformatted text to “spill over” into the floating box. Adding the clearboxes class is not done by default, however, as it very much depends on the width of your preformatted content: if the text inside <pre> is narrow enough, it is probably not worth clearing any boxes, as doing so would generate a significant amount of empty space on your rendered page.

The footer is the last section to appear in any Sinorcaish HTML document. As suggested in the section on Making a Start, the footer allows you to include a link to your site’s Copyright statement, Terms and Conditions of Use and/or Privacy Policy. You are also encouraged to include a date of last modification and a contact address for the person or group maintaining the web page.

When modifying the template’s footer, please keep in mind that, by default, all content in the footer is printed out on paper. The only exception is content protected by <span class="notprinted"> elements, as shown in this sample page. You should use the notprinted class to make sure that what is printed to paper makes sense: for example, the mere words “Terms of Use” and “Privacy Policy” don’t make sense by themselves on paper and thus should not be printed.

By the way, if you need to include a range of dates for the copyright notice, the correct way to do so is to use the &ndash; XML entity. For example:

Copyright &copy; 2001&ndash;07, John Zaitseff.  All rights reserved.

This is rendered as:

Copyright © 2001–07, John Zaitseff. All rights reserved.

Finally, note the initial <hr /> in the footer: this allows non-visual or non-stylesheet-aware browsers to clearly separate the main content area from the footer.

Testing Your Document

You should always check that your completed documents conform to the XHTML 1.0 Strict specification by using the free W3 Markup Validation Service. In addition, you should test your web pages using a variety of browsers, particularly the latest versions of Mozilla Firefox, Konqueror, Safari, Opera and Internet Explorer (although Internet Explorer 7, the current release, still has significant bugs in rendering HTML and CSS).

If possible, you should also test your web pages using older versions of Internet Explorer, as many potential users of your web site may not be able to upgrade their browser (this document, for example, has been fully tested with Internet Explorer 6 and 7).

As well as checking your web pages with the popular browsers, you should also use a text-mode browser such as Lynx for testing — this will give you a reasonable “feel” for how visually-impaired users might experience your pages.

One rather non-obvious item to check is how your pages will look when printed — the Sinorcaish stylesheet for printing is rather different from the one used to render your pages on-screen.

A Brief HTML Sampler

This section of the sample document shows you how various HTML elements appear under the Sinorcaish stylesheet. It assumes you have already read and understood the section on Main Design Elements. Each example is presented in a box similar to the following:

This is a typical example box. It contains a valid XHTML paragraph.

You are strongly encouraged to read the source code of this document to see “how it is done”. In particular, open the file sample.html using any text editor, then search for id="h-html-sampler" to find the start of this section.

By the way, if you examine the source code for the above example box, as well as the document header, you will find that it uses a special class to set the right margin when displayed on the screen. This has the effect of avoiding the navigational box that would otherwise be rendered on top of it. Since the navigational box is not printed to paper, there is no need for setting a right margin on the example box in that case.

This special class is not really a generic solution (as it is very dependent on the width of the navigational box, which has its own custom style in this instance), hence its exclusion from the Sinorcaish stylesheet.

Headings

Only one level-1 heading may appear in the document, directly following a <div id="navhead"> section. You may use level-2 to level-6 headings almost anywhere you like within the main content area (apart from within floating boxes). For example:

Level-2 Heading

Whenever one needs “filler text”, one invariably uses Lorem Ipsum. This passage has been in use as filler text since the 1500s and was originally taken and slightly mangled from de Finibus Bonorum et Malorum, written by Cicero in about 45 B.C.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Level-3 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Level-4 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Level-5 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Level-6 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph with Title Class (not recommended)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

As you can see from the example above, your use of level-5 and level-6 headings should probably be limited, as they are rendered smaller than the surrounding text. Furthermore, although the Paragraph with Title Class looks like a heading, it should not be used as one: the title class is meant to be used within the left sidebar and within floating boxes only.

Inline Elements

Many inline elements have already been used throughout this sample document. This example brings them all together:

Ordinary text, as seen throughout this document. An (almost certainly) visited link and a (probably) unvisited link.

The Sinorcaish stylesheet assumes the following elements are defined as per the HTML4 Sample Stylesheet: emphasised text, strongly emphasised text. You should probably avoid strong’ed em and em’ed strong text (although it will probably work).

You should avoid physical markup elements such as bold, italic, bold italic (and italicised bold). Instead, use elements that give meaning and structure to your text. The same applies to typewriter text, b + tt, i + tt, tt + b + i and other permutations.

Avoid the following if possible, as it adds little semantic meaning: Bigger text, Smaller text.

You can use sup and sub as appropriate: H2SO4, a2 + b2 = c2.

For computers and programming: code, keyboard input, sample output, variables. For example, var++ in C increments the variable var. A typical example of these elements is when using the <pre> element:

$ make target
make: *** No rule to make target `target'.  Stop.

Something more exotic: a definition is often useful; you should really read Cascading Style Sheets: The Definitive Guide (Second Edition) by Eric Meyer; deleted text; inserted text; abbreviations such as Mr. John Zaitseff or U.N.; acronyms such as NATO.

Note the use of <abbr> and <acronym> in the above example: if the abbreviation or acronym has an associated title attribute, the element is displayed with a dotted underline; furthermore, holding your mouse cursor over the element will display the contents of the title. Unfortunately, the dotted underline is not displayed under older versions of Internet Explorer for Windows, as those browsers do not comply with the CSS 2.1 Standard.

The use of the title attribute is entirely optional for all elements, including <del> and <ins>.

Custom Inline Styles

The Sinorcaish stylesheet defines a number of custom inline styles for particular uses. For example, filenames, URLs and e-mail addresses should all be displayed using the appropriate style class as part of the <span> or <a> element; HTML and CSS markup should use the <code class="markup"> element and class; the tooltip class can provide underlined tooltips; program names, windows (and dialog boxes), menu items, individual keypresses and generic GUI elements in graphical applications can use appropriately-named classes; and most Unicode characters may be displayed using the unicode class:

A filename, URL and : index.html, http://www.zap.org.au/, .

HTML elements and the like can be marked up using <code class="markup">. If you like, you can use <span class="markup"> instead: it’s merely a matter of taste.

Text with a tooltip.

Parts of a graphical computer application: OpenOffice Writer can be invoked with the oowriter command; the End Session dialog box; press Alt+Tab to select another window; modify the value of the Size combo box; File » Quit is just one way to terminate programs under KDE. By the way, note the use of &nbsp;&raquo; between menu items.

Unicode text uses a different font (or fonts) to make sure as many Unicode characters as possible can be displayed. For example: /ˈkʊkəbʌrə/ (kookaburra), Добро пожаловать! (“welcome” in Russian), Χαίρετε! (“Rejoice!” in Ancient Greek; “ε” should be “ϵ”, but some fonts don’t have the latter symbol), ←↑↓→ (arrows).

Please be aware that some browsers may not display overly-long tooltips correctly. In addition, many browsers have problems displaying Unicode characters that are not present in the current font; the unicode class helps to reduce this problem (by selecting a font with as many characters in it as possible), but does not eliminate it.

Block-level Elements

You have already seen the most common block-level element in continual use: the paragraph element (<p>). Other standard elements are shown in the following example:

Standard paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Another paragraph in the block quote. You can have multiple levels of <blockquote>, as illustrated by the following riddle from The Hobbit, or There And Back Again by J. R. R. Tolkien:

Alive without breath,
As cold as death;
Never thirsty, ever drinking,
All in mail never clinking.

The answer is “a fish”, of course!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Note that the del and ins elements may be block-level as well as inline:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The preformatted text element (<pre>) is mostly used for computer programs or for terminal-based transcripts. Please note that the content inside <pre>, as well as the starting and ending elements themselves, must not be indented with spaces or tabs. Most ordinary markup rules apply within the element:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

/* The classic C program */

#include <stdio.h>

int main (int argc, char *argv[])
{
    (void) printf("hello, world\n");
    return 0;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

/* The classic C program, with syntax highlighting */

#include <stdio.h>

int main (int argc, char *argv[])
{
    (void) printf("hello, world\n");
    return 0;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Block-level Styles

The Sinorcaish stylesheet allows you to place most block-level elements into a highlight mode:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A highlighted paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A highlighted paragraph directly following another highlighted paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A highlighted block quote. Note the additional space inside the box at the top and bottom, compared with the highlighted paragraph. Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A highlighted division. This has spacing the same as a highlighted block quote.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

/* The classic C program, with syntax highlighting */

#include <stdio.h>

int main (int argc, char *argv[])
{
    (void) printf("hello, world\n");
    return 0;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Please remember that highlighted elements (ie, elements with the highlight class) may interact rather badly with floating boxes, as discussed in the section on Floating Boxes.

Although not officially deprecated by the Sinorcaish stylesheet, you should try to avoid using horizontal rules, with or without the custom lighter class. Please note that <hr class="lighter" /> elements are not printed to paper:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List Elements

There are essentially three types of lists supported by the XHTML standards: ordered lists, using the <ol> and <li> elements; unordered lists, using the <ul> and <li> elements; and definition lists, using the <dl>, <dt> and <dd> elements:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Item 1
  2. Item 2
  3. Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Item 1 (Testing the spacing between two lists)
  2. Item 2
  3. Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Item a (Using <ol class="alpha">)
  2. Item b
  3. Item c

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

kookaburra /ˈkʊkəbʌrə/ (noun):
either of two Australian kingfishers renowned for their harsh voices and call resembling human laughter: 1. the large, dark brown and white common kookaburra (also known as the laughing kookaburra), Dacelo gigas, native to eastern Australia and introduced into western Australia and Tasmania; giant kingfisher; laughing jackass. 2. a slightly smaller bird with paler head, the blue-winged kookaburra, Dacelo leachii, of tropical northern Australia and New Guinea; barking jackass; howling jackass. [Aboriginal]
kangaroo /kæŋgəˈru/ (noun):
Macquarie Dictionary: any of the largest members of the family Macropodidae, herbivorous marsupials of the Australian region, with powerful hind legs developed for leaping, a sturdy tail serving as a support and balance, a small head, and very short forelimbs. [Aboriginal; Guugu Yimidhirr gangurru a large black or grey kangaroo]
Merriam-Webster Dictionary: any of various herbivorous leaping marsupial mammals (family Macropodidae) of Australia, New Guinea, and adjacent islands with a small head, large ears, long powerful hind legs, a long thick tail used as a support and in balancing, and rather small forelegs not used in progression.
koala /koʊˈalə/ (noun):
a tailless, grey, furry, arboreal marsupial, Phascolarctos cinereus, of Australia, about 75 cm long. Also, koala bear. [Aboriginal; Dharuk gulawang; early spelling koolah replaced by koala probably because of a scribal error]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lists can contain other lists, as well as block elements (such as paragraphs) of their own:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Item 1
  2. Item 2:
    1. Item 2.1
    2. Item 2.2
    3. Item 2.3
  3. Item 3
  4. Item 4:
    1. Item 4a (Using <ol class="alpha">)
    2. Item 4b:
      1. Item 4b.1 (Using <ol class="number">)
      2. Item 4b.2
      3. Item 4b.3:
        1. Item 4b.3.1
        2. Item 4b.3.2
        3. Item 4b.3.3
      4. Item 4b.4
    3. Item 4c
  5. Item 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

If you are nesting lists within lists, as shown in the previous example, you should make sure that you include some text between any two levels. The reason for this is that some browsers otherwise leave an almost empty line instead of making the inner list start on the same line as the outer list. In other words, you should design your nested lists as shown at Items 2, 4, 4b, 4b.3 and Points B, D, I and K in the example above. You should not do something like the following:

<ol>
  <li>Item 1</li>
  <li>   <!-- You should not leave this line blank with no text on it! -->
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      ...
    </ol></li>
  ...
</ol>

Table Elements

Tables should be used to present tabular data, not for visually positioning page elements. The Sinorcaish stylesheet defines a simple class for rather simplistic table formatting. You can highlight certain cells with the highlight and lighter style classes; you can also force the text alignment within a cell to be left, right or centred (the default). Some simple examples:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Currency Values as at 1st November, 2004
Currency AUD NZD USD EUR JPY GBP CHF CAD
AUD 1 0.9162 1.337 1.709 0.01259 2.455 1.117 1.097
NZD 1.092 1 1.459 1.865 0.01374 2.679 1.219 1.197
USD 0.7479 0.6852 1 1.278 0.009416 1.836 0.8353 0.8203
EUR 0.5852 0.5362 0.7825 1 0.007368 1.436 0.6536 0.6418
JPY 79.43 72.77 106.2 135.7 1 195 88.71 87.11
GBP 0.4074 0.3732 0.5447 0.6962 0.005129 1 0.455 0.4468
CHF 0.8954 0.8203 1.197 1.53 0.01127 2.198 1 0.982
CAD 0.9118 0.8353 1.219 1.558 0.01148 2.238 1.018 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Col 1 Col 2 Col 3
Left Centre Right
ABCDEFGHIJKLM ABCDEFGHIJKLM
NOPQRSTUVWXYZ
ABCDEFGHIJKLM
Right Centre Left
R1C1 R1C2 R1C3
R2C1 R2C3
R3C1 R3C2 R3C3
R1C1 + R1C2 R1C3 + R2C3
R2C1 + R3C1 R2C2
R3C2 + R3C3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Although tables may be nested to any degree, formatting the result can be quite tricky, as shown in the following example. It is better to use the colspan and rowspan attributes, as illustrated in the second table:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Using Embedded Simple Tables
R1C1 R1C2 R1C3
R2C1
iR1C1 iR1C2 iR1C3
iR2C1 iR2C2 iR2C3
iR3C1 iR3C2 iR3C3
R2C3
R3C1 R3C2 R3C3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Using a Single Simple Table
R1C1 R1C2 R1C3
R2C1 iR1C1 iR1C2 iR1C3 R2C3
iR2C1 iR2C2 iR2C3
iR3C1 iR3C2 iR3C3
R3C1 R3C2 R3C3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

It is likely that you will need to create custom styles for your own tables, in order to present them in their best light. The Sinorcaish stylesheet definitions provide you with a starting point to do so. Please remember that you should minimise the excessive use of colour and of thick or dark borders, in order to harmonise with the rest of the document.

Images and Icons

You may embed images into your document as you would normally, using the <img> element. By default, images are aligned with the text baseline; images within links have no border. In addition, you may force your images to “float” to the left or right by using the floatleft and floatright classes respectively (as shown in the following example). In this case, your images should not contain a white or transparent border, as the stylesheet takes care of this for you.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in [Gradient] reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, [Gradient] quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Including a caption with the floated image is a little trickier: you need to ensure your markup does not cause the current paragraph to be terminated prematurely. For this reason, you should use the following as a template:

<span class="floatleft">   <-- or "floatright" -->
  <br class="hidden" />
  <img src="url" alt="[text]" width="w" height="h" /><br />
  <strong>Figure 1: Short caption text</strong>
  <br class="hidden" />
</span>

Notice that a <span> element is used to contain the image and caption: <table> and <div>, as well as <hr />, are block-level elements and cannot appear within a paragraph (this is a limitation of XHTML in general, not of Sinorcaish in particular). In general, you must only use inline elements, such as those described in Inline Elements and Custom Inline Styles, within floating spans.

Secondly, note the hidden line breaks (<br class="hidden" />) at the start and end of the floated span: these are only displayed in non-visual or in non-stylesheet-aware browsers and help the reader to make sense of your document.

Finally, you should keep the image captions short, as these will not be wrapped to the width of the image. As a final resort, you may need to use additional <br /> elements to keep the caption width reasonable.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut [Gradient]
Figure 1: Left-floating image
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea [Gradient]
Figure 2: Right-floating image
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The Sinorcaish stylesheet includes a special class, icon16, for 16 × 16 file-type icons:

Every good web designer should read the [PDF] Cascading Style Sheets 2.1 Specification (1.5 MB).

If you examine the source code for the previous example, you will note that it follows the following form (attributes omitted for clarity):

<a><img></a>&nbsp;<a>link text</a> (size)

In particular, note that the hyperlink <a> appears twice. This prevents the space between the icon and the link text from being highlighted when using the mouse.

Floating Boxes

You may include almost any valid inline, block-level, list or table element in floating boxes. The only exceptions are headings, which should be used in the main content area only, and horizontal rules, which are used for non-visual or non-stylesheet-aware browsers only.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Sample Floating Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Sample Floating Box 2 (wider than normal)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

{ The classic "first program" in Turbo Pascal }

program Hello;

begin
  writeln("Hello, world.")
end.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Item 1
  2. Item 2
  3. Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • First bullet point
  • Second bullet point
  • Third bullet point

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

KB
Kilobytes: 1,024 bytes
MB
Megabytes: 1,024 × 1,024 bytes, ie, 1,048,576 bytes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Col 1 Col 2 Col 3
R1C1 R1C2 R1C3
R2C1+R3C1 R2C2+R2C3
R3C2 R3C3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Forms

The Sinorcaish stylesheet allows you to design pages containing interactive HTML forms. Such pages represent one of the few places that tables may be used for visual formatting, as traditionally form elements need to be vertically aligned with each other.

Please note that fields marked with are required.

 
Input checkbox:


Input radio:      
Fieldset / Legend:
Sample legend
A B C D E
Question 1
Question 2
Question 3
Question 4
Question 5
 

Please note that the following form is entirely fictional: please do not fill it out or submit it!

Evaluate the Sinorcaish Professional stylesheet

Thank you for your interest in the Sinorcaish Professional stylesheet. This stylesheet includes professionally-designed graphical images that you can use to enhance your web site.

Please fill out the following form to receive a serial number for the Sinorcaish Professional stylesheet. This serial number will allow you to download and evaluate this product. If you have already registered your interest in this product, some of the fields in this form may be pre-filled in.

Fields marked with are required.

 
 
 
 
 
 
(if in U.S., Canada or Australia)
 
Please use only digits 0–9, hyphens and blank spaces. You may also use “+” to indicate an international prefix (eg, “+61” for Australia).
 
 
 
 

FAQ-style Pages

The Sinorcaish stylesheet includes a totop class that can be used for links to the top of the page. The following example shows you how to create a FAQ-style page, which makes use of this class. The only change you would need to make from this example to your document would be to replace the level-2 heading, <h2>, with a level-1 heading <h1>.

Frequently Asked Questions


Is it hard to use the Sinorcaish stylesheet?

Not at all! Simply follow the instructions in Making a Start — you’ll be on your way in no time.

Where can I download the Sinorcaish stylesheet?

You can download Sinorcaish from the Open Source Web Design group or from the official Sinorcaish web site. The version available from the official web site includes appropriate sample images that you can use in your own documents.

Yes, absolutely! You may redistribute and/or modify the template file without any restriction. This means, naturally enough, that you can remove the author’s name from that file (particularly from the copyright statement) and replace it with your own.

Please note, however, that you must retain the original copyright notice in the Sinorcaish CSS stylesheet files (sinorcaish-screen.css and sinorcaish-print.css), as well as in this sample document, in the overview document and in the logo image instructions. This is essentially a matter of giving credit where credit is due.

Will you develop a right sidebar for Google Ads?

No, as that would not fit the desired “look and feel” of Sinorcaish. However, there is nothing preventing you from modifying the CSS stylesheet files yourself — as long as you retain the original copyright notices in those files.

How long did it take you to develop Sinorcaish?

That’s a fairly difficult question to answer… “About two or three weeks of on-and-off writing and developing” is probably as close an answer as the author can come up with for the first version of Sinorcaish!

Deprecated Elements

You should not use the following deprecated elements with the Sinorcaish stylesheet:

<address>
You should use <div id="footer"> (ie, Sinorcaish footers) instead. This was essentially a design decision made when implementing the Sinorcaish stylesheet.
<q>
You should use &ldquo; and &rdquo; instead. The reason for this is the somewhat spotty support for <q> in the first place, as well as a lack of support in Internet Explorer for CSS properties quotes and content, as well as pseudo-elements :before and :after.

The Final Word

The Sinorcaish stylesheet was created by John Zaitseff and submitted to the Open Source Web Design group in December, 2004; it was last updated in March, 2007. You should consult the official Sinorcaish web site for updated style sheets and associated images.

You may freely redistribute and/or modify the Sinorcaish CSS stylesheet files (sinorcaish-screen.css and sinorcaish-print.css) on the condition that the original copyright notice is preserved. The same condition applies to this sample document, to the overview document and to the logo image instructions. You may redistribute and/or modify the associated template file without any such restriction. These conditions may be waived; write to John Zaitseff for details.

Your comments, suggestions, corrections and enhancements are always warmly welcomed! Please send these by e-mail to . In addition, you are encouraged to send a short note to the same address should you use this stylesheet in one of your own web sites. Happy coding!