Stylesheets

Stylesheets
	Chapter 11. XML

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:

FOSIs (Formatting Output Specification Instances)
DSSSL (Document Style Semantics and Specification Language) is ISO/IEC 10179:1996
CSS (Cascading Style Sheets) used to expand html
XSL (Extensible Style Language) separating stylesheet from xml

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.

See http://www.w3.org/Style/ http://www.w3.org/TR/CSS1/ https://www.w3schools.com/css/default.asp

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 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

<head>        
  <meta http-equiv="content-type" content="text/html; 
  charset=ISO-8859-1">
  <title>XHTML</title>
  <style type="text/css">                
    p {   
        text-align: center;                        
        font-weight: bold; 
      }        
  </style>
</head>

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 http://www.w3.org/StyleSheets/Core/

Example 11.9. CSS link to file

<head>
  <meta http-equiv="content-type"content="text/html; 
  charset=ISO-8859-1">
  <title>XHTML</title>
  <link rel="stylesheet" 
     href="http://www.w3.org/StyleSheets/Core/Ultramarine" 
     type="text/css">
</head>

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 elements where as .code can be used for all kinds of tags.

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 tag and to not run into xml/xhtml the tag 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

Comments can be added to styles

/*This is a comment*/

CSS query

A CSS query allows to ask the web browser for different things.

CSS media query allows to get information about dark mode, orientation screnn resolution, ...

Other queries exist as for fonts, feature, ....

A web page on a mobile device can annoy when it illuminates ambient during the night. A Dark Mode can be used to switch dynamically to a black background.

@media (prefers-color-scheme: dark)

is a CSS media query to check if Dark Mode is active

@media (prefers-color-scheme: light)

would do the opposite

<style>
        body {
            background-color: #ffffff; /* Default mode */
            color: #000000;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        /* Dark mode */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #121212; /* Dark mode */
                color: #ffffff;
            }
        }
</style>

Reference

http://www.tizag.com/cssT/reference.php

DSSSL

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.


Publishing XML Documents		Processing Instructions