Overview

Whilst HTML is used to define a web document structure and author its content, the presentation of a web document is defined using a different language called Cascading Style Sheet (CSS). By presentation we mean for example, the paragraph you are reading has a font size and is positioned in a particular place in the browser. The heading, navigation, borders, background colour are all styled for this specific display. This is the presentation of the document. If you were to do a print preview of the document, you will see another presentation. The document remains the same but its presentation changes. The content of the document is marked-up with HTML and we write a different CSS for each presentation.

Cascading Style Sheets (CSS) is a language for specifying presentation of documents.

Consider an example CSS rule:

p { color: red; }

This will apply the color: red; declaration to all p (paragraph) elements in the document.

CSS syntax is deceptively simple but to implement a particular design can become surprisingly difficult. To clarify the concepts involved, let's consider how a browser processes HTML and CSS.

Web documents and programs are accessed using an address, also known as a URL (Universal Resource Locator). The URL has sufficient information for a browser to send a request which is routed to a computer running a web server program. The first part of the URL is the unique address of a computer running the web server and the remainder of the URL specifies a document or a program to be executed by the web server. In either case, the web server responds with the requested document(s) or an error message.

Document Object Model(DOM)

A typical HTML document may contain links to style sheets, Javascript, images, video and sound files. The browser receives these files on seperate responses from the server and it must combine the documents before it is able to display it. This typically happens in two stages:

  1. the browser parses the document according to the grammer of the markup language; for HTML, this involves searching for the beginning tag charachter, <, and it's matching end, >, character. A similar process will then search for the corresponding end tag. This is often more complex in practice as HTML elements are containers that can have nested elements. By definition a valid HTML document would have as a minimum, the root html element and a head and body element nested within it. The logic for finding the beginning and end tags of elements becomes more difficult. All the more reason why you should always validate your HTML documents.
  2. the parsing in the first step results in a tree data structure with each element as a node. This data structure is known as the Document Object Model (DOM). The browser then uses the DOM to apply any styling defined by your CSS (or uses it's default style) to display the document.

DOM

HTML content

<!doctype html>
<html lang="en">
	<head>
		<title>My web document</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<p>Hello WWW</p>
	</body>
</html>

CSS rules (stored in main.css in this example):

p { color: red; }

Browser display

Hello WWW

The DOM is where the document markup and CSS come together.

The DOM is a powerful object model for changing documents with a tree structure. It is a programming interface for HTML documents and implemented in all major browsers. It provides a tree data structure and objects that have properties and methods which are used in scripting languages such as CSS to define the presentation of documents. DOM specification is quiet independant and is also at the heart of applying Javascript to HTML elements.

Given the central role of the DOM, it is essential to create complete HTML documents and validated it before trying to apply any CSS rules.

The Box Model

The CSS box model is used to describe the box that is generated for any HTML element.

When generating the Document Object Model (DOM), the browser relies on the box model specification to determine the element dimensions and position relative to other elements. Every element takes up space in accordance to the following box model

margin

border

padding

element

The element has a green background.

 

 

 

element

This is what you see in your browser.

MDN, accessed 6/10/2013

The dimensions padding, border and margin can be set for each side of the box, for example, margin-top, margin-right, margin-bottom, margin-left (the clock-wise direction is a shorthand notation, for example, margin 0 10px 10px 0; specifies all four dimensions in one declaration).

Block and Inline elements

HTML elements are either block or inline. Browsers by default display block elements (such this paragraphs) one above the other, whereas in-line elements (such as this image to demonstrate an in-line element image or this hyperlink are placed in-line or next to other in-line elements within block elements.

Cascading Style Sheet

Style sheets are a set of style rules. A rule starts with a selector (an HTML node or a group of HTML nodes) and applies a particular declaration. Declarations are predefined properties, such as width or color, and their corresponding values.

CSS rule

In the above example the selector is the body element. Given body is a parent node in the DOM, any declaration is applied to all the children nodes. For example, the above color: black declaration is inherited by all other elements such as paragraphs or lists within the body.

Styles inheritance from parent nodes by all chilren nodes allows for less chaotic CSS development!

What is “Cascading”?

CSS can be specified in many places; in the absecnce of any style definition, a browser would apply it's built-in default style. Best practice should have all CSS declarations in an external file but it can also be specified in the head section of an HTML document or even as an attribute on an individual HTML elements. This is refered to as cascading, a color definition in the browser is cascaded (added or overridden) by style definitions in an external file which are in turn cascaded with definition in the head section of an HTML document and finally any definition on an individual HTML element. This is both powerful and the cause of much confusion. As a general rule, define all styles in an external file and link them to HTML documents. Avoid style definition in HTML documents.

Separation of content from presentation is key to successful web development. You should always keep HTML as purely marked-up content and link to an external CSS file for the presentation of the content.