Case Study: CSS for Layout

Olde Case-study 1: Last given on Tuesday 15th February, 2011.

In this case study we shall demonstrate the positioning features of CSS by theming a WordPress blog. We will no longer be doing this exercise, instead I have made it and some additional tutorials and resources for WordPress theming available as an optional case study.

Case Study: CSS for Layout

Before you start you should have installed XAMPP and WordPress.
The introduction to this case-study is based on Chapter 6 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006.
The case study itself is the Dissection of a WordPress theme by John Godley.

Contents of this Case Study

Learning Outcomes

At the end of this case-study you should be able to answer these questions:

What is CSS-P?
Describe all of the differences between the three possible values of the position property.

Introduction: CSS for Element Positioning

Web Application “Theming” (or “Skinning”) and DHTML relies on element positioning features of CSS 2.

CSS-P was released by W3C in 1997
Completely supported by IE6 and NS7
The position of any element is dictated by the three style properties: position, left, and top
The three possible values of position are absolute, relative, and static

Absolute Positioning

<!DOCTYPE html>
<!-- absPos.html
Illustrates absolute positioning of elements
-->
<html lang="en">
  <head>
    <meta chaset="utf-8" />
    <title> Absolute positioning </title>
    <style>
      /* A style for a paragraph of text */
 
      .regtext {
        font-family: Times;
        font-size: 14pt;
        width: 600px
      }
      /* A style for the text to be absolutely positioned */
 
      .abstext {
        position: absolute;
        top: 25px;
        left: 50px;
        font-family: Times;
        font-size: 24pt;
        font-style: italic;
        letter-spacing: 1em;
        color: rgb(102,102,102);
        width: 500px
      }
    </style>
  </head>
  <body>
    <p class = "regtext">
      Apple is the common name for any tree of the genus Malus, of
      the family Rosaceae. Apple trees grow in any of the temperate
      areas of the world. Some apple blossoms are white, but most
      have stripes or tints of rose. Some apple blossoms are bright
      red. Apples have a firm and fleshy structure that grows from
      the blossom. The colors of apples range from green to very
      dark red. The wood of apple trees is fine-grained and hard.
      It is, therefore, good for furniture construction. Apple trees
      have been grown for many centuries. They are propagated by
      grafting because they do not reproduce themselves.
    </p>
    <p class = "abstext">
      APPLES ARE GOOD FOR YOU
    </p>
  </body>
</html>

Relative Positioning

<p style = "position: relative;
            left: 5px; top: 10px;">

If no top and left properties are specified, the element is placed exactly where it would have been placed if no position property were given
But it can be moved later
If top and left properties are given, they are offsets from where it would have placed without the position property being specified
Example: relPos.html

<!DOCTYPE html>
<!-- relPos.html
Illustrates relative positioning of elements
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Relative positioning </title>
  </head>
  <body style = "font-family: Times; font-size: 24pt;">
    <p>
      Apples are <span style =
      "position: relative; top: 10px;
      font-family: Times; font-size: 48pt;
      font-style: italic; color: red;"> GOOD </span> for you.
    </p>
  </body>
</html>

Static Positioning

The default value if position is not specified
Element is placed as if it had a position value of relative
But top or left properties cannot initially be set nor changed afterwards
Element cannot be moved if it is made implicitly or explicitly static!

Dissection of a WordPress theme

Case-study is by John Godley, WordPress Theme Guide, Urban Giraffe.com published on Apr 22, 2005

I have prepared a cheat sheet for myself which summarizes the design steps.

An HTML5 Theme

Toolbox: An HTML5 WordPress Starter Theme – by Ian Stewart of Automattic.
Example theme toolboxdemo.wordpress.com

Summary of this Case Study

Learning Outcomes

At the end of this case-study you should be able to answer these questions:

What is CSS-P?
Describe all of the differences between the three possible values of the position property.
Expect more to be added to the review questions!

Homework Exercises

Follow the case-study on your own copy of WordPress. Use the instructions for the fluid layout.
Style the menu in the three-column style.
Complete the style makeover.

What's Next?

Getting Stated with JavaScript

Previous Lecture | home | Next Lecture

ICCT Wiki

Table of Contents

Case Study: CSS for Layout