Lesson 1: Anatomy of a Style
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.
At the completion of this exercise:
- you will be able to identify the components of a style in CSS.
- Open your portfolio's index.htm file with your text
- 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:
<title>Joe Helling's Portfolio </title>
- 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" >
- 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:
font-family: Arial, Sans-serif;
- Save and view in your browser.
- 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.
- 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.
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.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.