Stylehack

CSS as a Parseable Extension Exercise

NOTE:  If you already completed the SHTML Variant Exercise you can use the stylesheet and web pages you created/used there after making these minor changes:
 
a) Rename it to a ‘.css’ extension and <b>add the number 1 to the file name (i.e., mystyles.shtml —> mystyles1.css) so you don’t overwrite the existing stylesheet;
 
b) Make copies of the related web pages with a ‘.html’ and ‘.shtml’ extensions and add the number 1 to the file name(s) (i.e., mypage.html —> mypage1.html) so you don’t overwrite the existing pages;
 
c) Change the stylesheet link in the head of the pages your renamed in Step (b) to the stylesheet you renamed in Step (a);
 
d) You can now proceed directly to the HTACCESS section of this material.

RECOMMENDED:  Make a copy of your original stylesheet and save it where it won’t be overwritten so that you can restore it after this exercise; or conversely, make a copy of your original stylesheet and related web pages and rename them by adding a 1 to the end of each name so that you don’t use the original files for this exercise.

1. Open the stylesheet in a Text Editor.
    
2. Go through your stylesheet and write down all the colors used and what they are used for, as in this example:
    
   

   header bar, navigation text links = #df5946
   body text = #333
   H1 = #a3c040

   
   (Who picked that color combination?? eek! hahaha)
    
3. Add a couple of empty lines at the very top of the file so there is room to add the X/SSI declarations.
    
4. Optional: On line 1, add a comment reminding yourself what the next section is designed to do:
    
   

   <!-- This is where I declare my colors as variables -->

   
   Why is this optional? Because when the stylesheet is parsed by the server all the X/SSI statements will be removed from the file and empty lines left in their place. However, any comment lines you added will remain in the file and will be visible to anyone who looks at the stylesheet. I don’t want anyone looking to see comment lines there, so I won’t add it to my stylesheet. But what you do with yours is up to you!
    
