Proposed CSS and HTML standard for Curriculum Module Development
September 3, 2003
Version 0.1 K. Yue
Home
0. Foreword
This is a quick and dirty work for a proposal to be used for the NSF CCLI A&I
curriculum development. The purpose is to solicit input for modification. This
document is using the proposed CSS so you may view the source code to get some
ideas. I know the current style does not look great but that may be resolved
by someone with more graphics design skill than me (that probably means most
folks.)
The CSS file is module.css. Right clicked it to save.
1. Design Goals
- Capture the coarse model/requirements of the curriculum modules (finer details
to be captured in the ultimate XML format.)
- Able to be converted to the ultimate XML format easily (by XSLT properly.)
- Relatively easy to use.
2. Considerations
- Based on Rice's Connexions with a lot of simplifications and a few extensions.
- Allow linking between modules and exercises, examples, etc.
3. Designs
- Use <meta> to store some meta data of the document.
- Many entities can be embedded or external. Usually, three classes are defined
for each type of entities: the head and the body of embedded entities, and
links to the external entities.
- Document must conform to xhtml format.
4. Meta Tags
- The followings are required: <meta name="type" content="module,
example, exercise, etc">
- The followings are optional:
- <meta name="author" content="whoeverTheAuthorIs">
- <meta name="version" content="n.m">
- <meta name="keywords" content="computer security, encryption,
etc">
- <meta name="description" content="This module is ...">
5. CSS Classes
5.1 Artifacts classes
- Artifacts can be embedded directly into another document.
- For each entity, there are two classes that store the head description and
the body of the entity.
- These classes should be used within the <div> element. Whether this
requirement should be enforced will be discussed (it is not in the current
version.)
- CSS classes:
- code
- codeHead
- exercise
- exerciseHead
- glossary
- glossaryHead
- project
- projectHead
- example
- exampleHead
- resource
- resourceHead
- The list of entities can be modified in the future.
5.2 Artifact link classes
Artifact links are used within the <a> element to indicate the type of
external documents linking to.
- CSS classes for <a>:
- codeLink
- exerciseLink
- glossaryLink
- projectLink
- exampleLink
- resourceLink
- submoduleLink
- prerequisiteModuleLink
- Note that submodules and prerequisite modules are separate and independent
entities. Thus, they are not embedded but there are only artifact link classes
for them.
5.3 Structure classes
- These are classes to maintain structures within a module.
- CSS classes:
- title
- subtitle
- section
- subsection
- subsubsection
- version
- author
- emphasis
6. Examples
You may view the source code to see how it is actually done. The actual style
will be changed in the future.
Example 1
This is an example of using the classes exampleHead and example.
Code for Example 1
<div class="exampleHead">Example 1</div>
<div class="example"><p>This is an example of using
the classes exampleHead and example.</p></div>
Links to other modules and artifacts (all not working)
7. Sample CSS file
The following CSS code is used by this document.
/* Artifact classes */
.code
{ font-family: Arial, mono;
font-size: 10px;
color: #660000;
}
.codeHead
{
color: #660000;
font-size: 10px;
text-decoration : underline;
}
.exercise,
.example,
.project
{
color : #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.exerciseHead,
.exampleHead,
.projectHead
{
color : #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
}
.glossary,
.resource
{
color : #000088;
font-family: Arial, Helvetica, sans-serif;
}
.glossaryHead,
.resourceHead
{
color : #000088;
font-family: Arial, Helvetica, sans-serif;
text-decoration : underline;
}
/* artifact link classes */
a.codeLink,
a.exerciseLink,
a.projectLink,
a.glossaryLink,
a.exampleLink,
a.resourceLink,
a.submoduleLink,
a.prerequisiteModuleLink
{
color : #003300;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 12px;
font-weight: normal;
}
a.codeLink:hover,
a.exerciseLink:hover,
a.projectLink:hover,
a.glossaryLink:hover,
a.exampleLink:hover,
a.resourceLink:hover,
a.submoduleLink:hover,
a.prerequisiteModuleLink:hover
{
color : #330000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
font-size: 12px;
font-weight: normal;
}
a.codeLink:visited,
a.exerciseLink:visited,
a.projectLink:visited,
a.glossaryLink:visited,
a.exampleLink:visited,
a.resourceLink:visited,
a.submoduleLink:visited,
a.prerequisiteModuleLink:visited
{
color : #888800;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 12px;
font-weight: normal;
}
a.codeLink:visited:hover,
a.exerciseLink:visited:hover,
a.projectLink:visited:hover,
a.glossaryLink:visited:hover,
a.exampleLink:visited:hover,
a.resourceLink:visited:hover,
a.submoduleLink:visited:hover,
a.prerequisiteModuleLink:visited:hover
{
color : #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
font-size: 12px;
font-weight: normal;
}
/* Structure classes */
.title {
font-size: 17px;
font-weight: bold;
color: #000000;
font-family: Arial, Helvetica, sans-serif
}
.section {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000099; font-weight: bold}
.subsection {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
font-weight: bold
}
.subsubsection {
font-family: Arial, Helvetica, sans-serif;
color: #0000CC;
font-weight: bold;
font-size: 13px;}
.subtitle {
font-family: verdana, "Times New Roman", Times, serif;
font-size: 9px;
color: #000099;
font-weight: lighter;
}
.author {
font-family: verdana, "Times New Roman", Times, serif;
font-size: 10px;
color: #000044;
font-weight: lighter;
}
.version {
font-family: verdana, "Times New Roman", Times, serif;
font-size: 10px;
color: #003300;
font-weight: lighter;
}
.emphasis {
font-style: italic;
color: #FF3333
}
/* HTML tag style. */
h1, h2, h3, h4, h5, h6 {
font-family:verdana;
}
body, table{
font-family: verdana, "Times New Roman", Times, serif;
background-color: #FFFFFF;
width: auto;
color: #000000;
list-style-type: none;
font-size: 12px;
}
a {
color : #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 12px;
font-weight: normal;
}
a:hover {
color : #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
font-size: 12px;
font-weight: normal;
}
a:visited {
color : #880088;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
font-size: 12px;
font-weight: normal;
}
a:visited:hover {
color : #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
font-size: 12px;
font-weight: normal;
}