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

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.


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

$page = new page("My first page...");

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

Filename: second.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...