Basic concepts

What is a rule or "rule set" ?

A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.

Rule structure

Figure 4.1. Rule structure

Declaration block

The HTML_CSS::setStyle() method is the only one to handle a declaration block.

For example, to declare a such rule :

p { padding: 5px; }

Here is the php code to create the same sentence with HTML_CSS :

<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
$css->setStyle('p', 'padding', '5px');
$css->display();
?>

Grouping declarations

You can use more than one declaration within a declaration block. Each declaration must be separated with a semicolon ";".

For example, to declare a such rule :

p { padding: 5px; margin: 1px; }

Or, with whitespace added to aid readability :

p {
padding: 5px;
margin: 1px;
}

Here is the php code to create the same sentence with HTML_CSS :

<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
$css->setStyle('p', 'padding', '5px');
$css->setStyle('p', 'margin', '1px');
$css->display();
?>

Notice that we use twice HTML_CSS::setStyle() method call to declare each declaration block for the same selector.

Grouping selectors

When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma. For example :

h1, h2, h3, h4 { padding: 1em; }
.highlight p, .highlight ul { margin-left: .5em; }
#main p, #main ul { padding-top: 1em; }

To produce such result, we will need help of 3 new methods : HTML_CSS::setSameStyle(), HTML_CSS::createGroup() and HTML_CSS::setGroupStyle().

<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
// two selector groups only
$css->setStyle('.highlight p', 'margin-left', '.5em');
$css->setSameStyle('.highlight ul', '.highlight p');
// or even this way
$g2 = $css->createGroup('#main p, #main ul');
$css->setGroupStyle($g2, 'padding-top', '2em');
// more than two selector groups
$g1 = $css->createGroup('h1, h2, h3, h4');
$css->setGroupStyle($g1, 'padding', '1em');
$css->display();
?>

We should take care than grouping two selectors may be write either with HTML_CSS::setSameStyle() or with couple HTML_CSS::createGroup() and HTML_CSS::setGroupStyle(). When we have to group three or more selectors, there is only one possibility: couple HTML_CSS::createGroup() and HTML_CSS::setGroupStyle().

CSS comments

You can insert comments in CSS to explain your code. Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/". Comments can appear before or within rule sets as well as across multiple lines.

HTML_CSS 1.0.0 has not yet ability to handle comment such as :

/* Comment here */
p
{
margin: 1em; /* Comment here */
padding: 2em;
/* color: white; */
background-color: blue;
}
/*
multi-line
comment here
*/

	Warning
	The common mistake that people make when writing comments is to expect getting all comments describe with such code below : it's an error.

$css->setComment('comment here');
$css->setStyle('p', 'margin', '1em');
$css->setStyle('p', 'padding', '2em');
$css->setComment('color: white;');
$css->setStyle('p', 'background-color', 'blue');
$css->setComment('
multi-line
comment here
');

You will only get such result:

/*
multi-line
comment here
*/
p {
margin: 1em;
padding: 2em;
background-color: blue;
}

Only one comment is allowed due to usage of parent class method HTML_Common::setComment().

Prev	Up	Next
Chapter 4. Overview	Home	Chapter 5. Grouping selectors

HTML_CSS : The Definitive Guide