The IDF Archives

Free webspace Room

Click to return to Archives

CSS style sheets both remote and embeded from CPS.

I am playing with CSS (cascading style sheets) just to test myself, it is as usual trial and error on my part.
I am playing with embedded and external (separate style sheet page, linked to html page).
Below is my test page for embedded CSS, if you want to play with it copy and paste it and save as style.htm.

THIS ONE IS EMBEDDED STYLE, the next post will be external CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MXweb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<style>
body{border: double thick white}
</style>

Part two,

External or linked style sheet, two pages one CSS the other HTML linked together.
Copy and past both in one file.
Save first one as main.css the second as index.html.
Have fun if you want to. Peter

Eplaination of linked style sheets.

One Style Sheet--Many Pages

The Style Sheet will be a simple text file with a .css suffix. Let's say you name your style sheet "timstyle". Its name would become "timstyle.css". The suffix is required for browsers to recognize it as a style sheet rather than a simple mesh of letters.
Place this command on your page to call for the Style Sheet:

<LINK REL=stylesheet HREF="http://www.your.page/timstyle.css" TYPE="text/css">
Here's what's happening:

LINK tells the browser something must be linked to the page.
REL=stylesheet tells the browser that this linked thing is relative to this page as a style sheet.
HREF="---" denotes where the browser will find the style sheet.
TYPE="text/css" tells the browser that what it is reading is text that will act as a Cascading Style Sheet. If the document isn't text with a .css suffix - no dice.
Every page that contains this command will be affected by the one style sheet you created and placed in your directory. One sheet - many pages.

The Style sheet, note no html code is used or required, when saveing use the extension .css not htm

a:link { color: blue }
a:visited { color: blue }
a:hover { color: red }
h1 { font-size: 36px; color: black; font-family: "Times New Roman", Times, serif }
h2 { font-size: 24px; color: brown; font-family: "Times New Roman", Times, serif }
h3 { font-size: 18px; color: red; font-family: "Times New Roman", Times, serif }
h4 { font-size: 16px; color: orange; font-family: Verdana, Arial, Helvetica, sans-serif }
h5 { font-size: 12pt; color: gray; font-family: Verdana, Arial, Helvetica, sans-serif }
h6 { font-size: 10pt; color: green; font-family: Verdana, Arial, Helvetica, sans-serif }
body { border: thick double #FFFFFF; }

The html Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="main.css." type="text/css">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta content="MSHTML 6.00.2800.1264" name=GENERATOR>
</head>
<body bgColor=#99ffcc leftmargin=20 topmargin=20>
<h1 align=center>Font Test CSS</h1>
<h2 align=center>Just To See</h2>
<h3 align=center>How the Fonts</h3>
<h4 align=center>Look when<h4>
<h5 align=center>using</h5>
<h6 align=center>CSS styles</h6>
</body>
</html>