Page Banner

Lesson Practice 5-1:
Text, Fonts & Lists Styling


Using Font Properties

Task 1 - Using Font Families and Sizes

  1. Open a nocss.htm in Notepad++.  Immediately save the file in your CSS folder as font1.htm.

  2. In the title element, add the title: Using Font Family and Size Properties

  3. In the body, add an h2 element containing the same text.

  4. Add an internal style sheet.

  5. Add the body selector with appropriate properties to make the text Arial font, with sans-serif as the backup choice. Make the font size 14pt.

  6. Add the h3 selector with appropriate properties to make the text Times, with serif as the backup and the size 1.5 times the size of the body font.

  7. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  8. Save the file again.


Task 2 - Using Other Font Properties

  1. Reopen font1.htm, if needed, in Notepad++.  Immediately save the file in your CSS folder as font2.htm.

  2. In the title element, change the title and h2 text to: Using Other Font Properties

  3. Add class rules to the internal style sheet:
    1. Create a class named .bolditalic and give it appropriate font properties to make the font italic and 700 weight.

    2. Create a class named .smcap and give it the appropriate font property to make the font display in small caps.

  4. Add classes to page elements:
    1. Apply both classes to the first h3 element.

    2. Apply the bolditalic class to the other two h3 elements.

  5. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  6. Save the file again.


Task 3 - Using the Shorthand 'font' Property

  1. Open font2.htm in Notepad++, if necessary.  Immediately save the file in your CSS folder as font3.htm.

  2. In the title element, change the title and h2 text to: Using The Shortcut Font Property

  3. Add a class to the internal style sheet named .totalfont and give it the shortcut font property with a change in font weight, a change of font size, and a cursive font family list of at least two items.

  4. Apply this class to a sentence of your choice in each paragraph.

  5. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  6. Save the file again.


Using Text Properties

Task 4 - Adding Centered Header Elements to Existing Pages

  1. Open your external style sheet.

  2. Add a class named .center which will align text to the center.

  3. Save and close the style sheet.

  4. Open each of files from LsnPrac 4-1: external, embed, and in-line. Do the following to each file:
    1. For each file, add an h2 header to the top of the body with the same text as in the title element. Add the center class to each new h2 element.
      For the idselector page, use element containing the "Page Banner" text instead of adding an h2.

    2. Preview, save and close each as you finish.

  5. Open the files from LsnPrac 4-2: classes1, classes2, classes3, and idselector. Do the following to each file:
    1. In each file, add an h2 header to the top of the body with the same text as in the title element.

    2. Add a style to each internal style sheet, named .center which will align text to the center.

    3. For the idselector page, use do not add an h2 element - you will use the element containg the "Page Banner" text instead.

    4. Apply the center class to each h2.

    5. Preview, save and close.


Task 5 - Using Alignment and First-line Indents

  1. Open a nocss.htm in Notepad++.  Immediately save the file in your CSS folder as text1.htm.

  2. In the title element, add the title: Using Text Alignment and First-line Indents

  3. Add a centered h2 header to the top of the body with the same text as in the title element.

  4. Create styles:
    1. Add an internal style sheet.

    2. Add a style named .center which will align text to the center.

    3. Add a style named .right which will align text to the right.

    4. Add a style named .p-indent which will set the first line indent to 2em.

    5. Add a style named .p-outdent with a declaration to make the padding-left properety to have a value of 2em. Add a second declaration to the rule which will set the first line indent to -2em.

  5. Apply styles:
    1. Apply the center class to the h2 element.

    2. Apply the right class to the h3 elements.

    3. Apply the poutdent class to the 1st paragraph.

    4. Apply the pindent class to the 2nd and 3rd paragraphs.

  6. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  7. Save the file again.



Task 6 - Using Spacing and Decoration Properties

  1. Reopen text1.htm if needed.  Immediately save the file in your CSS folder as text2.htm.

  2. In the title element, add the title: Using Spacing and Decoration Properties

  3. Change the h2 text to match the title element.

  4. Add styles:
    1. Add a rule for the p element to make the line height 1.5.

    2. Add a class named .spacey and give it the text property to make the letter spacing 0.5em

    3. Add a class named .wdspace and give it the text property to make the word spacing 1em.

    4. Add a class named .compress and give it the text property to make the letter spacing -0.05em.

    5. Add a class named .mono and give it the font property to make the font Courier New.

  5. Apply Styles:
    1. Apply the spacey class to the first sentence of the 1st paragraph element.

    2. Apply the wdspace class to the second h3 element.

  6. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  7. Add more styled elements:
    1. At the end of the page, add two h3 elements. To the first, add the text: This Is A Little Too Spread Out

    2. To the second, add the text: This Is a Little Better

    3. Apply the mono class to both of the new h3 elements, then also apply the compress class to the second new one.

    4. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

    5. Add a class named .lined and give it the text properties to make the text decoration underline and overline.

    6. Add a class named .crossout and give it the text properties to make the text decoration line-through.

    7. Apply the lined class to the first h3 element, and the crossout class to the third h3 element.

  8. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  9. Save the file again.


Task 7 - Styling Lists

  1. Open new file in Notepad++.  Immediately save the file in your CSS folder as text3.htm.

  2. In the title element, add the title: Styling Lists

  3. Add a centered h2 element containing the same text.

  4. Add page elements:
    1. list exampleAdd an h2 heading element containing the same text as the title element.

    2. Add an h3 heading element containing the text: Styling an Unordered List

    3. Add a multilevel unordered list, containing three levels with at least three items in each. An example of how it could look is at the right.

    4. Copy the entire multilevel list to the bottom of the page, changing it to an ordered list.

    5. Add an h3 heading before the numbered list containing the text: Styling an Ordered List

    6. Preview to see that they appear correctly, noting the default list styles.

  5. Create Sstyles:
    1. Add an internal style sheet.

    2. Create and apply a style to center the h2 heading element.

    3. Add a class named .square and give it the list style property to make the bullet a square.

    4. Add a class named .circle and give it the list style property to make the bullet a circle.

    5. Add a class named .disc and give it the list style property to make the bullet a disc.

    6. Add a class named .levelone and give it the list style property to make the number upper-roman.

    7. Add a class named .leveltwo and give it the list style property to make the number upper-alpha.

    8. Add a class named .levelthree and give it the list style property to make the number decimal.

  6. Apply Styles:
    1. Apply the square class to the outer unordered list.

    2. Apply the disc class to the second level unordered list.

    3. Apply the circle class to the inner unorderedlist.

    4. Apply the levelone class to the outer ordered list.

    5. Apply the leveltwo class to the second level ordered list.

    6. Apply the levelthree class to the inner ordered list.

  7. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  8. Create and Apply additional Styles:
    1. Add an h3 heading at the bottom of the page, containing the text: Changing the Text Wrap Style

    2. At the bottom of the page, add an unordered list with two list items containing two or three lines of Ipsum Lorem text.

    3. Add a class named .wrapunder and give it the list style property to make the list style position inside.

    4. Apply the wrapunder class to the new unordered list.

  9. Preview the file to see the effects. Trouble-shoot as needed.

  10. Save the file again.


Task 8 - Adding Text, Font and List Links to the Index Page

  1. Open your index.htm file.

  2. Add CSS Fonts, Text and Lists as a new term in the list.

  3. Add a file name as a definition for each of the seven titles of the you created in this practice.

  4. Link the titles to their appropriate files.

  5. Test your links, save the files, the stylesheet, and and edited index page, then publish everything.

 

bonom bar