      
HTML_CSS
This tutorial is about Pear's HTML_CSS and how to use it. Table of Content: 1. Introduction to PEAR 2. Introduction to HTML_CSS 3. Installing HTML_CSS 4. Using HTML_CSS 1. Introduction to PEAR What is PEAR? (from the PEAR website) PEAR is short for "PHP Extension and Application Repository" and is pronounced just like the fruit. The purpose of PEAR is to provide: - A structured library of open-sourced code for PHP users - A system for code distribution and package maintenance - A standard style for code written in PHP - The PHP Foundation Classes (PFC) - The PHP Extension Community Library (PECL) - A web site, mailing lists and download mirrors to support the PHP/PEAR community PEAR is a community-driven project with the PEAR Group as the governing body. The project has been founded by Stig S. Bakken in 1999 and quite a lot of people have joined the project since then. How do I install PEAR? The installation guide on how to install PEAR 2. Introduction to HTML_CSS This PEAR package is a powerfull CSS generator that allows you to add style elements easily without having to care about validity a lot. It can also be used in combination with HTML_Page. 3. Installing HTML_CSS HTML_CSS can be installed in many different ways. The easiest way is the PEAR package manager. (Root access is required for this) (requires the latest version of the PEAR package manager to be installed.) Automatic Installation: Go to your shell and run: $ pear install HTML_CSS PEAR package manager now downloads and installs the specified package. Semi-Automatic Installation: Another way to install a package offline is putting the package in your PEAR dir. Then run the following command: $ pear install HTML_CSS.tgz This installs the package (downloaded as a .tgz) without needing to have an internet connection. Manual Installation: To install the package manually, let's put the package in /includes/ Use the following code to tell PHP where to look for our package: <?php ini_set(\"include_path\", '/var/www/www.example.com/includes/'); ?> Now we have set our include_path, we can simply require our package like this: require_once 'HTML/CSS.php'; After installing HTML_CSS, read on for the instructions on how to use it. 4. Using HTML_CSS This step of the tutorial will teach you the basics of HTML_CSS and how to use it. What we will be learning: - How to add style elements - How to output the style sheet. - How to add specific style elements to specific tags - How to use HTML_CSS in combination with HTML_Page The following code will make a basic CSS style sheet and output it to the screen: require_once 'HTML/CSS.php'; $css = new HTML_CSS(); // define styles $css->setStyle('body', 'background-color', '#0c0c0c'); $css->setStyle('body', 'color', '#ffffff'); $css->setStyle('h1', 'text-align', 'center'); $css->setStyle('h1', 'font', '16pt helvetica, arial, sans-serif'); $css->setStyle('p', 'font', '12pt helvetica, arial, sans-serif'); // output the stylesheet directly to browser $css->display(); // or save it to a file //$css->toFile('example.css'); I will now explain the whole bit. $css = new HTML_CSS(); Obviously this initializes the class. It won't work without this! // define styles $css->setStyle('body', 'background-color', '#0c0c0c'); $css->setStyle('body', 'color', '#ffffff'); $css->setStyle('h1', 'text-align', 'center'); $css->setStyle('h1', 'font', '16pt helvetica, arial, sans-serif'); $css->setStyle('p', 'font', '12pt helvetica, arial, sans-serif'); As you might have suspected, this sets the style elements. $css->setStyle('style1', 'background-color', '#000'); Use this code to assign a CSS class. $css->display(); Display the css sheet to the file. // or save it to a file $css->toFile('example.css'); Another possibility is to save it to a file. This might come in handy sometimes when making a CSS generator. // let's make the bod tag inherit from 'p' $css->setSameStyle('body', 'p'); This sets the style for body element the same as p element. // and let's put this into a tag: echo '<body style=\"' . $css->toInline('body') . '\">'; This will put inline style, like this: <body style=\"background-color:#0c0c0c;color:#ffffff;font:12pt helvetica, arial, sans-serif;\"> Combining HTML_CSS with HTML_Page The following code bit will combine HTML_CSS with HTML_Page and output the CSS into the page's header. I will explain very detailed below. require_once 'HTML/Page.php'; require_once 'HTML/CSS.php'; // generate an instance $css = new HTML_CSS(); // define the various settings for <body> $css->setStyle('body', 'background-color', '#0c0c0c'); $css->setStyle('body', 'color', '#ffffff'); // define <h1> element $css->setStyle('h1', 'text-align', 'center'); $css->setStyle('h1', 'font', '16pt helvetica, arial, sans-serif'); // define <p> element $css->setStyle('p', 'font', '12pt helvetica, arial, sans-serif'); // create a new HTML page $p = new HTML_Page(); $p->setTitle(\"My page\"); // it can be added as an object $p->addStyleDeclaration($css, 'text/css'); $p->setMetaData(\"author\", \"My Name\"); $p->addBodyContent(\"<h1>headline</h1>\"); $p->addBodyContent(\"<p>some text</p>\"); $p->addBodyContent(\"<p>some more text</p>\"); $p->addBodyContent(\"<p>yet even more text</p>\"); // output the finished product to the browser $p->display(); require_once 'HTML/Page.php'; require_once 'HTML/CSS.php'; We need to require both HTML_CSS and HTML_Page for this one. // generate an instance $css = new HTML_CSS(); Initialize HTML_CSS in order to work with the class. // define the various settings for <body> $css->setStyle('body', 'background-color', '#0c0c0c'); $css->setStyle('body', 'color', '#ffffff'); // define <h1> element $css->setStyle('h1', 'text-align', 'center'); $css->setStyle('h1', 'font', '16pt helvetica, arial, sans-serif'); // define <p> element $css->setStyle('p', 'font', '12pt helvetica, arial, sans-serif'); We are setting the style elements for body, p and h1. // create a new HTML page $p = new HTML_Page(); $p->setTitle(\"My page\"); Initialize HTML_Page and set the page title to 'My page'. // it can be added as an object $p->addStyleDeclaration($css, 'text/css'); $p->setMetaData(\"author\", \"Cliff\"); We add the CSS in our HTML_CSS object to the general output using addStyleDeclaration() We also set 'Cliff' as meta author. $p->addBodyContent(\"<h1>headline</h1>\"); $p->addBodyContent(\"<p>some text</p>\"); $p->addBodyContent(\"<p>some more text</p>\"); $p->addBodyContent(\"<p>yet even more text</p>\"); // output the finished product to the browser We add some simple output to see if our style is working :) // output the finished product to the browser $p->display(); Finally, we output everything to the browser. I hope you enjoyed reading this tutorial and actually learnt something. More tutorials coming soon! 
|