5. Let’s set up the first variable declaration, either on Line 1 or on Line 2 as applicable to your file.
   

   TIP:  You must type it   ~ e x a c t l y ~   as shown for formatting purposes — do not add spaces between the -- (two dashes) and the #,  nor between the # and the s in ’set’.

   
   

   <!--#set var="headerNavColor" value="#df5946" -->

   This line of X/SSI is setting (#set) the variable (var) named “headerNavColor” to the color we are using (value=), where “headerNavColor” is a name I made up that means something to me and the value is set to the first color from the list I created in Step 2 above.

6. Write the variable name on your color list (from Step 2)   ~ e x a c t l y ~   as you typed it in the variable declaration in Step 5 — variables are case sensitive!
    
7. That wasn’t so bad! Repeat Steps 5 & 6 using the second color on your list and a new variable name for that color.
    
8. Repeat Steps 5 & 6 for each remaining color on your list.
    
9. Don’t forget to save your stylesheet periodically as you work.
    
10. Next we’ll replace each instance of the color in the stylesheet with a call to the variables you defined in Steps 5 - 8. Find the first reference to the first color on your list and replace it with a variable call, as in this example:
    

    TIP:  Don’t forget that spacing must be exactly as shown! See Step 5 for more info.

    .headerbox { background-color: #df5946; }

    becomes….

    .headerbox { background-color: <!--#echo var="headerNavColor" -->; }

    
    This piece of SSI will place (#echo) the value assigned to the variable “headerNavColor” in this line of your stylesheet when it is parsed by the server, resulting in a line that looks exactly like it did in the original stylesheet:
    

    .headerbox { background-color: #df5946; }

    
     
11. Ok, go through the stylesheet and replace each instance of a color that you set up as a variable declaration in Steps 5 - 8 using Step 10 as a guide. For example:
     
    

    a .navlink { color: <!--#echo var="headerNavColor" -->; }
    h1 {color: <!--#echo var="h1Color" -->; }
    body {color: <!--#echo var="textColor" -->; }

    
     
12. Save this stylesheet file and close it.
     
13. Still using a Text Editor, open a web page that uses this stylesheet.
     
14. Save a copy of this web page file (Save As) and give it the opposite extension, i.e. if the original is ‘.html’ Save [it] As ‘.shtml’, or vice versa.
     

1. Use a Text Editor to create a new file named ‘htaccess.txt’. THE NAME MUST BE ALL LOWERCASE.
    
2. On Line 1 of this new file, type this in   ~ e x a c t l y ~   as shown:
    
   

   AddHandler server-parsed .css

   
    
3. It is not necessary to add a hard return (ENTER). Be sure to save the file as ‘htaccess.txt’ and close the Text Editor.
    

1. Download it to your local computer and open it in a Text Editor.
    
2. Type this in   ~ e x a c t l y ~   as shown, either at the end of the file or on a new line directly under any other AddHandler line(s) in the file:
    
   

   AddHandler server-parsed .css

   
    
3. It is not necessary to add a hard return (ENTER). Just save the file (keeping the name ‘.htaccess’) and close the Text Editor.
    

LEGAL DISCLAIMER:  This material is offered AS IS, no liability is assumed or warranty implied. If you are at all concerned about creating/rewriting and uploading an HTACCESS file to your server, please read the box labeled IMPORTANT at the end of this section and follow those steps as they relate to creating a new directory to which you upload the files you create in this exercise! I cannot/will not take any responsibility for you overwriting an existing .htaccess file in error and causing your site to crash and burn.

1. Upload the stylesheet and any web pages created during this exercise to your server as you would normally do.
    
2. Upload the HTACCESS file you created or modified, with these provisions:
    
   
   1. Be sure that it uploads in ASCII format, NOT Binary.
       
   2. If you created a new file and saved it as “htaccess.txt” as directed, you need to rename it to “.htaccess” (period at front, no period or extension at the end, all lowercase). You can rename it on your local computer before uploading it or rename it after you have uploaded it to your server, whichever you prefer (or know how to do)
       

IMPORTANT!  If you created a new HTACCESS file and while attempting to upload that file (Step 2a) or rename it on the server (Step 2b) you are asked to confirm “Overwrite Existing .htaccess” (or something to that effect)… DO NOT OVERWRITE a pre-existing file! Whatever program/tool you are using to view, modify, upload/download files on your server is not showing you the existing HTACCESS file. If you overwrite an existing .htaccess file without intending to do so your site may cease to work! Instead, follow this procedure to change where you test the results of this exercise:
 

• Cancel the upload of the HTACCESS file;
   
• Create a new directory on your server called “test”;
   
• Change to this new directory;
   
• Upload the stylesheet, the two web pages necessary for this exercise AND the HTACCESS file to this new directory;
   

1. Use a web browser to load the web page with the ‘.shtml’ extension. It should look exactly like it did when it used the plain old ‘.css’ file!
   

   TIP:  If you get an error, you probably have extra spaces in your X/SSI statements (refer to Steps 5 and 8 of “Modifying the Stylesheet and Related HTML/SHTML Web Page(s)”). Check the stylesheet you created in this exercise, fix any problems you find and upload it again. Reload the page in your browser by pressing F5 or CTRL+F5 to force a reload from the server.

2. What a deal! Now load the version of this page with the ‘.html’ extension in your browser.
    
3. Cool beans! This AddHandler directive in the ‘.htaccess’ file tells the server to parse files with a ‘.css’ extension just like a file with a ‘.shtml’ or ‘.php’ extension before serving it. You don’t have to use ‘.shtml’ as the extension for the actual web page unless you need to do so!
    
4. Open the modified stylesheet on your local computer and change one of the colors declared in the variables at the top of the file. Upload the changed file to your server and refresh either page in your web browser. Voila! The old color is instantly changed to the new color throughout the page, as applicable!
    
5. If you uploaded a new ‘.htaccess’ file to your public_html directory, or if you modified & replaced an existing ‘.htaccess’ file in that directory, all pages that call the modified stylesheet will reflect the color change. Oops! That might not be what you intended when you did this exercise. If you used your site’s existing stylesheet and overwrote it on the server, be sure to change the colors assigned to the variables back to their original values before you consider this exercise complete.
    

<!--#include file="cssvariables.css" -->

…where “cssvariables.css” is the name of a file you create that contains the variable declarations (See “Modifying the Stylesheet and Related HTML/SHTML Web Page(s)”). Notice that the variables file must also have an extension of ‘.css’ or the variables will not be parsed by the server and will therefore not exist when that file is included via the #include statement.

TIP:  An ‘.htaccess’ file only impacts the directory (and any directories under it) in which it is installed. So if you want this to only work for pages in a specific area of a site — for instance a subdomain — simply create/modify an .htaccess file for that directory and don’t create/change an ‘.htaccess’ file for the public_html directory.