<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Chapter 10. Examples
</title>
<link rel="stylesheet" href="book.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.69.1" />
<link rel="start" href="index.html" title="HTML_CSS Manual" />
<link rel="up" href="pt04.html" title="Part IV. Appendixes" />
<link rel="prev" href="pt04.html" title="Part IV. Appendixes" />
<link rel="next" href="ch10s02.html" title="Parsing data sources usage " />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c3 {font-family: monospace;}
h2.c2 {clear: both}
p.c1 {font-weight: bold}
/*]]>*/
</style>
</head>
<body>
<table class="htmlcssHeader">
<tr>
<td>
<img src="img/pearsmall.gif" align="left" alt="PEAR logo" />
<h1>
HTML_CSS : The Definitive Guide
</h1>
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center">
Chapter 10. Examples
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="pt04.html">Prev</a>
</td>
<th width="60%" align="center">
Part IV. Appendixes
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch10s02.html">Next</a>
</td>
</tr>
</table>
</div><br />
<br />
</td>
</tr>
</table>
<div class="chapter" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title">
<a name="examples" id="examples"></a>Chapter 10. Examples
</h2>
</div>
<div class="toc">
<p class="c1">
Table of Contents
</p>
<dl>
<dt>
<span class="sect1"><a href="ch10.html#examples.basic">Basic
usage</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href="ch10.html#examples.basic.1">Simple
selectors with one or more property</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch10.html#examples.basic.2">Combine selectors with one or more
property</a></span>
</dt>
</dl>
</dd>
<dt>
<span class="sect1"><a href="ch10s02.html">Parsing data sources
usage</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href=
"ch10s02.html#examples.parse.1">Parse a string that contains
CSS information</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch10s02.html#examples.parse.2">Parse multiple data sources at
once</a></span>
</dt>
</dl>
</dd>
<dt>
<span class="sect1"><a href="ch10s03.html">Searching for
usage</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href=
"ch10s03.html#examples.grep.1">Searching for selectors and
properties</a></span>
</dt>
</dl>
</dd>
</dl>
</div>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c2">
<a name="examples.basic" id="examples.basic"></a>Basic usage
</h2>
</div>
<div class="toc">
<dl>
<dt>
<span class="sect2"><a href="ch10.html#examples.basic.1">Simple
selectors with one or more property</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch10.html#examples.basic.2">Combine
selectors with one or more property</a></span>
</dt>
</dl>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="examples.basic.1" id="examples.basic.1"></a>Simple
selectors with one or more property
</h3>
</div>
<p>
This example give you ability to define some styles from scratch
and produce a simple style sheet output directly to browser.
</p>
<p>
Here is the result we should expected :
</p>
<div class="css c3">
<ol>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span>: #0c0c0c;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">color</span>: #ffffff;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
h1 <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">text-align</span>: <span class=
"kw2">center</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font</span>: 16pt helvetica, arial,
<span class="kw2">sans-serif</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
p <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font</span>: 12pt helvetica, arial,
<span class="kw2">sans-serif</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
<div class="example">
<a name="id4802474" id="id4802474"></a>
<p class="title c1">
Example 10.1. Simple selector definitions
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/CSS.php'</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span> = <span class=
"kw2">new</span> HTML_CSS<span class=
"br0">(</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// define styles</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'body'</span>, <span class=
"st0">'background-color'</span>, <span class=
"st0">'#0c0c0c'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'body'</span>, <span class="st0">'color'</span>,
<span class="st0">'#ffffff'</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'h1'</span>, <span class="st0">'text-align'</span>,
<span class="st0">'center'</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'h1'</span>, <span class="st0">'font'</span>,
<span class="st0">'16pt helvetica, arial,
sans-serif'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'p'</span>, <span class="st0">'font'</span>,
<span class="st0">'12pt helvetica, arial,
sans-serif'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// output the stylesheet directly to
browser</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">display</span><span class="br0">(</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="examples.basic.2" id="examples.basic.2"></a>Combine
selectors with one or more property
</h3>
</div>
<p>
This example give you ability to define another selector with same
properties as the previous one already defined. The simple style
sheet is output directly to browser.
</p>
<p>
Here <code class="literal">p</code> and <code class=
"literal">div#black</code> selectors share the same properties.
</p>
<p>
Here is the result we should expected :
</p>
<div class="css c3">
<ol>
<li class="li1">
<div class="de1">
p, div<span class="re0">#black <span class=
"br0">{</span></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font</span>: 12pt helvetica, arial,
<span class="kw2">sans-serif</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
<div class="example">
<a name="id4802552" id="id4802552"></a>
<p class="title c1">
Example 10.2. Combine selectors properties
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/CSS.php'</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span> = <span class=
"kw2">new</span> HTML_CSS<span class=
"br0">(</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// define styles</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setStyle</span><span class="br0">(</span><span class=
"st0">'p'</span>, <span class="st0">'font'</span>,
<span class="st0">'12pt helvetica, arial,
sans-serif'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">setSameStyle</span><span class=
"br0">(</span><span class="st0">'div#black'</span>,
<span class="st0">'p'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// output the stylesheet directly to
browser</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">$css</span>-><span class=
"me1">display</span><span class="br0">(</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<table class="htmlcssFooter">
<tr>
<td align="left">
HTML_CSS : The Definitive Guide
</td>
<td align="right">
v 1.1.3 : February 18, 2007
</td>
</tr>
</table>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="pt04.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="pt04.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch10s02.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Part IV. Appendixes
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Parsing data sources usage
</td>
</tr>
</table>
</div>
</body>
</html>
