CS 4, Summer 2006: 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:

255 255 255 white

0 0 0 black

255 0 0 bright red

0 255 0 bright 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.,

255 255 255 white #ffffff

0 0 0 black #000000

255 0 0 bright red #ff0000

0 255 0 bright 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

	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

So, styles let you set fonts, and as mentioned above for color, sheets (below) provide the most power and flexibility in specifying them. While its use is now discouraged, the <font> tag historically did that, on an individual basis. Since you might see this tag, here's the basic idea.

Seven sizes: 1 through 7.

<font size="1"> Hello </font>	Hello
<font size="2"> Hello </font>	Hello
<font size="3"> Hello </font>	Hello
<font size="4"> Hello </font>	Hello
<font size="5"> Hello </font>	Hello
<font size="6"> Hello </font>	Hello
<font size="7"> Hello </font>	Hello

Relative sizes: bigger/smaller than the standard size of the page.

<font size="+1"> Hello </font>	Hello
<font size="+2"> Hello </font>	Hello
<font size="-1"> Hello </font>	Hello
<font size="-2"> Hello </font>	Hello
<big> Hello </big>	Hello
<small> Hello </small>	Hello

Attribute face works the same as the style property font-family, e.g., <font face="sans-serif">.
Can add a color attribute; e.g., <font color="#ff0000">

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.

255	255	255	white	#ffffff
0	0	0	black	#000000
255	0	0	bright red	#ff0000
0	255	0	bright green	#00ff00