Вы находитесь на странице: 1из 28

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.
After the sidebar comes the main content area. Since
you are still modifying the template file, you probably Maintaining a Largish Web Site
don’t need to make too many modifications here: the If you are planning to maintain a
idea is that you first create an appropriate template medium to large web site, you most
file for your own web site, then copy that file as needed likely will want to split the header,
for all other pages. You should modify the navigation sidebar and footer portions out to
head so that users will be able to find the path to this other files, to be incorporated via
page in a logical fashion (the level-1 header provides server-side includes, dynamic
content creation systems or other
the last part of this path). The <h1> level-1 header
means. But you probably already
element should contain the same text as the page title, knew that.
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.

If your document is particularly long (as is this one) or


is split into logically consecutive pages, you may want Navigational Box Width
to include a navigational box just after the level-1 The default navigational box has a
heading. This box (identified by <div fixed width of 12.5em, where 1em is
class="navbox">) should contain nothing more than typically defined to be the height of
an ordered list of links to the main section headings; the letter “M”. This may be too wide
these links are not meant to point to material that is or too narrow for your links, in
not logically part of the current document — use the which case you should add an
attribute such as style="width:
left sidebar for that. In addition, please note that the
14em".
navigational box is not printed out to paper, just as for
the left sidebar. In general you should avoid using
the style attribute as it violates the
General-purpose floating boxes may be used to visually principle of separating style and
separate prose that is merely an aside to the ordinary content. You should certainly avoid
flow of text. You can see an example of such an aside using any units other than em for
the width of the navigational box.
(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.

Footer
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 e-mail address: index.html, http://www.zap.org.au/,


J.Zaitseff@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.

First bullet point


Second bullet point
Third bullet point

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.

a. Item a (Using <ol class="alpha">)


b. Item b
c. 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.

Unordered lists with paragraphs inside each list item. 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.

Second paragraph within a single item. 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.

A blockquote as part of a list item. 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 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.

Second unordered list following the first. 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.

1. Item 1
2. Item 2:
1. Item 2.1
2. Item 2.2
3. Item 2.3
3. Item 3
4. Item 4:
a. Item 4a (Using <ol class="alpha">)
b. 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
c. Item 4c
5. Item 5

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

Point A
Point B:
Point C
Point D:
Point E
Point F
Point G
Point H
Point I:
Point J
Point K:
Point L
Point M
Point N
Point O
Point P

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 ABCDEFGHIJKLM
NOPQRSTUVWXYZ
Right Centre Left

R1C1 R1C2 R1C3


R2C1 R2C3
R3C1 R3C2 R3C3

R1C1 + R1C2
R1C3 + R2C3
R2C2
R2C1 + 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.

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

iR1C1 iR1C2 iR1C3


R2C1 iR2C1 iR2C2 iR2C3 R2C3
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.

Using a Single Simple Table

R1C1 R1C2 R1C3


iR1C1 iR1C2 iR1C3
R2C1 iR2C1 iR2C2 iR2C3 R2C3
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 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.

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
aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
Figure 1: Left-floating image 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 Figure 2: Right-floating image
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 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.

Lorem ipsum dolor sit amet, consectetur


adipisicing elit, sed do eiusmod tempor Sample Floating Box 1
incididunt ut labore et dolore magna aliqua. Ut Lorem ipsum dolor sit amet,
enim ad minim veniam, quis nostrud exercitation consectetur adipisicing elit, sed
ullamco laboris nisi ut aliquip ex ea commodo do eiusmod tempor incididunt
consequat. Duis aute irure dolor in reprehenderit ut labore et dolore magna
in voluptate velit esse cillum dolore eu fugiat aliqua.
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 Sample Floating Box 2 (wider than normal)
adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit,
eiusmod tempor sed do eiusmod tempor incididunt ut labore et dolore
incididunt ut labore et magna aliqua.
dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing
Ut enim ad minim elit, sed do eiusmod tempor incididunt ut labore et
veniam, quis nostrud dolore magna aliqua.
exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
laboris nisi ut aliquip
sed do eiusmod tempor incididunt ut labore et dolore
ex ea commodo
magna aliqua.
consequat. Duis aute
irure dolor in
Lorem ipsum dolor sit amet, consectetur adipisicing
reprehenderit in elit, sed do eiusmod tempor incididunt ut labore et
voluptate velit esse dolore magna aliqua.
cillum dolore eu fugiat
nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
Excepteur sint sed do eiusmod tempor incididunt ut labore et dolore
occaecat cupidatat non magna aliqua.
proident, sunt in culpa
qui officia deserunt { The classic "first program" in Turbo Pascal }
mollit anim id est
program Hello;
laborum. Lorem ipsum
dolor sit amet, begin
consectetur adipisicing writeln("Hello, world.")
end.
elit, sed do eiusmod
tempor incididunt ut
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
labore et dolore magna
sed do eiusmod tempor incididunt ut labore et dolore
aliqua. Ut enim ad magna aliqua.
minim veniam, quis
nostrud exercitation 1. Item 1
2. Item 2
ullamco laboris nisi ut
3. Item 3
aliquip ex ea commodo
consequat. Duis aute Lorem ipsum dolor sit amet, consectetur adipisicing elit,
irure dolor in sed do eiusmod tempor incididunt ut labore et dolore
reprehenderit in magna aliqua.
voluptate velit esse First bullet point
cillum dolore eu fugiat Second bullet point
nulla pariatur. Third bullet point
Excepteur sint Lorem ipsum dolor sit amet, consectetur adipisicing elit,
occaecat cupidatat non sed do eiusmod tempor incididunt ut labore et dolore
proident, sunt in culpa magna aliqua.
qui officia deserunt
mollit anim id est KB
laborum. Kilobytes: 1,024 bytes
MB
Lorem ipsum dolor sit
Megabytes: 1,024 × 1,024 bytes, ie, 1,048,576 bytes
amet, consectetur
adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit,
eiusmod tempor sed do eiusmod tempor incididunt ut labore et dolore
incididunt ut labore et magna aliqua.
dolore magna aliqua.
Col 1 Col 2 Col 3
Ut enim ad minim
veniam, quis nostrud R1C1 R1C2 R1C3
exercitation ullamco R2C2+R2C3
laboris nisi ut aliquip R2C1+R3C1
R3C2 R3C3
ex ea commodo
consequat. Duis aute Lorem ipsum dolor sit amet, consectetur adipisicing elit,
irure dolor in sed do eiusmod tempor incididunt ut labore et dolore
reprehenderit in magna aliqua.
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 text: •

Input text (disabled): (Disabled text)

Input password:
Input file: Choose File No file chosen

Input checkbox: Check 1


Check 2
Check 3
Check 4 (disabled)
Input radio: Radio 1 Radio 2 Radio 3 Radio 4 (disabled)
Textarea: Text line 1
Text line 2

Select: Option 1
Select (size 4): Option 1
Option 2
Option 3
Option 4
Fieldset / Legend: Sample legend
A B C D E
Question 1
Question 2
Question 3
Question 4
Question 5

Submit Reset

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.

Salutation: • (Select one)


First Name: •

Last Name: •

E-mail Address: •

Password: •

Confirm Password: •

Job Title:

Company/Organisation:

Address:

City/Town/Suburb:

State/Province: (Select one) (if in U.S., Canada or Australia)

ZIP/Postcode:

Country: • (Select one)

Phone:

Fax:

Cell/Mobile:

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

How did you hear


(Select one)
about us? •
What is your
timeframe for a
possible purchase of (Select one)
Sinorcaish
Professional? •
How large is your web
(Select one)
site? •
Additional Comments:

Submit Reset

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?
Where can I download the Sinorcaish stylesheet?
Can I remove your name from the template file?
Will you develop a right sidebar for Google Ads?
How long did it take you to develop Sinorcaish?

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.

Can I remove your name from the template file?

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 J.Zaitseff@zap.org.au. 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!

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


This web site is maintained by John Zaitseff. Last modified: 22nd March, 2007.