Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /customers/9/b/5/fun-tech.se/httpd.www/php_tutorial/class.page.php on line 130 OOP php5 HOWTO - CSS, Cascading Style Sheets

The php5 object oriented web design howto - CSS, Cascading Style Sheets

Why CSS?

So what is CSS, Cascading Style Sheets?

The idea behind CSS is to separate design and page content, and this is a good thing since it makes life simpler and the page more consistent. A good page that illustrates this in a nice looking way is csszengarden.com.

The basics

Let's start to change the colors, into something different like black and amber. And to do this we need a css file.

Filename: screen.css

body {
    /* Page background color = black */
    background: #000000;
    /* Textcolor = amber */
    color:      #FFBF00;
}

And then we add a link to it in the page object.

Filename: class.page.php

<?php
class page
{
    function __construct($title)
    {
        print "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">\n";
        print "<html>\n";
        print "<head>\n";
        print "  <title>".$title."</title>\n";
        print "  <link rel=\"stylesheet\" title=\"std\" ".  
              "        media=\"screen\" href=\"screen.css\" type=\"text/css\">\n";
        print "  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n";
        print "</head>\n";
        print "<body>\n";
    }

    function __destruct()
    {
        print "<hr>\n";
        print "<a href=\"first.php\">The first page</a><br>\n";
        print "<a href=\"second.php\">The second page</a><br>\n";

        print "</body>\n";
        print "</html>\n";
    }
}
?>

Notice that the pages that is calling still don't need to be modified at all, but when you view them they will have different colors.

Filename: first.php

<?php
require_once("class.page.php");
$page = new page("My first page...");
?>

<h1>Hello</h1>
<p>What a nice little page</p>


Filename: second.php

<?php
require_once("class.page.php");
$page = new page("And the second page...");
?>

<h1>Hello again.</h1>
<p>Just another page.</p>


How nice to only have 1 file you need to edit if you like to change the colors, just imagine to have a big site with thousands of file and you need to change the background color by editing all the thousand files individually...