Layout

Style Definition

Home   |   About   |   Layout   |   Scripts   |   Components

Principles: simplicity, minimalism, classic, respecting standards, viewable in any browser
Style: white text on gray background; active elements are light brown and light gray; fonts: sans-serif for text and monospaced for source code
Technology: HTML plus CSS, maybe JavaScript; coded in text editor

Heading 1

Heading 2

Paragraph: Visited | Unvisited

Strong, Emphasis, Discrete,

Code, Strong Code, Discrete Code

List:

• 1st item
• 2nd item

Ordered List:

1. 1st item
2. 2nd item

Indented Paragraph

Subtitle

Navigator:   Visited   |   Unvisited

 
Picture and its subtitle

Strong:   Visited   |   Unvisited

Code: Visited | Unvisited

To Top:       ^

The complete style sheet (simplyGray.css):

/* simplyGray.css - white text in gray, viewed on any browser */
/* May 2009, KP. */
/*
* COLORS
*
* Object - Color - Code
* ---------------------
* Background - Gray - #666666
* Text - White - #ffffff
* Discrete Text - Indian Red - #cc6666
* Hyperlink - Light Brown - #cccc66
* Visited - Light Gray - #cccccc
*
* Harmonious colors: Indian Red and Light Brown
*
* Active elements of the page are Hyperlink and Input; they are
* Light Brown.
*
* FONTS
*
* Text - sans-serif
* Code - monospaced
*
*/

body {
    margin: 4% 20% 4% 20%;
    background-color: #666666;
    color: #ffffff;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: small;
}

h1 {
    border-bottom: thin groove;
    padding-bottom: 2%;
    font-size: medium;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

h2 {
    font-size: medium;
    font-weight: normal;
    letter-spacing: 1px;
}

p.subtitle {
    padding-bottom: 1%;
    font-size: x-small;
    letter-spacing: 1px;
    text-align: center;
}

p.navigator {
    font-weight: bold;
    text-align: center;
}

p.top {
    font-weight: bold;
    text-align: right;
}

p.indented {
    margin: 2% 5% 2% 2%;
    padding: 2% 2% 2% 5%;
}

a:link {
    color: #cccc66;
}

a:hover {
    text-decoration:none;
}

a:visited {
    color: #cccccc;
}

a:visited:hover {
    text-decoration:none;
}

code {
    font-family: Courier, monospace;
}

strong.discrete {
    color: #cc6666;
}

address {
    border-top: thin groove;
    padding-top: 1%;
    font-size: x-small;
    text-align: right;
}

input {
    background-color: #666666;
    color: #cccc66;
}