About the topic pages…

  1. 1. Main section

    Topic name and arrows:
     Topic title 
    The arrows allow you to navigate through the list of topics (previous/next). The title itself links to the default page for that topic.
    Bordered box below the title:
    blah blah
    If the W3 logo shows at the top left corner of this box, it means its content is an excerpt from the specification.
    Because:
    This explains the visual rendering of the test cases. Depending on your level of expertise it may evoke a "doh!" moment.
    Info:
    This information may not be directly related to the test-case at hand.
    Alert:
    This information is mostly related to a lesser known aspect of the spec that may create issues depending on specific styling (i.e. styling the HTML background).
    Bug:
    Bug and other browser-related issues.
    No way:
    Don’t do this.
    Edit:
    Changes to try yourself using your favorite dev tool (i.e. Firebug, etc.). These changes may demonstrate edge-cases or other interesting behavior.

  2. 2. "Try This" section

    This section includes links to test cases, or demos. The example below shows the styling of the #pink box for one of the pages in the "boxes" topic section. Clicking on the link containing the selector loads a page where that box is styled according to these stylings.

    #pink:
    width: 80px; height: 80px; padding: 40px; border: 40px solid #0f0; margin: 40px;

  3. 3. "Watch This" section

    This section is the wrapper of the three colored boxes that are built and styled according to the markup and CSS rules that show in the next section. This wrapper is styled with a dashed border, which helps to understand the interaction of these boxes with their container depending on styling.

  4. 4. "Check This" & “Edit This” sections

    This is the source of truth. It shows the styling and the markup of the three boxes. In modern browsers, one can edit the rules in the style block to see his changes being applied on the fly.

    Do not use the enter or return key to create a new line in Chrome or Safari because these browsers may discard your edits.

    Note that the background styling of these three boxes will not appear in this listing.