Basic XHTML and CSS

Here is a really basic example of an XHTML web page: Basic Example Plus

Try these questions:

  1. Does this page validate as XHTML?
  2. The file uses an embedded style sheet. Which rules are responsible for the background colour?
  3. How might the rules used to define the fonts used by h1, h2 and h3 be combined into a single rule?
  4. Which rule causes the paragraph text to be coloured blue?
  5. How is the colour of the 3rd paragraph, and its heading, changed to green?
  6. Which CSS rules are responsible for the numbered list using upper and lower case roman numerals?
  7. What is the id selector that applies to the unordered list?

Having completed this exercise you should now have a good grasp of the basics of CSS and selectors:

A type selector:
The name of a standard XHTML element;
Class selector:
Indicated with a dot (.) Can be used for multiple elements.
ID selectors:
Indicated with a pound sign (#). Like a class selector but can only be used for one element in any individual page;
Multiple selectors:
List of comma-separated elements to which the style rules will apply e.g.

	h1,h2,h3{
		font-family: Georgia, serif;
		}
Contextual selectors:
Space separated list wherein the rule is applied to the innermost nested elements e.g.

	ol li ol li{
		list-style: lower-roman;
		}

The Beauty of CSS

The following web site provides some striking examples of what can be achieved with CSS and XHTML. All pages use the same XHTML markup and content. Only the style sheets have been rewritten and images produced by the various designers: CSS Zen Garden.

Cascade and Inheritance

CSS enables a single XHTML document to use more than one set of style rules. Cascading style sheets can import rules from one or more additional sheets. Style sheets which import are said to cascade from those style sheets. This facility may be used in a large organisation wherein the core styles are defined in a master style sheet which is then imported into the style sheets used by various departments for screen, print or other media.

You will recall the containment hierarchy of a web page wherein, at the top level, there is the <html> element. This contained the <head> and <body>. Within the <body> there will be various elements such as headings, paragraphs, lists etc. With CSS, elements can inherit the properties from the elements that contain them. E.g. In our example page the color of the text is set for the body type selector and this is inherited by some of the nested elements that do not have their color set by a specific rule.

The Box Model

With CSS each XHTML element is considered to be in its own box: W3C Box Model. Here is my example page with boxes around the first 4 elements in the page: Boxes Example.

Boxes have:

  • Content area
  • Borders
  • Padding
  • Margins

The properties of these can be set using CSS.

Read the following for some background on the current interpretation of the box model by various browsers: Quirks Mode on the Box Model.

Hyperlinks

Hyperlinks are formed using the anchor tag:

<a href="pagelinked.htm">Link Text</a>

You can see that the ‘href’ attribute is used to indicate where the hyperlink will go to. It points to a document, in this case in the same folder as the page containing the hyperlink. In the next example the linked page is in a subfolder called pages:

<a href="pages/pagelinked.htm">Link Text</a>

In the next example the linked page is in the parent directory:

<a href="../pagelinked.htm">Link Text</a>

These are all examples of document relative links. The following is an absolute hyperlink as it provides the full URL (uniform resource locator) of the target document:

<a href="http://www.microsoft.com/">Microsoft</a>

The ‘title’ Attribute

The <a> tag has a ‘title’ attribute. The title of a link generally shows up as a tooltip in visual browsers, but it can be presented in non-visual browsers as well. Not all links should have titles. If the link text is the name of an article, don’t add a title; the link text itself is descriptive enough. But if you read the link text by itself, out of context, and can’t figure out what it points to, add a title.

The anchor tag is so-named because of its use in providing named anchors in web pages.

Incorporating Images

The <img> tag may be used to incorporate images into a web page. Altenatively, images may be called from the CSS. This is particularly useful for background images, corners, menu images etc.

A Little Head

The ‘alt’ Attribute

Every single image on every single page of a site should have a text equivalent, so-called “alt text”, specified in the alt attribute of the <img> tag. Screen readers read it, text-only browsers display it, Google indexes it, and visual browsers can display it as a tooltip or on the status line.

Here is a simple example of images incorporated into several paragraphs of text: Simple Image Example.

Tools for Web Page Development

There are an abundance of software tools intended to aid in the development of web pages. Some of the most popular titles include:

  1. Macromedia Dreamweaver
  2. Micrsoft Frontpage
  3. NVu
  4. HTML-Kit
  5. My personal favourite: Macromedia Homesite

In addition most web developers will have some familiarity with one or more graphics processing packages such as:

  1. Adobe Photoshop
  2. Adobe Illustrator
  3. Macromedia Fireworks

And the main software package used to develop rich moving imagery for the web is of course Macromedia Flash.

Leave a Comment