Create a new html and a new css document, save and connect them. Complete the following four exercises on the same document.
Exercise 1: Custom bullet list.
- Create a 3 item unordered list (ul).
- Locate an image and resize it to approximately 15px.
- 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” .
- Go to https://fontsquirrel.com to browse hundreds of fonts.
- 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.
- Take a look at the short example here for basic information on how to put the font to use (and also this screen capture).
- 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. - You could also create a new class or id to the font-family.
Example: #teams {font-family: myFont};