This page is for simplybible.com’s webservant. It comprises technical notes about style sheets used on this site. To escape from here, use Kanga Korna,
The style of simplybible.com is kept consistent and manageable by using a style sheet linked to each web page. The style sheet is a text file called style001.css
A style sheet is referred to in the head of each web page in the following manner...
This links the page to the style specifications laid out in the style document which overrides the default styles of the browser. Let's say that the following specifications were included
.purple {color:purple;}
.bold {font-weight:bold;}
.caps {text-transform:uppercase;}
.sanserif {font-family:"Arial";}
These could be applied to an element on the page such as a paragraph, or to just a span of a few words. For example, the words that look different in this sentence have been
<span class="purple bold caps sanserif">words that look different</span>
The above could also be accomplished by combining the separate items under one style name as follows...
.purplecaps
{
color:purple;
font-weight:bold;
text-transform:uppercase;
font-family:"Arial";
}
This reduces a multiple class statement to a single one as follows...
<span class="purplecaps">words that look different</span>
Style sheets can be made simpler by using the principle of inheritance. Font specifications and some other items are passed down from higher elements to their “children” so that if you describe the font you want in the body of the document, that would be inherited by paragraphs and lists for example. They are the “children” of the body, because the body tag surrounds them
Previously it was dangerous to rely on browsers supporting multiple class statements and inheritance principles consistently, but they do it
The older style sheet style001.css has grown with the site since 2001 and is by now rather cumbersome and redundant. It did not rely much on multiple class statements or inheritance and generally takes the safe course of defining every class in full. It worked well on all browsers, and still does. It will probably remain in use for a long time. On the other hand in 2007 I began to develop a simpler style sheet style007.css that takes advantage of the standard now used more consistently by modern browsers, and the freedom to use inheritance principles and multiple class declarations. New pages will use this style sheet, and when older pages are reviewed and upgraded, they will
The old style sheet defined point sizes for fonts. The new style sheet style007.css will define font sizes in relative terms. This allows browsers on small screen devices to adjust font size intelligently. It allows smart browsers generally to better adjust size and style to a user's needs or requests. The font sizes are defined using
font-size:xx-large; font-size:x-large; font-size:large; font-size:medium; font-size:small; font-size:x-small; font-size:xx-small;
I am using font-size:large; as the default size for simplybible.com web pages. That size is specified for the body tag and is inherited by all its children. This is true of certain other font characteristics too. The body background is not inherited, however by the standard default, an element's background is transparent. Thus the “children” of the body tag let the body background show through. The specifications for the body tag on the new style sheet
body
{
background-color:#ffffff;
background-image:url(imgbg.jpg);
background-position:left;
background-repeat:repeat-y;
color:black;
font-family:"Arial";
font-size:large;
font-weight:normal;
text-align:left;
}
The new style sheet will produce only subtle differences in the appearance of pages on ordinary computer screens. Users will hardly notice. I did make one deliberate change: the colour of the title box in the banner is light blue instead of light green. That's just so that I can easily tell which style sheet
Home | Bible Topics | The Hub