Making each HTML page the same style- but how?

J

Julian Milano

I have around 100 HTML pages where each has it's own defined formatting for
page & text. I was told that to make all pages conferr to a particular
formatting style, I could use a style-sheet. So, I added the following line
to each file:

<link href="pagestyle.css" rel="stylesheet" type="text/css">

and in a file called "pagestyle.css", I have the following:

BODY { scrollbar-arrow-color: #DDEEFF;
scrollbar-3dlight-color: #13486D;
scrollbar-highlight-color: #DDEEFF;
scrollbar-face-color: #1C5780;
scrollbar-shadow-color: #DDEEFF;
scrollbar-darkshadow-color: #13486D;
scrollbar-track-color: #13486D;
color: #FFFFFF;
background: #13486D;
cursor:default; font-family:Curlz MT; font-size:24pt
}
SELECT {COLOR: #DDEEFF;
BACKGROUND-COLOR: #13486D;
width: 100%; font-style:normal; font-variant:normal; font-weight:normal;
font-size:14pt; font-family:Twentieth Century Poster1
}
TEXTAREA {
COLOR: #DDEEFF;
BACKGROUND-COLOR: #13486D;
padding-left:0px;
border: 1px none #ddeeff; ; font-style:normal; font-variant:normal;
font-weight:normal; font-size:18pt; font-family:Terminal
}

The only formatting change I get is that the background of each page turns
to blue, but the text stays the same for each page, not taking its new
formatting from the style sheet. What am I doing wrong?

Sorry about the long msg, but here's the first half of my file:

<html>
<link href="pagestyle.css" rel="stylesheet" type="text/css">
<head>
<meta name=Generator content="Microsoft FrontPage 4.0">
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Originator content="Microsoft Word 9">
<TITLE>Chapter 3 - Viewing and Updating Student Information, Assigning and
Changing Classes, and Suspending and Terminating Students</TITLE>

<style>
<!--

p.MsoNormal, li.MsoNormal, div.MsoNormal
{
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:Arial;}
h1
{
margin-top:0cm;
margin-right:0cm;
margin-bottom:12.0pt;
margin-left:0cm;
font-size:16.0pt;
text-align:left;
page-break-after:avoid;
font-family:Tahoma;}
h2
{
margin-top:18.0pt;
margin-right:0cm;
margin-bottom:6.0pt;
margin-left:0cm;
page-break-after:avoid;
font-size:12.0pt;
font-family:Tahoma;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->
</style>
</head>

<body lang=EN-AU>

<table border="0" width="100%" bgcolor="#C0C0C0">
<tr>
<td>

<h1><font color="#FFFFFF"><a name="_Toc30678285"></a>Chapter 3 -
Viewing and Updating Student Information, Assigning and Changing Classes,
and
Suspending and Terminating Students</font></h1>

</td>
</tr>
</table>

<p class=MsoNormal><i><span lang=EN-US>This
chapter is pertinent to all IYPsystem options.<br><br>
</span></i></p>

<p class=MsoNormal><span lang=EN-US>This chapter
discusses how to:</span></p>


<br>

<ul style="MARGIN-TOP: 0cm" type=disc>
<li class=MsoNormal><span lang=EN-US>View student records</span>
<li class=MsoNormal><span lang=EN-US>Change (update) student
information </span>
<li class=MsoNormal><span lang=EN-US>Assign students to new
classes</span>
<li class=MsoNormal><span lang=EN-US>Change class
assignments</span>
<li class=MsoNormal><span lang=EN-US>Suspend students</span>
<li class=MsoNormal><span lang=EN-US>Terminate students<br>
</span></li>
</ul>

<p class=MsoNormal><span lang=EN-US>To do any of these tasks,
begin by clicking the <b>Enrolled Students
Only </b>or <b>Include Discharges</b>
buttons from the Main Menu (Figure 3.1). <br>
<br>
</span><IMG height=328
src="./Chapter%203%20-%20Viewing%20and%20Updating%20Student%20Information_fi
les/image004.gif"

width=356 ><span lang=EN-US>
<br>
<br></span></p>

<p class=MsoNormal style="MARGIN-LEFT: 46.8pt; TEXT-INDENT: -10.8pt"><span
lang=EN-US style="FONT-FAMILY: Symbol">·<span style="FONT: 7pt 'Times New
Roman'">&nbsp;&nbsp;&nbsp;
</span></span><b><span
lang=EN-US>Enrolled Students Only </span></b><span lang=EN-US>enables you
to
retrieve the records of students who are currently enrolled</span></p>

<p class=MsoNormal style="MARGIN-LEFT: 46.8pt; TEXT-INDENT: -10.8pt"><span
lang=EN-US style="FONT-FAMILY: Symbol">·<span style="FONT: 7pt 'Times New
Roman'">&nbsp;&nbsp;&nbsp;
</span></span><b><span
lang=EN-US>Include Discharges </span></b><span lang=EN-US>enables you to
retrieve the records of students who are currently enrolled <i>and</i>
students who have been discharged
during the current school year.</span></p>

<p class=MsoNormal style="MARGIN-LEFT: 46.8pt;
TEXT-INDENT: -10.8pt">&nbsp;</p>

<p class=MsoNormal>The
<b>Student Information form</b> then appears.</p>

<P><STRONG><FONT size=5 color="#FFFFFF"><span style="background-color:
#0000FF">Chapter 3 QuickJump
Index:</span></FONT></STRONG></P><FONT size=2>

How can I fix the formatting?
 
S

Stefan B Rusynko

CSS Styles are applied at 3 levels in order of priority) and are based on how you apply them

