Concepts in Computing
CS4 - Winter 2007
Instructor: Fabio Pellacini

Lecture 4: HTML and Styles

Overview

  • Making your document stylish
  • Colors
  • Fonts
  • Style sheets

Styles

There are many properties of physical appearance we might want to control, once we have the structure of the document right.

  • A style indicates things such as font family and size, color, alignment, etc. It does this with property:value pairs, e.g.,

    font-family: sans-serif; font-size: 200%; color: yellow; background-color: blue; text-align: center

  • Virtually every tag supports a "style" attribute, which lets you specify simple style information as part of the tag. For instance, the above paragraph uses the style attribute with the property:value pairs shown.
  • If one tag is inside another, then the inner tag's style settings override those of the outer tag.
  • The <div> tag, for "division", can be applied to any part of a document. Its style is inherited by everything within it (unless overridden).
  • The <span> tag lets you apply a style to a portion of flowing text, spanned by the tag.

Which color

How do we tell a computer what color we mean?

  • In the RGB model, color is specified as a set of three values: red, green, and blue, each in the range from 0 (none of that color) to 255 (full on). Thus:
    255255255white
    000black
    25500bright red
    02550bright green
  • How many possible colors does this allow us to specify?
  • In HTML, you specify a color by writing these values in hexadecimal (base 16). Just as decimal has a 1s place and a 10s place, hexadecimal has a 1s place and a 16s place. The digits 0-9 are as usual, but to get values from 10-15, we use the letters A-F.
    So FF means "fifteen 16s plus fifteen 1s" = 255.
    Similarly: A2 ==> ten 16's + two 1's = 160 + 2 = 162.
  • To make a color, take the red, green, and blue values, each as a two digit hexadecimal number, and string them together after a hash mark (#), e.g.,
    255255255white#ffffff
    000black#000000
    25500bright red#ff0000
    02550bright green#00ff00
  • Some graphics programs will give you color values in this HTML format, but if you want to convert your own, do each value (red, green, or blue) separately:
    • Let v be the value.
    • Divide v by 16.
    • The quotient is the first digit.
    • The remainder is the second digit.
    • Convert 10 to A, 11 to B, ..., 15 to F.
    E.g., 181 / 16 = 11, remainder 5. Thus 181 = B5.
  • Color table. Color chooser.
  • Some browsers allow you to use color names as well, such as "cyan".

What to color

  • Styles let you add color. Style sheets (below) provide the most power and flexibility in specifying what should be colored how. Meanwhile, you can color chunks of text with a color property:value pair within a span, e.g., The Former Fed Chief.
  • Browsers have default settings for the background, text, and link colors. Typical settings are a gray or white background, black text, blue unvisited links and purple visited links. You may override these settings in your webpage, with attributes of the body tag.
    • bgcolor -- background color
    • text -- text color
    • link -- links
    • vlink -- visited links
    You may combine all these, within a single body tag, e.g., <body bgcolor="#FFFFFF" text="#FF0000" link="#00FF00" vlink="#0000FF">.
  • You can use colors in tables. The background color of the whole table is specified by its bgcolor attribute. Similarly, the background color of any cell can be specified by adding the bgcolor attribute to the <th> or <td> tag.
    Col 2 Col 3 Col 4
    Row 2 A B C
    Row 3 D E F

Which font

Now, how about how the text itself appears? You're probably already familiar with the notion of font, which is just a collection of letters, digits, and special characters. We can specify within a style a font-family property value, e.g.,

  • generic serif ("feet" on the letters)
  • generic sans-serif (no feet)

Here are some examples. Specifying a font is kind of a "suggestion", which the browser will try to follow depending on what's installed on the system.

<span style="font-family:Arial"> Lorem ipsum dolar ebit rabis sabif fa odoloar
<span style="font-family:Impact"> Lorem ipsum dolar ebit rabis sabif fa odoloar
<span style="font-family:Times"> Lorem ipsum dolar ebit rabis sabif fa odoloar
<span style="font-family:Verdana"> Lorem ipsum dolar ebit rabis sabif fa odoloar

Styles lets you also set font size. Historically this was done by the <font>, which is now deprecated.

Many relative sizes: xx-small to xx-large.

font-size=xx-small Hello
font-size=x-small Hello
font-size=normal Hello
font-size=x-large Hello
font-size=xx-large Hello

Font size can also be expressed using absolute values, for examples 10 pixels, 10 points, 10 inches, etc. In this case, we need to specify the value and the unit of measure too. This is the best way to make that your text will be the size you expect.

font-size=10px Hello
font-size=20px Hello
font-size=10pt Hello
font-size=20pt Hello

Style sheets

Some HTML tags specify physical properties of the text they contain (e.g., <b>, <i>). Some HTML tags have attributes (e.g., bgcolor) that let you specify display properties. We can specify style property:value pairs in many ways. But setting all of these values for every tag quickly gets tedious, and making changes to even a modest-sized website is a lot of work if you do it this way.

Thus the clever folks at the W3C borrowed the old typographer's notion of a stylesheet. A stylesheet is basically a list of rules of the form: "Whenever you see tag X, use this style information."

The exact same text can look very different, depending on the stylesheet. See the CSS zen garden, for example. It follows the reasoning we discussed in logical vs. physical tags -- specify physical appearance separately from structure.

  • Sets of rules to be applied throughout a document, or style sheets follow a language called "CSS", short for "Cascading Style Sheets". The rules are referenced inside the <head> of the document, in one of two ways:
    • The <style> ... </style> tag lets you put style rules right into your web page. Ex:
      <style type="text/css"> ... style rules... </style>
    • The <link> tag lets you point to a separate stylesheet file, which can be shared among several pages. Ex:
      <link rel="stylesheet" type="text/css" href="URL">
      Just indicate with a URL the location of a file with the rules.
  • The basic format of a CSS rule is TAGNAME { RULES } where, TAGNAME is the name of an HTML tag, and RULES is a list of one or more property:value pairs, each ending with a semicolon. For example we can indicate a style to be applied to all paragraphs, as follows:
    p {
       font-family: sans-serif;
       font-size: 120%; 
       color: #00cc00;
       background-color: white;
    }
    
    Valid values depend upon the property. See the CSS spec for a complete list.
  • If you want to apply the same rules to multiple tags, separate their names with commas:
    h1, h2, h3 { text-align: center; }
    
    This means that for all the tags listed, the text-align property should be set to "center".
  • Sometimes, you want to specify a rule that depends on context, e.g., "When a <p> tag appears inside a list item (<li>), its style should be different from the normal <p> tag." To do this, list the tag names in nested order, e.g.,
    li p { RULES }
    Note that here we do not use commas. This is subtle, but important: "li, p" means "li and p", whereas "li p" means "p inside li".
  • Perhaps you want to define a certain kind, or "class", of tags, which are used for specific purposes. Almost every HTML tag supports an attribute class="STRING" which lets you give a name to a certain family of tags. The "dot" selector in CSS then lets you apply rules to members of the class. For example, you can set the style for only those tags which have class="foo" as follows:
    .foo { RULES }
    You can restrict it to list items with class="foo":
    li.foo { RULES }
  • If you have a single element to which you want to apply a style (rather than a whole group), you use the id="STRING" attribute in the HTML tag and the "hash" selector in CSS. For example, you can set the style for only the element with id="today":
    #today { RULES }

Some simpler examples than the Zen Garden:

This is really only scratching the surface. Stylesheets give you a lot of control over the appearance of your document, without forcing you to destroy the spirit of HTML as a markup language. Of course, the degree to which CSS is supported varies from browser to browser, but the basic components should work for virtually all reasonbly recent browsers.