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 your portfolio's index.htm 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 <style> and </style> within the head section. These tags mark the beginning and end of the style section. It should look like this:
    <head>
    <title>Joe Helling's Portfolio </title>
    <style>
    </style>
    </head>
  3. The opening tag of the style section (<style>) needs one more thing before it's comlete: An attribute, telling the browser what type of style you're defining. When using CSS, the type is always "text/css". So, after adding this attribute, your opening style tag will look like this:
    <style type="text/css" >
  4. Now that you have created the beginning and end of a style section, you can begin to add style declarations to that section for controling the style of various HTML elements. Start with the <body> tag. Since all other web page content is contained within the body, the style you apply to the body will be inherited by all other elements. If you want a particular element to have a different style than everything else in the body (for example, to change the color, size, and weight of an <h1> tag), you'll need to add a style declaration for that element. Write the following code between the STYLE tags in your document:
    body {
    font-size: 1em;
    font-weight: normal;
    font-family: Arial, Sans-serif;
    color: #000000;
    text-align: left;
    }
    h1 {
    font-size: 1.4em;
    font-weight: bold;
    color: #0000ff;
    text-align: center;
    }
  5. Save and view in your browser.
  6. 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.
  7. 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, and refresh. If you did everything correctly, you should notice some stylistic changes to your text. Show your instructor your results before starting Lesson 2.