UNIT 3 > MODULE 1

Lesson 1: Anatomy of a Style

Overview

In the previous unit you used HTML to structure the portfolio home page. In this unit you will use Cascading Style Sheets (CSS) to make the page presentable. CSS is a markup language as is HTML. It is used to define the style of the page (such things as font type, size and many other attributes) as well as to control the overall page layout.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Open the index.html file with your text editor.
  2. In order for CSS to control the entire page, the CSS code should be contained within the head section of the document. Start by typing the style tags within the head section. It should look as follows:
    <head>
    <title>Joe Helling's Portfolio </title>
    <style>
    </style>
    </head>
  3. Now that you have inserted the STYLE element, you can begin controling the style of various HTML elements. Start with the <h1> tag and write CSS code to emphasize the header tag, <h1>. Write the following code between the STYLE tags:
    <style>
    h1 {
    font-size: 140%;
    font-weight: bold;
    font-family: Arial, Sans-serif;
    color: #0000ff;
    text-align: center;
    }
    </style>
  4. Save and view in your browser.
  5. There are three parts to the style:
    • Selector - the selector is usually the HTML element that you are attempting to control. In this example it is the <h1> tag.
    • Property - the property defines the selector in some manner, usually by size or variety. In this example font-weight and font-family are properties that describe the <h1> selector.
    • Value-the value declares how much, how far, what color, etc. The value of the font-size in the above example is 140%. Values can be expressed in absolute terms. For instance something can be declared to be an exact number of pixels wide (px) or inches wide (in) or points (pt). Values can also be declared in relative terms just as the example shows. 140% declares that h1 font is 140% larger than the default font size. It's relative because the default font varies from computer to computer. Relative value units are percentages (%) and Ems (em). One "em" is the size of the letter "M" in the user's current font . Relative values are generally better to use because they are "scalable", they grow and shrink as needed to best fit given the user's screen resolution, window size, and default browser font size.
  6. Notice the use of punctuation in the example above. Describe to your instructor the function of the brackets, the colons, the semi-colons, and the commas.

Handouts/Online Documents

All done?

After you have saved the changes to index.htm, open the file in your browser. Refresh your browser and notice the change to text contained within the <h1> tags. Show your instructor your results before starting Lesson 2.