Format Labels!
Goals:
- Add style to labels using CSS
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:
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.
- ShadowLetters: Write a message using a large, non-standard font. Write the same message again but with a different color and a slight offset to give the illusion of shadowing.
- Code a ColoredLabelsCSS program that cycles through the 149 predefined colors in the array
jQuery.turtle.colors
, as in Text/ColoredLabels. However, this time use only CSS properties (such asbackground-color
) to create a rectangle showing the color. - Write out ROYGBIV expressing each letter in its corresponding color.
- Research the CSS
text-shadow
property and use it to create an improved version of ShadowLetters, saving the result as ShadowLettersCSS. There are many variations to choose from! - Create an EGreeting card comprised of a sequence of messages, like a slide show. Use
pause
andcs
between "slides" to give the recipient time to read and then to move on. Your greeting can be to anyone. Share the greeting by emailing the "home" version of the URL. For example, userather thanhttp://hacker.pencilcode.net/home/24-FormatLabels/EGreeting
The primary goal is to experiment with CSS properties. However, you might also include drawings and/or images, to jazz it up.http://hacker.pencilcode.net/edit/24-FormatLabels/EGreeting