Week 6 - DOM & CSS

The Document Object Model is a concept or thought process used when designing documents assuming they follow the usual hierarchical structure. Using root structure, documents can have a tree of nodes, element nodes can have subnodes referred to as children but text nodes cannot. Elements can also have an attribute with a value and this is called an 'id' if it has such an 'id' it must be unique. DOM helps to clarify data hierarchies and the use of Cascading Stylesheets (CSS).

CSS provide a language used to apply consistent formatting to web pages. They separate out the presentation semantics, the look and feel, from the actual content itself. They’re most commonly used to style web pages in HTML and XHTML but can also be applied to XML.

Designers used to arrange graphical content on a page using rasters with graphics packages, however they use lots of space and render content difficult to search. CSS provides the rules for the layout of information using specific syntax. They specify such things as typeface, font size, colour, positioning and spacing.

Whilst there are lots of positives to using CSS it’s important to understand some of the disadvantages. Additional download of the CSS slows down delivery of page initially. They use different syntax to HTML so something else to learn! The CSS can also be easily overwritten as open text based so have little security. They can also complicate templates if using dreamweaver or a CMS. Nevertheless, the pros far out weigh the cons.

The cascading term explains how links defined later override earlier links. For example, a link to a web level CSS file may precede a link to a site level file, which in turn precedes a page level style definition. Assuming that all three of these define level 1 headings as different colours, for instance blue, red and green, the bottom link will take precedence and the headings will end up green.

Links to my CSS example1 and example 2

Here's Zen Garden's fantastic example of the power of CSS.