Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Answers to Exercises, Chapter 4

Test Questions

  1. This question emphasizes the difference between the syntax used for assigning attribute values in XHTML and property values in CSS.
    1. No colon appears after tag selectors (unless they are followed by a pseudo-class).
    2. No = sign is used to separate the property name and value.
    3. Colour names do not appear in double quotes.
    4. The absence of a semi-colon after the property value is not actually an error, since there is only one declaration. However, it is common to include it, and it would no do harm.
  2. The word would be coloured orange, red, red, orange in each of the examples, in order. If you can't see this just by looking at the code, set up a document with the rules and paragraphs, and use a tool like the Firefox Web Developer extension to trace how the rules are applied.
  3. You will need to set up lists like this:
    <ol>
        <li class="ordereditem"></li>
        etc
    </ol>
    
    and
    <ul>
        <li class="unordereditem"></li>
        etc
    </ul>
    
    and then define stylesheet rules with selectors .ordereditem and unordereditem. That is, you need to add redundant attributes to all list items if you don't use contextual selectors. This is an unnecessary and error-prone extra task, so you should always use contextual selectors in preference. Even if you want different styling for different unordered lists, for example, it can be done by assigning a class to the ul element and using it in contextual selectors.
  4. Not necessarily. The browser will attempt to choose a weight according to the rules quoted in Chapter 4, which will usually result in a font that is bolder than the default, but this cannot be guaranteed. It will never use a lighter font, though.
  5. These two rules have subtly different effects. The first, using * as the selector, forces the font size for every element to 14px. The second sets the size in the body, so it is inherited by every element within the body. However, some elements have a percentage size applied to them by default in the browser, so, for example, h1 elements will appear at more than 14px if the second rule is used.
  6. If you use the font shorthand property you must specify values for at least the font-family and font-size, according to the CSS specification.
  7. This question is mis-phrased in the book. It should read "Write a pair of CSS rules that set the first paragraph after each h1 with its first line in bold and a red double-height initial letter.". We apologize to anyone who has been struggling to do it with one rule.
    h1+p:first-line {
        font-weight: bold;
    }
    h1+p:first-letter {
        color: red;
        font-size: 200%;
    }
    
  8. The a element can be used for named destination anchors as well as source anchors. When used in this way, a elements are often empty, but they don't have to be (there is an example of one that isn't in the HTML specification), in which case any stylesheet rule with a as its selector would be applied to named anchors as well as links, which would make destination anchors look like links, which they are not.
  9. The answer naturally depends on how you want the box to behave when the font size is changed. Normally, if the width is specified in em units, the height should be too, so that the box scales with the font size and the text does not reflow. If you use any fixed size for the height, the text may overflow the box when the size is increased. You can use auto for the height, in which case it will adjust itself as necessary.
  10. The following rules should produce the desired effect, but note that not every browser currently implements counters. (Firefox 2 and Opera 9 do; IE6 and 7 and Safari don't.)
    body { counter-reset: paranum 0;}
    p:before {
        content: "Para " counter(paranum) " ";
        counter-increment: paranum;}
    

Discussion Topics: Hints and Tips

  1. You can look at this question from two points of view. First, is PDF a technically superior solution, such that if we were designing a Web from scratch now, we would prefer to use it? Second, would it make sense to use PDF on the Web we have now? The answer to the second version of the question must surely be 'No'. There are too many pages in existence for it to be realistic to think about making such a radical change in the underpinning technology. The first version is more interesting, and there is a case to be made on either side. You might also consider tagged PDF, a sort of compromise between PDF and HTML. You might find Joe Clark's article on accessible PDF instructive.
  2. At present, the only facility to help organize stylesheets is @import, which allows you to break them into re-usable sub-stylesheets, but it is hardly adequate. Are there features from mainstream programming languages that could be adapted to help?
  3. What you see isn't what you get: you should enumerate all the different factors which might cause the page to be displayed in a browser differently from the way it is shown in a WYSIWYG editor.

Practical Tasks: Hints and Tips

  1. Because browser support for CSS is still patchy and, in some cases, buggy, you need to test stylesheets in a variety of browsers. IE6 will cause most problems, and you may need to restrict your ambitions in order to cope with its inadequacies. Tools such as the Firefox Web Developer extension and Xylescope can be used to help sort out problems with CSS. The W3C offers a CSS validator.
  2. Think about the requirements before you begin. The first stylesheet must be purely functional. What helps people with poor eyesight? Large text and good contrast, in particular. (Chapter 9 goes into more detail.) What helps you look good to other people? Only you know the answer to that. Remember that, by setting display to none, you can hide parts of the document.
  3. No way of doing this is satisfactory, until the CSS3 border-radius property is supported in browsers. The most obvious way is to use empty span elements with a background image, but this can cause problems if the font size is increased. A method using placed images that you allow the browser to scale might work, although it will take considerable care to make the corners join up. Some of the solutions available on the Web use scripting to get round the problems of simple markup-based approaches.
  4. To avoid adding superfluous markup, you will probably want to use generated content for some styles; others will rely on background images. If you don't know where to look for examples of block quotes, try news sites on the Web, magazines such as Wired and books on literary criticism or other academic subjects where it is necessary to quote from sources.