view release on metacpan or  search on metacpan

docs/CSS.tex  view on Meta::CPAN

@chapter Adding your own style sheet

The various modules provide methods for generating HTML fragments, something
@file{sys.cgi} (@pxref{sys.cgi}) uses as an example.  The HTML is done in a
style-sheet friendly way.

Cascading Style Sheets (CSS) are easy enough that we recommend looking at the
existing style sheet (@file{cgi/CfgTie.css}) and skim the spec
(@url{http://www.w3.org/Style/CSS/}). The only really non-straightforward thing
is the nesting of styles and cascading. You don't need to read the entire long
document in full to understand it; Skimming it is plenty.

The key to style-sheets is @dfn{classes}.  HTML markup can include a class
attribute to indicate how it should rendered.  An example might be:
@example
	<td class="cfgval">blah</td>
@end example

CfgTie uses the @samp{cfgval} class to indicate values for various settings,
and @samp{cfgattr} to indicate the variable names that are being set.

@heading Nesting in style sheets
The following CSS fragment means that paragraphs nested inside TDs of class
@samp{cfgattr}  will have black text and yellow backgrounds. 

@example
   TD.cfgattr P @{ color: black; background: yellow; @}
@end example

Contrast this with:

@example
   TD.cfgattr, TD.cfgval @{ ... @}