Starter Exercise 4: Web Typography II and Navigation with Lists
The css rules for the examples in this demo page are in an attached CSS file called, “StarterEx_4_WebType_Nav_w_Lists.css.” Proceed with testing changes to the CSS rules according to the prompts below.
Example: Subscription Web Fonts
If you want Google font practice, assign values to the CSS properties for the text in this paragraph so that a Google web font is used to style it. Change other properties of the typography of this paragraph (size, weight, letter-spacing, line-height, etc.).
Example: @font-face
Assign properties and values to the CSS for the h3 tags on this page so that a 'non-web-safe' typeface is pulled in with an @font-face rule. To do this, start by downloading a free typeface from The League of Moveable Type.
INSTRUCTIONS for @font-face use: First, put the font files that you downloaded inside of the 'fonts' folder of this starter exercise. Then, in the attached CSS file, add a @font-face rule at the top that defines the font you want to use and the source (or location) of the font files (follow the example that is written at the top to add another one for your font of choice). In the CSS, add a font-family property for the h3 selector, and list the font name as the value for it to appear. Follow the example of the h2 already set up in the CSS file for reference.
Example: Navigation via Lists & Unordered Lists
Create an unordered list of 5 web sites in the DIV called 'navExample' below:
Link them to their correct URLs, one by one, using the Property inspector (Window > Properties).
Use CSS file to style the #navExample unordered list, the list elements, and their associated link states so that the list is visually controlled. To remove the default bullets in the css, use: li { list-style-type: none; }