# XML - Managing Data Exchange/CSS


------------------------------------------------------------------------

## Learning objectives

Upon completion of this chapter, for CSS you will be able to

-   know the benefits of using CSS
-   know the limitations of CSS, so you are able to find the best
    solution for your document
-   know how to implement and use CSS on an XML document

## Introduction

CSS (Cascading Style Sheets) is a language that describes the
presentation form of a structured document.

An XML or an HTML based document does not have a set style, but it
consists of structured text without style information. How the document
will look when printed on paper and viewed in a browser or maybe a
cellphone is determined by a style sheet. A good way of making a
document look consistent and easy to update is by using CSS, which
Wikipedia is a good example of.

## History of CSS

Style sheets have been around in one form or another since the
beginnings of HTML in the early 1990s. Various browsers included their
own style language which could be used to customize the appearance of
web documents. Originally, style sheets were targeted towards the
end-user; early revisions of HTML did not provide many facilities for
presentational attributes, so it was often up to the user to decide how
web documents would appear.

As the HTML language grew, however, it came to encompass a wider variety
of stylistic capabilities to meet the demands of web developers. With
these capabilities, style sheets became less important, and an external
language for the purposes of defining style attributes was not widely
accepted until the development of CSS.

The concept of Cascading Style Sheets was originally proposed in 1994 by
Håkon Wium Lie. Bert
Bos was at the time working on a
browser called Argo which used its own style sheets; the two decided to
work together to develop CSS.

A number of other style sheet languages had already been proposed, but
CSS was the first to incorporate the idea of \"cascading\" \-- the
capability for a document\'s style to be inherited from more than one
\"style sheet.\" This permitted a user\'s preferred style to override
the site author\'s specified style in some areas, while inheriting, or
\"cascading\" the author\'s style in other areas. The capability to
cascade in this way permits both users and site authors added
flexibility and control; it permitted a mixture of stylistic
preferences.

Håkon\'s proposal was presented at the \"Mosaic and the Web\" conference
in Chicago in 1994, and again with Bert Bos in 1995. Around this time,
the World Wide Web Consortium was being established; the W3C took an
interest in the development of CSS, and organized a workshop toward that
end. Håkon and Bert were the primary technical staff on the project,
with additional members, including Thomas Reardon of Microsoft,
participating as well. By the end of 1996, CSS was nearly ready to
become official. The CSS level 1 Recommendation was published in
December 1996.

Early in 1997, CSS was assigned its own working group within the W3C.
The group began tackling issues that had not been addressed with CSS
level 1, resulting in the creation of CSS level 2, which was published
as an official Recommendation in May 1998. CSS level 3 is still under
development as of 2005.

## Why use CSS?

### Cleaner Looking Code

A mass of HTML tags which manage design elements generally obscure the
content of a page, making the code harder to read and maintain. Using
CSS, the content of the page is separated from the design, making
content production in formats such as HTML, XHTML, and XML as easy as
possible.

### Pages Will Load Faster

Non-CSS design typically consists of more code than a CSS-designed
website.

In a non-CSS design, the information about the design is reloaded every
time a visitor accesses a new page. Additionally, the finer points of
design are executed awkwardly. For example, a common method of defining
the spacing of a web page is to use blank GIF images inside tables.

Using CSS keeps content and design separated, so much less code will be
needed. The CSS file loads only once per session, and is saved locally
in the user\'s cache. All information about dimensions is defined in
this stylesheet, rendering awkward constructions like blank GIF images
unnecessary.

Although an increasing amount of Internet users have broadband, the size
of a web page can be important to users who are limited to dial-up
connections. Suppose a dial-up user accesses a company\'s website, and
this visitor experiences lengthy loading times. It is quite possible
that the visitor would stop their visit or form an opinion of this
company as \"slow.\" In this way, a seemingly small difference could
mean added revenue.

Furthermore, bandwidth is not free and most webhosting firms limit the
amount used. In fact, many hosts charge based on bandwidth usage, so
less code could also reduce costs.

### Redesign Becomes Trivial

When used properly, CSS is a very powerful tool that gives a web
architect complete control over a site\'s presentation. It is a notation
in which the rules of a design are governed. This becomes very useful
for a large website which requires a consistent appearance for every
type of element (such as a title, a subtitle, a piece of code, or a
paragraph).

