lanky Girl

3.6 Document Object Model (DOM) and Cascading Stylesheets (CSS)

In DITA on December 30, 2009 at 6:14 pm

This week in DITA we have been focusing on Cascading Style sheets (CSS) and the DOM Document Object Model.

According to W3C “The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents”. DOM is more of a concept and it stipulates that the documents should be structured hierarchically. It defines the logical structure of documents and the way a document is accessed and manipulated. CSS (cascading style sheets) control the presentation of a web page. CSS was designed so that the content of the document written in HTML could be separated from the style elements such as the layout, fonts and colours.

During our practical lab session we were asked to create a CSS file and use it to change of style of our web pages. Here you can see mine:

http://www.student.city.ac.uk/~abhd831/mystyle.css

Advantages of CSS

  • Improvement in accessibility – when you separate the content from the style you make it easier for those who only want to view the content of the site e.g. visually impaired.
  • Flexibility- because CSS are in separate files it means that making changes to the layout are much more easily done.
  • Consistency – because one style sheet can be applied to many web pages it is easier to make sure that each page of the site looks the same.
  • The speed of which pages can be downloaded will be quicker as the browser cache can store CSS which can be used on multiple pages.

Disadvantages of CSS

  • There seems to be an inconsistency to which CSS is supported by browser.
  • CSS does not work in earlier versions of internet explorer and will only display plain HTML. Unfortunately there is evidence that there are still a few people who still use this browser.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: