Format Style Rules

Application of CSS Formatting Rules

.example Formats the HTML code/output example tables to have no border and a light blue background (#6699FF)
.code Uses "Courier New", Courier, mono font, bold font, and gray background (#CCCCCC). This style is used within tables that show examples of HTML code (i.e., .example)
.codeTag Used to highlight code (blue text) in "Courier New" font within tables showing HTML examples.
.header Formats the heading of the HTML code/output example tables using bolded Verdana font centered with a light blue background (#6699FF).
.footer Also used in the HTML code/ouput example tables to label the table (i.e., Example 4.1). Uses small, bold, centered, Verdana font on a light blue background (#6699FF)
.output Uses a gray background (#CCCCCC) for the HTML code/output example tables.
.screenshot Uses a white background (#FFFFFF) when screenshots are used within a topic note. Also used in the HTML code/output example table.
.attribute Formats the attributes tables to have no border and a light blue background (#6699FF)
.type Attribute types are right justified, bold, Verdana font with a light blue background (#6699FF). This style should be applied to all attributes within the attribute table.
.value Attribute values are left justified (default), bold, "Courier New" font with a gray background (#CCCCCC). This style should be applied to any actual or real attribute values. Use .descr style to show pseudo values like <length>.
.descr Attribute descritions are left justified (default), Verdana font with a gray background (#CCCCCC). This style is used when displaying pseudo values like <length> or <percentage>. It's used to distinguish from real attribute values.
.table_title Used to label the title of tables. For example, when showing browser compatibility in a table, use this style to label the table something like "Table 1: Browser Compatibility". Uses Verdana font, bolded and centered in small font with a light blue background (#6699FF).
.table_xaxis Also used in a table and formats the x-axis labels. Uses Verdana font, bolded and centered in normal font with a gray background (#CCCCCC).
.table_yaxis

Also used in a table and formats the y-axis labels which are usually a tag or property. Uses "Courier New" font, bolded and centered in normal font with a gray background (#CCCCCC).
a:visited Make each visited link green (#009900).
p Used to create a default font in Verdana style.
td Used to default each table cell to have Verdana font and a cell padding of 5px.
pre Format preformatted text in bold, "Courier New" font with a gray background (#CCCCCC).
ul Formats unordered list items to use Verdana font by default.
.tag puts HTML tags, attributes, or code into "Courier New" font style. This is mainly used within paragraphs within a topic note to distinguish from normal font style.

 

General Formatting Rules for Topic Notes

  • Use a light background with dark text
    • This rule also applies to example HTML code because it is easier for the user to read.
    • Don't use distracting colors or colors that my cause problems for color blind users.
    • Although it would seem logical that one could also use dark background with light text, it is still preferable to use light background with dark text since is provides better readability
  • HTML code should be in "Courier New" font
    • "Courier New" font style seems to be the standard in the computer science world when it comes to displaying sample code. If you look in books, online tutorials, or magazines they all seem to use "Courier New" or "Courier" fonts to distinguish code from text.
  • HTML code samples should be placed adjacent to the output
    • Placing code next to the output, on the same line, makes it easier for the reader to understand. This practice will eliminate the need to scroll vertically.
    • In order to prevent the user from scrolling horizontally, make sure that the your tables or preformatted text is not too wide so that the user needs to scroll horizontally
  • Don't hardcode table widths or heights
    • Hardcoding the width or height of a table will often prevent the tables from being automatically resized if the user wants to make the browser window narrower. Therefore, it is best not to specify any width or height since the browser should reformat the text to fit automatically.
  • Put attributes and values in a table
    • I found it best to put any attributes and their values into a table. I also put actual values in "Courier New" font and bold it. In contrast, for descriptions of values I use the default font. This helps the reader to distinguish what are actual values.
  • Don't forget to check spelling and proofread
    • Most web editors provide a spell checking feature, so use it! I don't like to read pages that don't make sense due to poor grammar or careless spelling mistakes. It interrupts the reader and can have negative effects as far as the integrity of the web page. Would you want to buy something from a site contains frequent misspelling of words. It shows a lack of commitment to the product they are trying to promote.
  • Stay away from using red font colors and underlining text
    • Red is a strong color and draws immediate attention from the reader. Although it can be justified in certain circumstances, it is best not to use red font in topic notes.
    • Underlining should also be avoided since it can be confused with a hyper-link.
  • Less is more
    • Stay away from flashy graphics and animated gifs. It is distracting for the reader and most likely doesn't serve a purpose other than waste valuable screen space.
    • Content is more important that aesthetics when it comes to topic notes.

 

 

ICS 415 | Topic Notes | Assignments | Feedback | Links

Last Updated: February 28, 2002