First of all, Any HHTML formatting "rules" over any CSS styles
So a Html tag like <FONT size=5 color="#FFFFFF"> will rule over any styles

Then the styles are applied in the following Order:

1st inline styles in your html as in:
<span style="FONT: 7pt 'Times New Roman'">
- Remove all your inline styles in your pages

2nd embedded styles in your HEAD section as in:
<style><!--
.............
--> </style>
- Remove those embedded styles, or copy them to your stylesheet

3rd external styles (linked style sheets) as in your link:
<link href="pagestyle.css" rel="stylesheet" type="text/css">

Also your inline styles (like style="MARGIN-LEFT: 46.8pt; TEXT-INDENT: -10.8pt") are word processor based and not globally supported
in Html



| I have around 100 HTML pages where each has it's own defined formatting for
| page & text. I was told that to make all pages conferr to a particular
| formatting style, I could use a style-sheet. So, I added the following line
| to each file:
|
| <link href="pagestyle.css" rel="stylesheet" type="text/css">
|
| and in a file called "pagestyle.css", I have the following:
|
| BODY { scrollbar-arrow-color: #DDEEFF;
| scrollbar-3dlight-color: #13486D;
| scrollbar-highlight-color: #DDEEFF;
| scrollbar-face-color: #1C5780;
| scrollbar-shadow-color: #DDEEFF;
| scrollbar-darkshadow-color: #13486D;
| scrollbar-track-color: #13486D;
| color: #FFFFFF;
| background: #13486D;
| cursor:default; font-family:Curlz MT; font-size:24pt
| }
| SELECT {COLOR: #DDEEFF;
| BACKGROUND-COLOR: #13486D;
| width: 100%; font-style:normal; font-variant:normal; font-weight:normal;
| font-size:14pt; font-family:Twentieth Century Poster1
| }
| TEXTAREA {
| COLOR: #DDEEFF;
| BACKGROUND-COLOR: #13486D;
| padding-left:0px;
| border: 1px none #ddeeff; ; font-style:normal; font-variant:normal;
| font-weight:normal; font-size:18pt; font-family:Terminal
| }
|
| The only formatting change I get is that the background of each page turns
| to blue, but the text stays the same for each page, not taking its new
| formatting from the style sheet. What am I doing wrong?
|
| Sorry about the long msg, but here's the first half of my file:
|
| <html>
| <link href="pagestyle.css" rel="stylesheet" type="text/css">
| <head>
| <meta name=Generator content="Microsoft FrontPage 4.0">
| <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
| <meta name=Originator content="Microsoft Word 9">
| <TITLE>Chapter 3 - Viewing and Updating Student Information, Assigning and
| Changing Classes, and Suspending and Terminating Students</TITLE>
|
| <style>
| <!--
|
| p.MsoNormal, li.MsoNormal, div.MsoNormal
| {
| margin:0cm;
| margin-bottom:.0001pt;
| font-size:10.0pt;
| font-family:Arial;}
| h1
| {
| margin-top:0cm;
| margin-right:0cm;
| margin-bottom:12.0pt;
| margin-left:0cm;
| font-size:16.0pt;
| text-align:left;
| page-break-after:avoid;
| font-family:Tahoma;}
| h2
| {
| margin-top:18.0pt;
| margin-right:0cm;
| margin-bottom:6.0pt;
| margin-left:0cm;
| page-break-after:avoid;
| font-size:12.0pt;
| font-family:Tahoma;}
| ol
| {margin-bottom:0cm;}
| ul
| {margin-bottom:0cm;}
| -->
| </style>
| </head>
|
| <body lang=EN-AU>
|
| <table border="0" width="100%" bgcolor="#C0C0C0">
| <tr>
| <td>
|
| <h1><font color="#FFFFFF"><a name="_Toc30678285"></a>Chapter 3 -
| Viewing and Updating Student Information, Assigning and Changing Classes,
| and
| Suspending and Terminating Students</font></h1>
|
| </td>
| </tr>
| </table>
|
| <p class=MsoNormal><i><span lang=EN-US>This
| chapter is pertinent to all IYPsystem options.<br><br>
| </span></i></p>
|
| <p class=MsoNormal><span lang=EN-US>This chapter
| discusses how to:</span></p>
|
|
| <br>
|
| <ul style="MARGIN-TOP: 0cm" type=disc>
| <li class=MsoNormal><span lang=EN-US>View student records</span>
| <li class=MsoNormal><span lang=EN-US>Change (update) student
| information </span>
| <li class=MsoNormal><span lang=EN-US>Assign students to new
| classes</span>
| <li class=MsoNormal><span lang=EN-US>Change class
| assignments</span>
| <li class=MsoNormal><span lang=EN-US>Suspend students</span>
| <li class=MsoNormal><span lang=EN-US>Terminate students<br>
| </span></li>
| </ul>
|
| <p class=MsoNormal><span lang=EN-US>To do any of these tasks,
| begin by clicking the <b>Enrolled Students
| Only </b>or <b>Include Discharges</b>
| buttons from the Main Menu (Figure 3.1). <br>
| <br>
| </span><IMG height=328
| src="./Chapter%203%20-%20Viewing%20and%20Updating%20Student%20Information_fi
| les/image004.gif"
|
| width=356 ><span lang=EN-US>
| <br>
| <br></span></p>
|
| <p class=MsoNormal style="MARGIN-LEFT: 46.8pt; TEXT-INDENT: -10.8pt"><span
| lang=EN-US style="FONT-FAMILY: Symbol">·<span style="FONT: 7pt 'Times New
| Roman'">&nbsp;&nbsp;&nbsp;
| </span></span><b><span
| lang=EN-US>Enrolled Students Only </span></b><span lang=EN-US>enables you
| to
| retrieve the records of students who are currently enrolled</span></p>
|
| <p class=MsoNormal style="MARGIN-LEFT: 46.8pt; TEXT-INDENT: -10.8pt"><span
| lang=EN-US style="FONT-FAMILY: Symbol">·<span style="FONT: 7pt 'Times New
| Roman'">&nbsp;&nbsp;&nbsp;
| </span></span><b><span
| lang=EN-US>Include Discharges </span></b><span lang=EN-US>enables you to
| retrieve the records of students who are currently enrolled <i>and</i>
| students who have been discharged
| during the current school year.</span></p>
|
| <p class=MsoNormal style="MARGIN-LEFT: 46.8pt;
| TEXT-INDENT: -10.8pt">&nbsp;</p>
|
| <p class=MsoNormal>The
| <b>Student Information form</b> then appears.</p>
|
| <P><STRONG><FONT size=5 color="#FFFFFF"><span style="background-color:
| #0000FF">Chapter 3 QuickJump
| Index:</span></FONT></STRONG></P><FONT size=2>
|
| How can I fix the formatting?
|
|
|
| --
|
|
| Julian Milano
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top