Day II – CSS from Wireframe to Web

“The problem with using HTML for formatting is that it just isn’t really very good at it,nor was it generally designed for it.” (“HTML & CSS – the Complete Reference” p. 430)


  • Lesson 1-2: Ch. 4 “Introduction to CSS” and from Wireframe to Web and Ch. 5 “CSS Syntax and Property Reference”.
  • Pause
  • Lesson 3-4:  The Zengarden – creative experiments on given HTML and CSS.
  • Lunch
  • Lesson 5-6: Workshop – finish your CssZengarden theme. Hand in 28.11. 09:00 on Fronter. Before going home today you have to hand in your style.css on Fronter as a sign of being here and being active. This hand in is your mark of being here today.
    As homework you may need to improve the CSS. Next lesson we’ll look at your CSS work.
CSS - illustration from "HTML and CSS - the Complete Reference Guide" p. 433.
CSS – illustration from “HTML and CSS – the Complete Reference Guide” p. 433.

CSS Mnemotics

/* Selector for IDs */

#wrap { color: red; }

/* Selector for CLASS */

.theLogo { font-size: 32em; }

/* Give all images the same width */

img { width: 100%; }

/* however a class might be more practical */

.myWidth { width: 100%; }

Online Sources

Know thine HTML

As a multimedia designer you need to know how HTML and CSS works. Therefore you are not allowed to use Dreamweaver and similar WYSIWYG programs here. Solve the case by writing the code in a simple text editor such as:

  • TextWrangler, Nano (Mac)
  • Notepad or Notepad++ (Windows)
  • Gedit, Nano or Vi (Linux)
  • Emacs (Linux, Unix, Windows, GNU, Mac)

Save your files as .htm or .css as the case may be. Remember to use a logical file structure, such as:

Web site file structure
Web site file structure

Dropdown Menu


A wireframe
A wireframe