Writing Style Sheets
If you use Internet Explorer you can, if you wish, apply your
own Style Sheet so that you can view Internet pages exactly as you
want to. Loading your own Cascading Style Sheet allows you to
define font colours, sizes, weights, page margins, backgrounds and
a whole lot more.
Simply put, a Style Sheet lists the way that the text of a
page will be displayed. On this page we show you how to set up
a basic Style Sheet which you can then use to alter the way web
pages appear on your screen.
Style Sheets are text files which have the extension 'css'. To
start the process you need to open a text editor (Windows Notepad
is ideal for this). It loads with a blank page; you need to
save this with a name such as 'mystyle.css' (you
will have to enter the 'css' bit otherwise it will default to
'txt').
In this file you can now enter various pieces of text to make
parts of the page appear as you want them to. The most common items
to change are font face, font size and font colour. All you need to
do is enter the elements to be changed into the text file in the
following format:
{font-family: value}
{font-size: value}
{font-color: value}
So if you wanted all the text on your page to appear as Arial,
18 point and yellow, the above lines would read:
{font-family: Arial}
{font-size: 18pt} - note you can also use percentage values
rather than point sizes
{font-color: yellow}
In order to save space you can combine similar elements, so
for all the font elements you could make the above three lines read
instead (note where the spaces and the semicolons [;] are
placed):
{font-family: Arial;font-size: 18pt;font-color: yellow}
To complete your basic text changing style sheet you need to
specify which pieces of text the style applies to. Most paragraph
text on web pages (such as this you are reading now) is set by the
<p> or <div> tag so to get the page text to change you
amend the line above to read:
p {font-family: Arial;font-size: 18pt;font-color:
yellow}
There are other text elements on the page, the most common are
list items (<li>)and table text (<td>). Again these can
be combined into one line, thus:
p,li,td,div {font-family: Arial;font-size: 18pt;font-color:
yellow}
Some page text may be preformatted (<pre>), so
it's useful to have a second entry in your style sheet for that
type. It will usually be displayed in a courier (typewriter) font,
so your style sheet will now read:
p,li,td {font-family: Arial;font-size: 18pt;font-color:
yellow}
pre {font-family: courier;font-size: 18pt;font-color: yellow}
You may wish to change the background colour of a web page.
Some types of colour blindness require a dark page background. This
is achieved by adding a line similar to this:
body { background-color: value}
where value is the colour of the page background you
want to use (but make sure your style sheet text colour is not the
same!).
The final style sheet containing the choices listed above
would now read:
p,li,td {font-family: Arial;font-size: 18pt;font-color:
yellow}
pre {font-family: courier;font-size: 18pt;font-color: yellow}
body { background-color: black}
Save your file when finished, and then in Internet Explorer,
point to Tools (or View in earlier versions) > Internet Options
> Accessibility and point the entry 'Format documents using my
style sheet' to your own file.