PencilCoder

Format Labels!

Goals:

  • Add style to labels using CSS

Coding Snippets:

  • coding snippets
  • Pass a formatting object to the label function via its optional second argument to gain control over a broad array of settings affecting the label's appearance.
  • The code to the left produces this output: coding snippets

Math and Computer Concepts:

  • Web pages typically consist of three components. HTML is responsible for content and structure. CSS controls presentation. And Javascript determines behavior. This lesson focuses on CSS.
  • Each label itself is a separate HTML element. CSS describes how each HTML element (including labels) should be displayed.
  • Set style attributes of individual labels (size, color, alignment, etc.) using a CSS formatting object. Property names and values must correspond to valid CSS options and settings.
  • Look up additional CSS style options on the web, such as at w3schools.com. Note, however, that CSS properties have names like font-size; for them to work within Pencil Code, you need to express them in camelCase, e.g., fontSize.

Activities:

Save each of the following in a folder called Text.