Freepages-Help-L Archives

Archiver > Freepages-Help > 2005-04 > 1112446632


From: "G R Gilbertson" <>
Subject: External style sheet for Hollly
Date: Sat, 2 Apr 2005 13:57:12 +0100


Holly,

Here's something to play with:

1. Open a new page in any text editor (if you're running Windows you could
use Notepad which you'll find in Start / Programs / Accessories / Notepad )
and enter the following:

<style>

p {text-align:left;
margin-left:6.5%;
margin-right:5%;
}

p.indent1 {
text-indent:-1em;
margin-left:13%;
padding-right:7%;
}

p.indent2 {
margin-left:14%;
padding-right:7%
}

p.footnote {
margin-left:12%;
margin-right:12%;
color:#999999
}

p.center {
text-align:center;font-size:8pt;color:#0000ff
}

h2 {color:#ffcc00}

h4 {color:#ff0000; margin-left:3%}

body {scrollbar-face-color:#ff0000}
</style>

2. Save it somewhere, say on your desktop for now. For this example call it
"hollyfun" without the quotation marks. When saved its name will appear as
hollyfun.txt

3. Close your text editor.

4. Right click on "hollyfun.txt" to bring up a menu then left click on
Rename. Rename the file "hollyfun.css" again without the quotation marks.
You'll be warned the file may become unusable if you change the extension
(suffix) but go ahead and left click on Yes (I'm sure I want to change it).
You've now created an external style sheet to which a web page can refer for
instructions on how to present various aspects.

5. Copy and paste one of your existing html pages into the same place as the
hollyfun.css file you created above (in this example on the desktop but you
could put them both in a folder somewhere else). Rename it "hollcss1.htm"

6. Open "hollcss1.htm", left click on the View menu then on Source. This
shows (usually in Notepad if the page is not a big one) the html which
creates your page. Cut everything except the DTD (first line which is the
document type definition) and the opening and closing html, head and body
tags.

7. Paste the following between the opening and closing head tags:

<!-- Define the type of Cascading Style Sheet being used -->
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- Call an external StyleSheet called hollyfun.css -->
<link rel=stylesheet type="text/css" href="hollyfun.css">

8. Put the following between the opening and closing body tags:

<h2>
LARGE YELLOW HEADING
</h2>

<h4>
SMALLER RED HEADING
</h4>

<p>
Text with a margin
</p>

<p class="indent1">
<font size="3">
Indented text
</font>
</p>

<p class="indent2">
<font size="3">
Double indented text
</font>
</p>

<p class="footnote">
<Font Size="2">
This is a footnote
</font>
</p>
</font>
</p>

9. Save and close this (Notepad) file containing this new html. This web
page will refer to "hollyfun.css" for instructions.

10. Open "hollcss1.htm" in your browser (preferably IE6) and you should see
the effects of the css.

Style sheet references are notorious for not working in all browsers nor all
versions of a particular browser which is why I say preferably IE6 - the
only browser in which I've tried the above.

Play around with the values in hollyfun.css (e.g. percentages and color
codes) and see the effect on your web page. You'll notice the scroll bar has
changed color and you could put any of the other css references Pat listed
into "hollyfun.css" to do other things to the scroll bar.

You can call the css file anything you like as long as you use the same name
in the head section of your web page. If you want to write a css file for
yourself be careful with the colons and semi-colons i.e. there's a colon
after the thing you want to affect (e.g. margin-left) and a semi-colon after
how much you want to affect it by e.g. 14%. The same holds for all other
attributes and values. You can also refer multiple web pages to one external
style sheet. Change anything in that one style sheet and all the web pages
which refer to it will change.

It's worth buying a book on css if you're really interested. It can be
frustrating to learn but you can do wonderful things with it.

Roger


This thread: