Lesson 1: Anatomy of a Style

Overview

In the previous unit you used HTML to add content and structure to your portfolio home page. You also created an accessibility checklist using an HTML table. In this unit you will use Cascading Style Sheets (CSS) to make the page presentable. CSS, like HTML, is a markup language. It is used to define the style of the page and to control the overall page layout.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Using your text editor, return to your portfolio's index.html file.
  2. Start by typing <style> and </style> on separate lines within the head section of your document. These tags mark the beginning and end of the style section. When you're finished, your head section should look something like this: 
      <head>
    <meta charset="utf-8">
    <title>Web Portfolio: Judy Jetson</title>
    <style>
    </style>
  </head>
  3. If we were using an earlier version of HTML or XHTML, the opening tag of the style section (<style>) would also need one more thing before it's complete: 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 would look like this:
    <style type="text/css" >
    However, HTML5 doesn't require this attribute. So all you need on your web page is <style>.
  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 controlling 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. Add the following code between the <style> and </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.8em;
    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 you have two selectors, body and h1.
    • 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 (px) or points (pt). A pixel is one dot on the computer screen, and a point is equal to 1/72 of an inch, which is measure better suited for print documents than for computer screens. Values can also be declared in relative terms such as percent (%). For example, the font-size for the body might be set to 100%, which is the default font size in the user's browser. If the h1 font-size property is set to 180%, that's 80% larger than the rest of the body. It's relative because the default font varies from computer to computer. Another relative unit is Ems (em). One "em" is the size of the letter "M" in the user's current font. In the above example, the font-size for the body is set to 1em, and the font-size for h1 is set to 1.8em, or 1.8 times the default size. 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. If you use 12px to specify font size, that may look fine to most users on a computer screen, but it will be tiny on a high resolution cell phone!
  7. Notice the syntax of the code you entered. Even though CSS refers to the same elements as HTML (in this case, body and h1), it does so using very different syntax. For example, in CSS the names of elements aren't wrapped within angle brackets (< and >) like they are in HTML. Discuss with your instructor the function of the brackets, colons, semi-colons, and commas in CSS.

Comments in CSS

When you first learned essential HTML tags, you learned about the importance of adding comments to your code in order to make your code easier to read and understand, for yourself and others. In HTML, you opened comments with <!-- and closed them with -->

In CSS, the syntax is different. You open comments with /* and closed them with */

Here is the same example as above, but this time it includes comments as a reminder of the color represented by each color code (color codes will be explained in more detail in Module 2: Color in CSS).

  body {
    font-size: 1em;
    font-weight: normal;
    font-family: Arial, Sans-serif;
    color: #000000; /* black */
    text-align: left;
  }
  h1 {
    font-size: 1.8em;
    font-weight: bold;
    color: #0000ff; /* blue */
    text-align: center;
  }

Handouts/Online Documents

All done?

After you have saved the changes to index.html, 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.