Stylesheets are used to add the look of the data. Sytlesheet languages convert the data into the common known file formats as html or pdf. Many different ways exist:

  1. FOSIs (Formatting Output Specification Instances)

  2. DSSSL (Document Style Semantics and Specification Language) is ISO/IEC 10179:1996

  3. CSS (Cascading Style Sheets) used to expand html

  4. XSL (Extensible Style Language) the most modern way today

In simple words, the stylesheet converts the tags into other tags or attributes that contain the visual characteristics of the data, as type and size of the font.

Cascading Style Sheets

Cascading Style Sheets allow to deviate from the default style HTML is using. In fact how HTML is be shown per default depends on the browser. The default view of an HTML browser can also be documented as default css. This default stylesheet is then overwritten by the custom css.

Css is considered as an own style sheet language and is separated from html. This is why it has to be linked to the html code using a link or meta tags.

In the past html pages used many different tags to differently format the contents. Today many of those tags are nomore used, since the look and feel can be changed with css. And the css can be made. changed and modified individually.

It also helps to separate semantics from formatting by moving the styles in a central space (one location in the html file or in a central location). Firefox lets you disable/enable the Style Sheet support under View > Page Style.


CSS in a html tag

Inline usage of CSS makes use of the style attribute

        <p style="text-align: center; font-weight: bold;">Hello World!</p>

Just this <p> gets the style other not. Elements that are used once on a page can make use of it as the <body> tag.

CSS definition in the html head

Internal usage of CSS

Example 11.8. CSS in head tag

  <meta http-equiv="content-type" content="text/html; 
  <style type="text/css">                
    p {   
        text-align: center;                        
        font-weight: bold; 

The definition is done one time per page. This way allows to used CSS in xsl stylesheets and have therefore all style related stuff in a single file.

CSS as link to a file

External usage of CSS using a file from

Example 11.9. CSS link to file

  <meta http-equiv="content-type"content="text/html; 
  <link rel="stylesheet" 

The stylesheet file contains something as:

p {
  color: green; 
  background-color: black; 

Typically href points to a style sheet in the same directory tree not using http.

CSS classes and ids

CSS classes allow to assign a class to a tag and having the same tag appear differently.

Example 11.10. CSS classes and ids

p.code {
  color: green; 
  background-color: black; 
p.text {
  color: black; 
  background-color: white;

and then it can be used by adding an attribute as:

        <p class="code">emerge gencfs</p>


        <p class="text"> This is some text </p>

p.code is restricted to be used for <p> elements where as .code can be used for all kinds of tags.

<p class="center large"> assigns two classes to an tag.

id follow the same logic as CSS classes but use the # character instead of the . character and are used as

        <p id="text">Gencfs is a simple graphical front end.</p>

The difference between classes and ids is that ids can be used just once on the page since the id should be unique.

Line breaks

The usual way would be adding the <br> tag and to not run into xml/xhtml the <br>< /br> tags get line brakes. CSS allows to solve this in a cleaner way by adding

{ display: block; }

Or if no line brake is desired

{ display: inline; }

Or if nothing at all has to be displayed

{ display: none; }


Comments can be added to styles

/*This is a comment*/


DSSL (Document Style Semantics and Specification Language) is defined by ISO/IEC 10179:1996 and are well supported. DSSL have the file extension *.dsl and are often modular, this means one stylesheet includes an other one. The modularity gives a lot of *.dsl files under /usr/share/sgml/docbook/dsssl-stylesheets-*/ and might therefore be confusing. Make sure you use the master *.dsl file. Open it in an editor to verify that, since some have comments.

Linurs Servernest startpage