how to create DTML pages

This is the External Style Sheet for Example 1-54 and it demonstrates simple Styles
for the BODY, P, and DIV Elements by regular Element assignment.
 Sample-External-CSS-2.html
BODY { border-color: rgb(0%,0%,100%); background-color:#ccffcc;
border-style: inset; border-width: 10px; margin: 0px;
padding: 0px; width: 555px; }
P { font-size: 24pt; color: red; }
DIV { font-size: 14pt; color: black; }
This example shows you a typical use of assigned Styles that can be used as a set
of global default Properties for your Elements, which can be kept in an External Style Sheet
and then loaded for multiple documents.
Example 1-55 Part 1: Sample255.html



Sample 255 - CSS Example 1-55 LINK STYLE SHEET
<link href="Sample255-External-CSS-3.html" rel="STYLESHEET" type="text/CSS"></link>


Here I am just hovering in the Body without another Element.
Hey I got a paragraph to hang out with.

That's cool but I'm in a division. Holy mergatroids Batman, this sounds
positively mathematically compartmentalized.

No Prob, I got the major domo Heading 1.

Yeah, well I'd rather be blue than big.

I may be smaller but my ego isn't in need of surgery.

118 Part I — Dynamic HTML
This is the External Style Sheet part of the example, and it shows a hypothetical set
of global Properties that one could use to define most essential Elements, which can then
be augmented to your specific requirements.
You might find this useful as a template for your documents after you spice it up a
bit. Most of these global parameters are set to render what a normal HTML 2.0 document
would look like. Obviously the last five assigned Element Styles are atypical. (Yes, it is
possible to assign more than one Style to the same Element within a Style Definition.)
Example 1-55 Part 2: Sample255-External-CSS-3.html
BODY {
margin: 5px;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
font-size: 14pt;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU,
DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT,
CODE, KBD, SAMP, IMG, SPAN { display: inline }
LI { display: list-item }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder }
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right:3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
CHAPTER 1 — Style Sheets 119
MENU { margin: 0 }
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
P { text-indent: 40px; color: purple;
font-size: 14pt; line-height: 1.2em;
font-family: Palatino, "New York", Times, serif; }
DIV { text-indent: 40px; color: navy;
font-size: 14pt; line-height: 1.2em;
font-family: Helvetica, Times, "New York", Palatino, serif; }
H1 { color: red; font-size: 30pt; background-color: black;
border-style: ridge; border-color: #ff5555; border-width: 20px;
font-family: BlackOak, Moonlight, Clarendon, Cloister, fantasy; }
H2 { color: blue; font-size: 35pt;
border-style: groove; border-color: aqua; border-width: 20px;
font-family: Moonlight, BlackOak, Clarendon, Cloister, fantasy; }
H3 { color: green; font-size: 25pt;
border-style: double; border-color: lime; border-width: 20px;
font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; }
120 Part I — Dynamic HTML
Multiple External Style Sheets
in one document
You can load multiple External Style Sheets into one document by using a LINK
Element for each one. One reason why you might want to do this is if you have a site that
has several different External Style Sheets that are each used for a specific type of
formatting purpose (created in the past for other individual documents) that you now
want to incorporate into a new document at various places. Here's the mini-example:
<link href="Sample256-External-CSS-4.html" rel="STYLESHEET" type="text/CSS"></link>
<link href="Sample256-External-CSS-5.html" rel="STYLESHEET" type="text/CSS"></link>
<link href="Sample256-External-CSS-6.html" rel="STYLESHEET" type="text/CSS"></link>
External Style Sheet precedence issues
The later an External Style Sheet is loaded, the more precedence it will have in
terms of overriding the Style Properties for the various Elements it is assigned to. In other
words, the last External Style Sheet in the code sequence will override all previous ones.
Styles that are defined locally, that is, in the document in question, will have complete
precedence over any conflicting Styles from all External Style Sheets. Be very aware that
this can be tricky to keep track of in your head and when trying to debug your code for
large and complex sites.
This example uses three different LINK Elements to load in three different External
Style Sheets, which are then all applied to the document Sample256.html, which is a very
rudimentary example just to get you into the concept. Typically they are much more
involved. Just a reminder to notice that the LINK Elements are in the HEAD Element but
not within the STYLE Element.
Example 1-56 Part 1: Sample256.html



<title>Sample 256 - CSS Example 1-56 LINK Multiple STYLE SHEETs </title>
<link href="Sample256-External-CSS-4.html" rel="STYLESHEET" type="text/CSS"></link>
<link href="Sample256-External-CSS-5.html" rel="STYLESHEET" type="text/CSS"></link>
<link href="Sample256-External-CSS-6.html" rel="STYLESHEET" type="text/CSS"></link>
CHAPTER 1 — Style Sheets 121



Hey can somebody get me out of this paragraph?

I thought you liked being in that paragraph.

So passion didn't compensate your intellectual predilections.

Grass always greener eh?

Wait, that's my line.

THE H4 TEST.

If the preceding bordered H4 Heading is Navy with 50 point silver text then you
know that the Properties in the local document have overridden the Properties from
the External-CSS-6 Style Sheet.


This is the first External Style Sheet used in Example 1-56 Part 1. Part 2 gets
loaded into Part 1 by the first LINK Element contained in Part 1.
Example 1-56 Part 2: Sample256-External-CSS-4.html
P { text-indent: 40px; color: purple;
font-size: 14pt; line-height: 1.2em;
font-family: Palatino, "New York", Times, serif; }
DIV { text-indent: 40px; color: navy;
font-size: 17pt; line-height: 1.2em;
font-family: Helvetica, Times, "New York", Palatino, serif; }
122 Part I — Dynamic HTML
This is the second External Style Sheet used in Example 1-56 Part 1. Part 3 gets
loaded into Part 1 by the second LINK Element contained in Part 1.
Example 1-56 Part 3: Sample256-External-CSS-5.html
H1 { color: red; font-size: 25pt; background-color: black;
border-style: ridge; border-color: #ff5555; border-width: 20px;
font-family: BlackOak, Moonlight, Clarendon, Cloister, fantasy; }
H2 { color: blue; font-size: 35pt;
border-style: groove; border-color: aqua; border-width: 20px;
font-family: Moonlight, BlackOak, Clarendon, Cloister, fantasy; }
This is the third External Style Sheet used in Example 1-56 Part 1. Part 4 gets
loaded into Part 1 by the first LINK Element contained in Part 1.
Example 1-56 Part 4: Sample256-External-CSS-6.html
H3 { color: green; font-size: 25pt;
border-style: double; border-color: lime; border-width: 20px;
font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; }
H4 { color: purple; font-size: 20pt;
border-style: inset; border-color: olive; border-width: 20px;
font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; }
Multiple

THE H5 TEST.

THE H2 TEST.

THE H3 TEST.

THE H4 TEST.

 Dynamic HTML
Wrapping Up and Looking Ahead
This ends the discussion on Style Sheets created with CSS Syntax. You now have
all the information you need to create your own Style Sheets for your documents and a
wealth of examples that you can extract code from on the CD-ROM. Feel free to reuse any
segments of code from any of the examples.
One final note concerning browsers and Style Sheets: Navigator and Internet
Explorer render Style Sheets with varying responses to the official Style Sheet specification.
Unfortunately for coders, they are both right in their interpretations, so at least for now, if
you want to include Style Sheets in your documents and achieve cross-platform fluidity,
you are going to have to research the differences inherent in Explorer and create parallel
code to accommodate them.