Exercise - Lists, Links, & Fonts

Create a new html and a new css document, save and connect them. Complete the first four exercises on the same document.

Exercise 1: Custom bullet list.

  1. Create a 3 item unordered list (ul).
  2. Locate an image and resize it to approximately 15px.
  3. Use the image to create a background image for your list, by following the example in the background images lesson.

Exercise 2: Ordered list

Now create an ordered list of  that begins at a number other than 1.

Exercise 3: Link styles

Show your understanding of link styles by creating 6 links that utilize the CSS elements of :active, :hover, :focus, :visited, border-radius, text-decoration, and border

Feel free to make some funky looking links! BTW, if you use border-radius along with width and height, it’s easy to create ‘pill style’ buttons.

Exercise 4: Web fonts

This exercise comes from the web font reading  “Active learning: A web font example” .

  1. Go to https://fontsquirrel.com to browse hundreds of fonts.
  2. Select at least one font, download it into the same directory as this lesson’s html file, and unzip it. The font files will appear in a folder. In order to use one you will need to follow the example in the next step.
  3. Take a look at the short example here for basic information on how to put the font to use (and also this screen capture).

  4. As the screen capture shows, the first step is to name and link to the font file via @font-face. Step 2 is apply the new font family to a class, id, or some other element such as p, body, article, etc. in your css.  For example,
    body {font-family: myFont;}. This would set all of your document's otherwise un-styled text to the new font.
  5. You could also create a new class or id to the font-family.
    Example: #teams {font-family: myFont};