For example, suppose a company has a 1,200 page website which took many
months to complete. The company then undergoes a rebranding and thus the
font, the background, the style of hyperlinks, and so forth needs to be
updated with the new corporate design. If the site was engineered
properly using CSS, this change would be as simple as editing the
appropriate lines of a single CSS file (assuming it is an external
stylesheet). If CSS is not used, the code that manages the appearance is
stored in each of the pages. In order to update the design in this case,
each file would have to be updated *individually*.

### Graceful Degradation

{{\...}}

### Accessibility

People with lowered vision or users with special web browsers, e.g.
people that are blind, will probably like a CSS designed website better
than one not designed using CSS. Because CSS allows you to define the
reading order separately from the visual layout it makes it easier for
the special web browsers to read the page. Bear in mind that anyone who
wears glasses or contact lenses can be considered to have lower vision.

Many designers lock the font size in pixels which prevents the user
changing the font size. Good CSS design allows the user to increase or
decrease the font size at will making pages more usable. A significant
number of web surfers like to use a magnification of 300% or more.

Giving the user the opportunity to change the font size will not make
any difference for the normal user, but it can make a difference for
people that have lowered vision. Ask yourself the question: who is the
website made for? The visitors or the designer?

Websites designed with CSS tend to display better than table-based
designs in the web browsers used in PDAs and cellphones. The use of
cellphones for browsing will probably continue to increase. A
table-based design will make web pages inaccessible to these users.

Be careful with your CSS designs. Misuse of absolute positioning and
absolute rather than relative sizes can make your webpages less
accessible rather than more accessible. A good table design is better
than a bad CSS design.

### Better results in search engines

Extensive use of tables confuses the search engines, they can actually
get problems separating content from code. The search engine robots
start reading on the top of the page, and they want to find out how
relevant the webpage is as fast as possible. Again, less code will make
it easier for the search engines to find code that\'s relevant, and it
will probably give your webpage a better ranking.

## Disadvantages of CSS

The use of CSS for styling has few disadvantages. However some browsers,
especially older ones, will sometimes present the page incorrectly. When
I was gathering information for this chapter it became clear to me that
many experts think that formatting XML with CSS is not the future of the
web. The main view is that XSL will be the new standard. So make sure
you read through the previous chapter of this book one more time. The
formatting parts of XSL and CSS will be quite similar. For example, you
will be able to use all CSS1 and CSS2 properties and values in XSL with
the same meaning as in CSS.

## CSS levels

The first CSS specification to become an official W3C Recommendation is
CSS level 1, published in December 1996. Among its capabilities is
support for:

-   Typeface\|Font properties such as typeface and emphasis
-   Color of text, backgrounds, and other elements
-   Text attributes such as spacing between words, letters, and lines of
    text
-   alignment (typesetting)\|Alignment of text, images, tables and other
    elements
-   Margin, border, padding, and positioning for most elements
-   Unique identification and generic classification of groups of
    attributes

The W3C maintains the CSS1
Recommendation.

CSS level 2 was developed by the W3C and published as a Recommendation
in May 1998. A superset of CSS1, CSS2 includes a number of new
capabilities, among them the absolute, relative, and fixed positioning
of elements, the concept of media types, support for aural style sheets
and bidirectional text, and new font properties such as shadows. The W3C
maintains the CSS2 Recommendation.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes
poorly-supported features and adds already-implemented browser
extensions to the specification. It\'s currently a Candidate
Recommendation.

CSS level 3 is currently under development. The W3C maintains a CSS3
progress report.

## CSS Syntax and Properties

-   The section on selectors has moved to CSS
    Programming/Selectors.
-   The section on color has moved to CSS
    Programming/Color.
-   The section on text has moved to CSS Programming/Fonts and
    Text.
-   The section on borders has moved to CSS Programming/Box
    Model.
-   The section on positioning has moved to CSS
    Programming/Positioning.

The following section contains a list of some of the most common CSS
properties. A complete list can be found
here. The
syntax for the use of CSS in an XML document is the same as that for
HTML. The difference is in how you link your CSS file to the XML
document. To do this you have to write `<code>`{=html}

