In our last episode,
<fI********************@broadviewnet.net>,
the lovely and talented Jamie
broadcast on comp.infosystems.
www.authoring.stylesheets: Hi,
Thanks for the excellent answer to my last question! One more:
Does anyone have a method they follow for organizing stylesheets
themselves? They seem like they can get bloated and hard to read. Aside
from putting all the "h1" rules together, I haven't thought of any way
to do it, if it's necessary at all.
First, since the "C" in "css" means "cascading," order does matter
in "css" (and perhaps other kinds of stylesheets I don't know about)
if you have accidentally or on purpose used the cascade in creating
your stylesheets. You cannot just sort your stylesheets, but if
you have worked with them long enough to have internalized the
ideas of inheritance and the cascade, you can tidy them up.
One way of organizing css stylesheets is to modularize them.
You can have more than one stylesheet per page, and they are
applied in the order you link them. That means you can
have one (default.css) for site-wide defaults, one (links.css)
for section-wide styles, and one for particulars of a single
page (search-links.css) that would have things like styles
for images on the one page. Years ago Netscape did not seem
to handle multiple stylesheets and stylesheet includes properly,
but this does not seem to be a problem with modern versions.
(Or maybe it was IE - at any rate the browsers would not
both do the same thing, although I may have forgot which of
them did the right thing.)
Another way is to use a preprocessor, which is what I do now. I
happen to use chpp, which is not the most powerful preprocessor out
there, but is the one I understand (and one of the ones likely to be
easier for people who have done C or C++ programing). (Moral of
story: the best software is the kind you know how to use.) Whatever
preprocessor you use, learning whatever Make utility is available on
your system will repay the effort.
Now, I will give you some examples which are chpp. They should
give you an idea what a preprocessor can do. You can do the
same sorts of things with other preprocessors although since
chpp syntax is idiosyncratic and maddening, other preprocessor
statements are unlikely to look much like this example.
Essentially you create a template file and then use chpp to create
the final stylesheet(s).
This is the whole template file for the section of my home page
for writers. It could be called writer.scss (the extra s means
"source"). The theme of this page is supposed to suggest a
typewritten document (i.e. typed on a typewriter).
#include ../data/fonts.ccss
#include ../data/colors.ccss
BODY.writerpage { color: %<writecolor>; background-color: %<writeback>;
background-image: url(white.gif);
font-family: %<typewriter>; font-weight: 900;
font-size: medium; }
%<rightback=%sand>\
%<leftback=%'#FDF'>\
#include ../data/defaults.ccss
#include ../data/mainmenu.ccss
#include ../code/getstyles.chml
STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }
%getstyles(%'writerpage')\
Now to step through a little of it to show what it can do.
#include ../data/fonts.ccss
#include ../data/colors.ccss
These statements say to use some variable assignments in
files fonts.ccss and colors.ccss which are in a brother
directory of the directory containing writer.scss .
Here is a bit of colors.ccss
%<sand=%'#FFC'>\
%<writeback=%'#FFF'>\
%<writecolor=%'#000'>\
The line %<sand=%'#FFC'> simply assigns the value '#FFC'
to the variable name %<sand>.
And here is a bit of fonts.ccss
%<typewriter=%'"Courier New", "Andale Mono", \
lucidatypewriter, "American Typewriter", \
"Letter Gothic", courier, typewriter, monospaced'>\
%<roman=%'"Times New Roman", Georgia, times, roman, serif'>\
%<altroman=%' Georgia, "Times New Roman", times, roman, serif'>\
%<sans=%'"Trebuchet MS", Verdana, Arial, Helvetica, "Lucida Grande", \
Lucida, sans-serif'>\
%<comic=%'"Comic Sans MS", "Brush Script MT", Playbill, \
"Trebuchet MS", Arial, sans-serif'>\
The top line assigns to the variable %<typewriter> a list
of sort of typewriter-like fonts.
So when chpp works on this statement in writer.scss:
BODY.writerpage { color: %<writecolor>; background-color: %<writeback>;
background-image: url(white.gif);
font-family: %<typewriter>; font-weight: 900;
font-size: medium; }
it makes the substitutions and produces in writer.css (the actual
stylesheet) this:
BODY.writerpage { color: #000; background-color: #FFF;
background-image: url(white.gif);
font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter",
"Letter Gothic", courier, typewriter, monospaced;
font-weight: 900;
font-size: medium; }
If I find some other typewriter fonts or want them to have
a different order, I edit fonts.ccss, and that will
change all of typewriter fonts in all of my stylesheets the
next time I preprossess them.
Now back to writer.scss
%<rightback=%sand>\
%<leftback=%'#FDF'>\
These are just more assignment statements. Note that the
value of %<rightback> is %<sand> and the value of %<sand>
comes froms colors.ccss which was included before.
#include ../data/defaults.ccss
This includes a bunch of styles which will be used on almost
every page which are in a file defaults.ccss (such as centering
h1 - h4, class center, class both (for <br>) and so forth).
#include ../data/mainmenu.ccss
These are the styles for the menu selections which are in my
left sidebar. If I later decide to use top tabs for
the menu, I can change the menu styles by changing mainmenu.ccss
and when I preprocess writer.scss again, the changed menu
styles will be included.
#include ../code/getstyles.chml
This includes some functions definitions, the point of which we
will get to.
Back to writer.scss. These are the main styles for writer
pages. They are what make the writers section distinctive,
and why we want a writer.css:
STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }
This uses underlining for italics and red for bold, just
like on an old-timey typewriter. It is the point of this
stylesheet.
And finally we have:
%getstyles(%'writerpage')\
This is a function call. The function was defined by including
the file getstyles.chml .
This function takes a list of all the images on pages in the
writer's section. The list was made by another function defined
in getstyles.chml which was called when the html pages were
preprocessed. Here, this function uses the list of images
to look up the images in a hash sort of database and to makeup
the styles for each image.
Because of this function, it is important that all of the html
pages in this section be made up before the stylesheet. This
is accomplished by putting the preprossessing of the html
pages in a Makefile with the preprossing of the css pages in
the right order.
Here is the final writer.css after preprocessing (I have
wrapped some lines to fit an 80-column screen):
BODY.writerpage { color: #000; background-color: #FFF;
background-image: url(white.gif);
font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic",
courier, typewriter, monospaced; font-weight: 900;
font-size: medium; }
..hide { display: none; }
..all { clear: both; }
DIV.rightbar { width: 220px; margin-left: 10px; padding: 10px;
float: right; background-color: #FFC; }
DIV.leftbar { width: 180px; margin-left: 10px; padding: 5px;
float: left; background-color: #FDF;
color: #000; margin-right: 10px; }
..in { list-style-position: inside; }
DIV.text P { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
DIV.text P:first-child { text-indent: 0; }
DIV.text P:first-child:first-line { font-variant: small-caps;
font-weight: bold; }
DIV.text P:first-child:first-letter { font-variant: normal;
font-size: xx-large; font-weight: 900; float: left;
margin-right: 5px; font-family: "Courier New", "Times New Roman",
serif;
text-decoration: none; }
ADDRESS { text-align: center; font-weight: bold;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica,
"Lucida Grande", Lucida, sans-serif;
font-style: normal; color: #000;
background-color: transparent;
text-transform: uppercase; }
..b1 { font-family: Impact, "Arial Black", Chicago, carbon, lucida,
charcoal, "Trebuchet MS",sans-serif; font-weight: bold;
color: #CCC; background-color: transparent; }
..b1 A { font-family: Impact, "Arial Black", Chicago, carbon, lucida,
charcoal, "Trebuchet MS",sans-serif; color: #000; background-color:
transparent;
font-weight: 900; text-decoration: none; }
ABBR {text-decoration: none; }
..left { float: left; margin-right: 10px; }
..caption { font-size: xx-small; font-family: "Trebuchet MS",
Verdana, Arial, Helvetica, "Lucida Grande", Lucida, sans-serif;
font-weight: bold;
color="009" background-color: transparent; }
..center { text-align: center; }
BR.clearl { clear: left; }
..mar { margin-left: 5%; margin-right: 5%; }
..menu { text-indent: 0; text-align: center; }
..paypal { width: 120px; color: #30F; background-color: #FFF;
border-width: 3px; border-color: #00A; border-style: solid;
font-size: small;
font-family: Georgia, "Times New Roman", "Times Roman",
Times, Roman, serif; }
..amgive { width: 120px; height: 150px; }
STRONG.pph { color: #009; background-color: #FFF; text-decoration: none; }
..fpright { float: right; margin-left: 10px; }
..ftabsch { color: #FFF; background-color: #000; text-align: center; }
..ftabser { color: #000; background-color: #FFF; }
..ftrsr { border: 0; }
..ftdser { color: #000; background-color: #FFF; text-align: right; }
..ftdsel { color: #000; background-color: #FFF; text-align: left; }
..fser { font-family: "Trebuchet MS", Verdana, Arial, Helvetica,
"Lucida Grande", Lucida, sans-serif; font-size: x-small; }
..ffleft { width: 140px; float: left; margin-right: 10px; }
..gaybooks { text-align: center; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-size: large; }
..sone { width: 93px; height: 143px; }
..home { background-color: transparent; color #CCC;
font-family: Impact, "Arial Black", Chicago, carbon, lucida, charcoal,
"Trebuchet MS",sans-serif;
font-size: small; }
..support { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill, "Trebuchet MS",
Arial, sans-serif;
font-size: small; }
..works { background-color: transparent; color #CCC;
font-family: Garamond, "Century Schoolbook", "Bookman Old Style",
"Book Antiqua", book, Georgia, Times, "Times New Roman", serif;
font-size: small; }
..writer { background-color: transparent; color #CCC;
font-family: "Courier New", "Andale Mono", lucidatypewriter,
"American Typewriter", "Letter Gothic", courier, typewriter,
monospaced; font-weight: normal;
font-size: small; }
..lars { background-color: transparent; color #CCC;
font-family: "Courier New", "Andale Mono", lucidatypewriter,
"American Typewriter", "Letter Gothic", courier, typewriter, monospaced;
font-size: small; }
..links { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..formal { background-color: transparent; color #CCC;
font-family: "Times New Roman", Georgia, times, roman, serif;
font-size: small; }
..store { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..gay { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..leather { background-color: black; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..home A { background-color: transparent; color: #F3F;
text-decoration: none; font-family: Impact, "Arial Black",
Chicago, carbon, lucida, charcoal, "Trebuchet MS",sans-serif;
font-weight: 900;
font-size: small; }
..support A { background-color: transparent; color: #D00;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..works A { background-color: transparent; color: #000;
text-decoration: none; font-family: Garamond,
"Century Schoolbook", "Bookman Old Style", "Book Antiqua", book,
Georgia, Times, "Times New Roman", serif;
font-weight: 900;
font-size: small; }
..writer A { background-color: transparent; color: #000;
text-decoration: none; font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic", courier,
typewriter, monospaced;
font-weight: 900;
font-size: small; }
..lars A { background-color: transparent; color: #F60;
text-decoration: none; font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic", courier,
typewriter, monospaced;
font-weight: 900;
font-size: small; }
..links A { background-color: transparent; color: #000;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..formal A { background-color: transparent; color: #00A;
text-decoration: none; font-family: "Times New Roman",
Georgia, times, roman, serif;
font-weight: 900;
font-size: small; }
..adult A { background-color: #000; color: #0E0;
text-decoration: none; font-family: "Times New Roman", Georgia,
times, roman, serif;
font-weight: 900;
font-size: small; }
..store A { background-color: transparent; color: #090;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..gay A { background-color: transparent; color: #939;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..leather A { background-color: #000; color: #FFF;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }
..amgo { width: 12px; height: 12px; }
..amsearch { width: 126px; height: 32px; border: 0;}
..amshop { width: 120px; height: 90px; }
..mleaf { width: 45px; height: 30px; vertical-align: middle;}
#scribe { width: 50px; height: 50px; vertical-align: middle;}
..sportsban { width: 468px; height: 60px; border: 0;}
..ujack { width: 48px; height: 29px; vertical-align: middle;
margin-bottom: 5px;}
--
Lars Eighner -finger for geek code-
ei*****@io.com http://www.io.com/~eighner/
If it wasn't for muscle spasms, I wouldn't get any exercise at all.
