Class 3 — CSS multi-column layout,
and element selector patterns

Multi-column layouts

Multi-column layouts are created with the DIV tag to give the structure, then use CSS to style the columns for width and position.

CSS element selector patterns

Element selectors can be more general than simply selecting all instances of an element. Selector patterns are used to select elements depending upon their position relative to other elements, and depending upon mouse position, and mouse clicks.

Exam questions

Look at and become familiar with the exam instructions for class exams and the final examination.

Exam questions can be based on the following sources: (1) on-line web sites, (3) classes, (4) reports, (5) exercises, and (6) course web pages. They are based on topics from the beginning of the year up to and including the class before the exam, although more recent topics will be emphasized in later exams.

Consider all concepts and terminology used in on-line web sites, reports, and classes and ask the typical questions - how, why, when, where and what -- individually and in combination. In particular, variations are based on "describe", "explain", "define", "what is meant by", etc. you may be asked to do variations of some of the programming exercises.

CSS questions

  1. Describe the general structure of a two-column page as demonstrated in the examples page header in the right column and page header across the top of both columns.
  2. Describe how you can alternate between one- and two-column layout on a page.
  3. For each of the following selectors describe which elements of an HTML file are affected, and when each style selector affects those elements.
    1. p:before { ... }
    2. p.tip { ... }
    3. p .tip { ... }
    4. ::selection { ... }
    5. a.ex1:hover { ... }
    6. a.ex1:active { ... }
    7. div + p { ... }
    8. p ~ ul { ... }
    9. div > p { ... }
    10. .mynav ul ul { ... }
    11. .mynav ul ul li { ... }
    12. nav ul:after { ... }
    13. nav ul li { ... }
    14. nav ul li:hover { ... }
    15. nav ul li:hover a { ... }
    16. nav ul li a { ... }
    17. nav ul ul li a { ... }
    18. nav ul li:hover > ul { ... }