NOTE: This is part 3 of our 3 part Quick Start Tutorial. Part 1, Part 2.
Quick Start Tutorial Help Forum
Our third part is a brief demonstration of CSS "External Style Sheet" and PHP "Include files". You will find additional tutorial links (recommended) covering both applications here!
29) Using one "Style Sheet" to modify our entire Web site... We already have an Internal Style Sheet, in this case we will simply convert it into an "External Style Sheet".
a) Go to and Click File > New > Style Sheet. A blank document opens named "Untitled-?.css".
b) Go back to index.htm
c) Highlight content from line 9 to 14. Go to and Click Edit > Copy.
d) Go back to "Untitled-?.css", place your cursor at the top left hand of your empty document.
e) Go to and Click Edit > Paste.
f) Got to and Click File > Save As... Locate your "Tutorial" folder and Open your "include" folder.
g) "Save As" is prompting you to save your document as "Untitled-?.css". Change that to "easy.css" and click "Save".
easy.css should look like this (Use the back button to return!).
30) So far our Style sheet addresses our Menu font and border style...We need to define a style for the font or in this case, we'll define a global font in the "body" tag...
a) Focus on easy.css.
b) Open your CSS Wizard and select option "3".. "Add to an External Style Sheet".
c) Click on "Application - Test".
d) In "Style" Select "Apply Style to HTML Tag". Use the dropdown menu to locate "BODY".
e) Select "Active Font Set".
f) In "First" field locate "Arial".
g) In "Font Size" change the "length" to 12 (px).
h) Click Save... BODY { font-family: Arial; font-size:12px; } is added to easy.css.
i) Close CSS Wizard.
j) Save easy.css.
31) Connecting your "External Style Sheet" to your Web site...
a) Open "about.html", "specials.html", "sitemap.html" and "contact.html".
b) In "contact.html" create a "new line" right after <meta name="Keywords" content="Your keywords here...">;
c) Go to and Click Insert > CSS > Remote Link.
d) At the blinking cursor type "/include/easy.css".
e) Your line should look like this: <link rel="stylesheet" type="text/css" href="/include/easy.css">
f) Save and refresh results in "Synchro View"... Your font style changed to "arial".
g) Repeat the above steps for "about.html","specials.html" and "sitemap.html".
32) Let's also update our index.html page...
a) Open index.html
b) Highlight and Copy <link rel="stylesheet" type="text/css" href="/include/easy.css"> from "contact.html"
c) In "index.html" Highlight lines 7 to 16... Click "Paste".
d) Save.
Now, all changes to style.css will update your entire web site. Go ahead and experiment by changing font style, color and size...
PHP magic.. Teaching you PHP is beyond the scope of this quick tutorial. Suffice to say, PHP seamlessly integrates with HTML and can make updating and controlling large Web sites easy and painless. PHP is also a favorite way to make your Web site interactive with feedback forms and/or to extract data from a database.
NOTE: Not all sites are capable of using PHP, as it requires that PHP be installed on your server. Better hosting companies will have PHP capability, however smaller, free sites often will not.
To test and see if PHP works on your site do the following...
a) Open a new "PHP script" file.
b) Type the following between <? and ?> "phpinfo();".
c) Save As... "test.php" in your tutorial directory.
d) Upload the new file to your server.
e) Now visit the new page. If it looks like what you typed in, then you do not have PHP, if you see a "lot" of information, then PHP works on your site.
If you do not have PHP check with your hosting facility about getting it... If the above test returned positive then go through the following steps and make your new Web site "Dynamic".
33) Start with the "Header"...
a) Open a new "Plain Text" file.
b) Open "index.html"
c) Highlight lines 20 <body bgcolor="#FFFFFF"> to 36. Only include <td width="60%"> of line 36 and Copy.
e) Place your cursor at the top left hand corner of your plain Text file (Untitled-?.txt) and Paste.
f) Save your Untitled-?.txt As... easyhead.txt in your "Tutorial/include" folder.
Your "easyhead.txt" should look like this(Use the back button to return!).
34) Build your "Footer"...
a) Open a new "Plain Text" file.
b) Open "index.html"
c) Highlight the last 6 lines of your document starting at </td> and Copy.
e) Place your cursor at the top left hand corner of your plain Text file (Untitled-?.txt) and Paste.
f) Save your Untitled-?.txt As... easyfoot.txt in your "Tutorial/include" folder.
Your "easyfoot.txt" should look like this (Use the back button to return!).
35) Insert your "Header" and "Footer"...
a) Open "about.html".
b) Place your cursor at a new line just below <body bgcolor="#FFFFFF">.
c) Go to and Click Insert> PHP Tags > PHP tags.
d) And go to and Click Insert > PHP tags > Include.
e) After "/include/" type easyhead.txt.
f) Place your cursor at a new line just below "My About Page".
g) Go to and Click Insert> PHP Tags > PHP tags.
h) And go to and Click Insert > PHP tags > Include.
i) After "/include/" type easyfoot.txt.
j) In "Libraries" Click on the HTML tab. Use the dropdown menu and select "HTML 4.1".
k) In "about.html" highlight "My About Page".
l) Select and Double Click "blockquote" in HTML 4.1.
m) "My About Page" should look like this <blockquote>My About Page</blockquote>.
n) Save about.html.
o) Repeat the above steps with "specials.html", "sitemap.html" and "contact.html".
about.html should look like this (Use the back button to return!).
Upload updated content to your server and enjoy the results... Your next step is to start experimenting and never stop! If you need additional help remember to check our Forum for answers. Or check the Forum and help someone else.
Roger Remacle
Alleycode Support
