Sunday 22 November 2009

DITA 06 - CSS

The concept behind the Document Object Model (DOM) is that all well formed XML and HTML documents are hierachical and reflected in the program-like nested structure of clear XML/HTML. This tree structure of nodes consisting of elements and text where elements have a unique identifier (id) and text cannot have any further nodes within.

A further development toward clear information management in web HTML is the Cascading Style Sheet (CSS) which allows the web designer/coder to separate out text and image file content from instructions on how to layout the information when the web page or website is presented. An example of how the same content can be represented by differing CSS instructions can be seen at the css Zen Garden site. CSS standards are set by W3C.

A general form of CSS code is:
selector, selector, ... {property1:value1; property2:value2; ... propertyN:valueN;}
This example defines selectors Heading1 and 2 and gives them the same property/values
for colour and font

Heading1, Heading2
{
color: red;
font-family: tahoma
}
Where selectors are used to identify those areas of the document in which to follow the style declarations inside brackets {declaration, declaration}. Each declaration provides properties and values, like colour and type face to apply in the selected part of the document. An example is shown here.

CSS can also define positioning of text and graphics elements of the web page. Positioning can be static - in the document flow, relative - changeable with reference to it's stated position or absolute - a fixed position anywhere in the document.

Benefits of CSS include:
  • Single down load of the CSS instructions which can cover an enter website layout
  • Reduced data loading for the website and less memory usage
  • The ability to decide at the point of delivery how to use the layout in the CSS once platform is known - different layout for a PC screen and a handheld device
  • The ability to let the web user select a layout e.g. for large text if partially sighted - link to RNIB Web Accessibility pages
Disadvantage of CSS

  • Differences between browser software (e.g. versions of MSInternet Explorer, Firefox, Safari etc) give different representations for the same CSS instructions.

No comments: