Source code file: css_example.php


<!DOCTYPE html>
<!--css_example.php-->

<html>
<head>

<?php include 'css.htm';?>

</head>

<body>

<?php 

        $pageName = basename($_SERVER['PHP_SELF']); /* Returns The Current PHP File Name */ 
        
        echo "<h3>&nbsp;" . $pageName . "</h3>  ";
        echo "&nbsp;<a href='../my-php/read_code.php?file=" . $pageName . "' target='_blank'>   View Code  </a>";
        

?>

    <table background="images/bg.png" style="width:98%" style="height:640px">

        <tr>
              <td width=20% style="vertical-align:top"><br>
                    
                    <?php include 'menu.php';?>
              </td>
                
              <td height="95%" bgcolor="white" style="vertical-align:top">
                
                    
                    <h2>Cascading Style Sheets</h2>
                    
                    <br>
                    Cascading Style Sheets are used to insure uniformity throughout the website where they are used. For this example website 
                    I created the html for the background color, paragraph settings, text colors for H1 and H2 tags, table padding and table text alighnment 
                    settings, all together in a separate file, named css.htm. This file is called to insert it's contents between the header html tags, &#60;head&#62; &#60;/head&#62; . 
                    
                    I insert a PHP include file code in the page header for each webpage that I want the same CSS to be used. This way I only need to update 
                    one file, the css.htm file, to make changes that are uniform across all pages that use the cascading style sheet.
                    
                    <br> Here is an example of the php I used to include a file:<br><br>
                    &#60;?php include 'css.htm';?&#62; <br><br> Here are the results while using the css.htm file which includes the page and table styles:<br><br>
                   
                    <h1>&#60; H1 &#62; This is the style and color set for the H1 html tag in the css.htm file. &#60; /H1 &#62;</h1><br>
                    <h2>&#60; H2 &#62; This is the style and color set for the H2 html tag in the css.htm file. &#60; /H2 &#62;</h2><br>
                    <h3>&#60; H3 &#62; the H3 style is not defined in the css.htm file. &#60; /H3 &#62;</h3><br>
                    &nbsp;In the css.htm file the page background colors is set to #e6fff2, a pale green, and a little extra table padding is used, so that the text is slightly 
                    indented in each column.<br>
                    <p>&#60; p &#62;This is an example of text between the paragraph tags using the setting in the css.htm file. notice it's not black. &#60; /p &#62;</p>
                     
                    Insert your CSS include file between the page head tags.<br>&#60; head &#62; <br>&#60;?php include 'css.htm'; ?&#62;<br> &#60; /head &#62;
                    <br><br> Here's the contents of the css.htm file that loads between the head tags.<br>
                   
                    <br> <img src="images/css.jpg" alt="styles used on this website"><br><br>      
                   
               </td>
          </tr>  
    </table>

</body>
</html>