Misconception: novices struggle with correct syntax for inline CSS when learning web development.

  • Consider the following error where students struggle to understand how to use CSS syntax in HTML tags in order to get inline CSS styling to work.
    • <h1 color:red;>Header</h1>
      • In this example, the student tries to use CSS syntax as if they were writing directly into the style section of the header as opposed to inside an HTML tag.
      • Below is the correct syntax for inline CSS:
        • <h1 style="color:red;">Header</h1>
  • This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc.
    • This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS.

More about this tip

External Source

"Towards a Taxonomy of Errors in HTML and CSS" by Thomas Park, Ankur Saxena, Swathi Jagannath, Susan Wiedenbeck, and Andrea Forte.