Jump to content

XML - Managing Data Exchange/CSS

Add links
From Wikibooks, open books for an open world


Previous Chapter Next Chapter
← XLink XSLT and Style Sheets →


Learning objectives

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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?

[edit | edit source]

Cleaner Looking Code

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]
 This section is a stub.
You can help Wikibooks by expanding it.

Accessibility

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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 <?xml-stylesheet href="X.css" type="text/css"?> 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

[edit | edit source]

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

[edit | edit source]

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.

File:Csszengarden nocss.png
CSS Zen Garden without CSS
File:Csszengarden1 css.png
Zen Garden with CSS


[edit | edit source]

References:

Useful links:

Exercises

[edit | edit source]

Exercise 1

[edit | edit source]

Using the CSS file provided below, create a price list for books as an XML document. <?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

[edit | edit source]

Create a personal homepage, where you introduce yourself.

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

Solutions

[edit | edit source]

Solutions

CSS Challenges

[edit | edit source]

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

Retrieved from "https://en.wikibooks.org/w/index.php?title=XML_-_Managing_Data_Exchange/CSS&oldid=3535651"