```{=html}
<?xml-stylesheet href="''X.css''" type="text/css"?>
```
`</code>`{=html} before the root element of your XML document, where
*X.css* of course is the name of the CSS file.

As mentioned earlier in this chapter, CSS is a set of rules that
determines how elements in a document will be shown. The rule has two
parts: a selector and a group of one or more declarations surrounded by
braces (curly brackets):

:   

    :   selector { declaration; \...}

The selector is normally the tag you wish to style. Here is an example
of a simple rule containing a single declaration:\
::h1 { color: red; } Result: All h1-elements in the document are shown
with the text color red.

### The general syntax

Rules are usually defined like this:

:   

    :   selector { declaration; \...}

The declaration is formed like this:

:   

    :   property: value;

Remember that there can be several declarations in one rule. A common
mistake is to mix up colons, which separate the property and value of a
declaration, and semicolons, which separate declarations. A selector
chooses the elements for which the rule applies and the declaration sets
the value for the different properties of the elements that are chosen.

Back to our example:

:   

    :   h1 { color: red; }

In our example:

:   

    :   selector is the element h1
    :   declaration color: red

The property *color* gets the value *red*

Multiple declarations can be written either on a single line or over
several lines, because whitespace collapses:

:   

    :   h1 { color:red; background-color:white; }

or

:   

    :   h1 {

        :   

            :   color:red;
            :   background-color:white;
    :   }

Details of the properties defined by CSS can be found at CSS
Programming#CSS1
Properties.

## Summary

**Cascading Style Sheets** (CSS), are used with webpages to define the
view of information saved in HTML or XML. While XML and HTML create and
preserve a documents structure, CSS is used to define the appearance and
placement of objects within the document as well as its content. All of
this information is saved in a separate file, the .css file. In the CSS
file are textsize, background color, text types, e.g defined. The
placement of pictures and other animations are also defined in the css
file. If CSS is used correctly it would make a webpage a lot easier to
create and even more important, to maintain. Because you will only have
to make changes in the css file to make the whole website change.

!CSS Zen Garden without
CSS{width="200"}

!Zen Garden with
CSS{width="200"}

\

## References and useful links

-   CSS Property Reference

**References:**\
\* <http://no.wikipedia.org/> - The Norwegian version of Wiki\
\* <http://en.wikipedia.org/wiki/Cascading_Style_Sheets>\
**Useful links:**\
\* W3C has a CSS validator, located at
<http://jigsaw.w3.org/css-validator/>

-   w3cs pages about css
-   HTMLDog CSS Beginners
    Guide
-   CSS Zen Garden \-- See whats possible
    with CSS
-   Cascading Style Sheet
    References
    \-- L. Carlson, University of Minnesota Duluth.
-   Web Design
    Update -
    A a plain text email digest newsletter. It typically goes out once a
    week and has a section on CSS. All web designers and developers are
    invited to join.
-   - Cascading Style Sheets
    Books

## Exercises

### Exercise 1

Using the CSS file provided below, create a price list for books as an
XML document.

```{=html}
<?xml version="1.0"?>
```
Exercise1.css:

    <book> Lord of the rings</book> book{
      display: block;
      background-color: transparent;
      margin: 20px 10px 10px 200px;
    }
    <isbn>1.000.56439 </isbn> isbn{
      display: block;
      font: 12pt/15pt georgia, serif;
    }
    <title> The Two Towers </title> title {
      display: block;
      font: 14pt/18pt verdana, sans-serif;
    }
    <author> J.R.R. Tolkien </author> author {
      display: block;
      font: italic 12pt/15pt georgia, serif;
    }
    <publisher> Penguin </author> author {
      display: block;
      font: 12pt/15pt georgia, serif;
    }
    <price> 48 EUR </price> price{
      display: block;
      font: bold 12pt/15pt georgia, serif;
      color: #ff0000;
      background-color: transparent;
    }

### Exercise 2

Create a personal homepage, where you introduce yourself.

The page should contain one header, one footer, and navigation as a list
of links.

### Solutions

Solutions

### CSS Challenges

Copy and paste the HTML, then take up the challenge to create a
stylesheet to match the picture!

