Page Banner

Lesson Practice 4-2:
Creating & Using Classes


Creating & Applying Classes

Task 1 - Creating and Applying Classes

  1. Create your new file.
    1. Open nocss.htm in Notepad++.  Immediately save in the same location as classes1.htm.

    2. In the title element, add the title: Creating and Applying Classes

  2. Create an internal style sheet with element, class and element.class rules:
    1. Add the style element in the header at the top of the document as you learned last lesson, to create an internal style sheet.

    2. Add a body rule with lightyellow value for the background-color property and darkgreen value for the color property.

    3. Add a paragraph rule with a 0.5in value for the margin-left property.

    4. Add an h3 rule with darkblue value for the color property.

    5. Create a new class rule using .different as the selector. Add declarations to make the font-variant property small-caps and the color property blue.

    6. Create a new class rule using the element-class selector h3.first. Add the curly braces. Make the font-style property have the value italic.

  3. Apply the class styles
    1. In the opening tag of the first h3 element, press the spacebar just before the closing bracket. Add the 'class' attribute, and type first between the quotes.

    2. To the opening tag of the 2nd h3, add the class attribute, set to different.

    3. To the opening tag of the last paragraph, add the class attribute, set to different.

  4. Save the file and preview in the browser. Be sure all of the styles you created are working correctly.

Style with DIV and SPAN

Task 2 - Using DIV to Style Large Sections of a Page

  1. Open nocss.htm in Notepad++.  Immediately save in the same location as classes2.htm.

  2. In the title element, add the title: Styling With DIV

  3. Add the style element in the header to create an internal style sheet.

  4. Create style rules:
    1. Add a body rule with powderblue value for the background-color property.

    2. Add a paragraph rule with 0.25in value for the margin property.

    3. Add .red class rule with 0.25in value for the margin, red background-color and white color property.

    4. Add .white class rule with 0.25in value for the margin, white background-color and darkblue color property.

    5. Add .blue class rule with 0.25in value for the margin, blue background-color and white color property.

  5. Apply styles:
    1. Create a div element to contain the first h3 and first paragraph. To the opening div tag apply the red class.

    2. Create a second div element to containg the second h3 and paragraph. To the opening div tag apply the white class.

    3. Create a third div element to containg the third h3 and paragraph. To the opening div tag apply the blue class.

  6. Save the file and preview in the browser. Be sure all of the styles you created are working correctly.


Task 3 - Using SPAN to Style Small Sections of an Element

  1. Open classes1.htm in Notepad++, if necesssary.  Immediately save in the same location, as classes3.htm.

  2. In the title element, add the title: Styling With SPAN

  3. Create your styles:
    1. To the style element in the header, add a class called .lines.

    2. Create a declaration to make the text-decoration property have the values underline and overline (place both commands after the colon, separated by a space).

    3. Create a style named .bold with the font-weight property and bold as the value.

  4. Apply the style:
    1. Add the span element around the word 'header' in the first h3 element. Add the class attribute set to 'lines'.

    2. Repeat for the other two h3 elements, to make the word 'header' in both headings under- and over-lined.

    3. Choose one sentence in one of the paragraphs and use the span element with the .bold class to make that sentence bold.

  5. Save the file and preview in the browser. Be sure all of the styles you created are working correctly.

Use an id Selector

Task 4 – Create and Style with the id Selector

  1. Open classes2.htm in Notepad++, if necessary, and immediately save in the same location as idselector.htm.

  2. In the title element, change the title to: Using an id Selector

  3. Add an id rule to the internal style sheet:
    1. At the beginning of the style section, before the body rule, add space to type a new rule.

    2. Add the selector: #banner { }. Then space out the parts on different lines as before.

    3. Add the background-color property with the value royalblue, the color property with the value navy,and the height property with a value of 120px.

    4. Still in the #banner rule, add font-family style with the value Times, the font-size property with the value 32pt, the font-weight property with the value 400, and the border-bottom style with the values medium double navy (separated by spaces).

  4. Add a banner div to the page using the id:
    1. Move to the body section of the webpage. Just after the opening body tag, create a div element that contains a paragraph element.

    2. To the paragraph element, add the text Page Banner

    3. To the opening div tag, add the attribute: id="banner"

  5. Save the file again, and display it in the browser. 
    The banner would be a unique element on the page, and not be repeated anywhere else on the page, so is an ideal candidate
    for an id selector.


Task 5 – Add to your Index file

  1. Open your index.htm file from your Lesson Site.

  2. In the right cell of the table, below the existing links, add a definition term using the text Using Class and id Selectors

  3. Add the titles of the four files you created in this practice as definitions under this term category.

  4. Save the file. Test your links and publish your edited index file and the new CSS folder.

 

bonom bar