PBDS 660: Introduction to Hypermedia

Tonight's Agenda: Our First Real CSS Experience buttermilk falls in Ithaca, NY, in winter

Hide All | Show All

Quiz 3, the Sequel

Practice, Practice, Practice

The handout contains 3 of the 4 questions from Quiz 3.

  1. Using Notepad, write the answers to each of the 3 questions.
  2. Save the document as a text file with the name yourlastname_q3.txt
  3. ftp the file yourlastname_q3.txt to your directory on student-iat.ubalt.edu

I will not be changing anyone's grade, but I will look over the results and let you know what areas you really need to study. I can assure you, all three of these issues will appear on the final exam and they will count for a lot if you cannot handle them quickly, easily, and accurately.

Review: Adding Style Sheets and Basic CSS Syntax

You can invoke an external style sheet in one of two ways: with the link element or with the import statement. Either way, the code belongs in the <head> element of the document.

The link element method:

<link rel="stylesheet" href="../css/print.css" type="text/css" />

The import method:

<style type="text/css" media="screen">
@import url("../css/print.css");
</style>

Basic CSS Syntax

element you want to style: e.g. -- h1, p, div, td and so on
{
property: value;
property: value;
. . .
}

Here is an example of proper syntax to apply style to the h1 element:

h1
{
font-family: "Times New Roman";
font-size: 25px;
color: green;
}

Working with Fonts

Overview of Font Properties

In-Class CSS Exercise

Working with Fonts

  1. Copy the css_exercise_1 folder to your desktop.
  2. In the css_exercise_1 folder, create a folder called css.
  3. Create a new file in Notepad called typography.css.
  4. Save it in the css directory.
  5. Open the file history.html in Notepad.
  6. Add a reference to a stylesheet at "css/typography.css" (using either the link method or the import method.
  7. Open typography.css and add the following text to that file, save it, and open history.html in a browser and see the difference.
	        body 
		{
		font-family: Verdana;
		}

Working with Font Families

Specifying a Default Font Family in the body Element

To specify alternate fonts, use font-family. It will use the fonts in the order you specify.

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Specifying Other Fonts for Other Tags

Specify different fonts for different tags after the body style declaration. Use commas to apply the same style to multiple tags.

h1, h2, h3, h4, h5, h6
{
font-family: Georgia, "Times New Roman", Times, serif;
}

Changing Font Size

Bulletproof Web Design recommends a "flexible text" technique: all fonts done in percentages. Let's try it.

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

Changing Font Size

Now, style the h1, h2, and h3 tags so that they are sequentially smaller. Add this after the h1 through h6 style declaration.

h1
{
font-size: 200%;
}

h2
{
font-size: 160%;
}

h3
{
font-size: 140%;
}

Font Style

Use font-style to add italics to the rule for h2 (don't add a new declartion; just add a second rule for the h2 declaration you have already written).

h2
{
font-size: 160%;
font-style: italic;
}

Font Weight

Use font-weight to add weight (bold) or decrease weight in increments of 100 (100, 200...up to 900) or by using the word bold.

h3
{
font-size: 140%;
font-weight: normal;
}

Changing Line Height (Leading)

To change the spacing between lines in a paragraph (leading), simply adjust the line-height setting. It's good to use the same units that you used to size the fonts (especially for relatively sized fonts).

p, li
{
line-height: 180%;
}

Changing Character Spacing (Kerning)

To change the spacing between characters (kerning), provide a letter-spacing setting. Again, it's good to use the same units that you used to size the fonts (especially for relatively sized fonts).

h1
{
font-size: 200%;
letter-spacing: 100%;
}

Adding Color

Changing Font Colors

Words like "blue" or "green" can specify colors, but its preferred to use their hexidecimal values. It also allows more precise color choices (lighter, darker, more saturated.) You can find the 216 basic codes online, but using photoshop, fireworks or a similar tool, you can get even more precise than that by using an eyedropper tool.

To specify font color, just use the color property.

h1, h2, h3, h4, h5, h6
{
font-family: Georgia, "Times New Roman", Times, serif;
color: #0066CC;
}

Changing Font Background Colors

Change the background color of text to add even more style, and also to see how different elements behave (block versus inline).

h1
{
font-size: 200%;
letter-spacing: 100%;
background-color: #FFCC66;
}

Digression: Cool Font Stuff

Check this out. Worn type effects using css.

Working with Images

Images (or any block level element, for that matter) have many useful styles for presentation and positioning, including:

Adding a Border

If you are declaring a border for the first time, it's easy to just use the border declaration, with the width, style, and color values in order with a space between them.

img
{
border-size: 3px;
border-style: solid;
border-color: #ccc;
}

EASIER...

img
{
border: 3px solid #ccc;
}

Positioning an Image (float)

When text needs to flow around an image, like it would in a newspaper, we can position the image to the left or right using the float setting. You can float an image (or other elements) right or left, and subsequent elements will wrap around them.

img
{
border: 3px solid #ccc;
float: right;
}

Adding Padding to Images

When floating an image, sometimes text will come too close to the edge of the image making it difficult to read. One way to address this is by providing padding on the sides of the image that text is appearing.

img
{
border: 3px solid #ccc;
float: right;
padding-left: 20px;
padding-bottom: 20px;
}

Adding Padding to Images, an Easier Way

Different sizes of padding can also be specified for by providing settings in clockwise order (top, right, bottom, left.)

img
{
border: 3px solid #ccc;
float: right;
padding: 0 0 20px 20px;
}

Adding Margins to Images

Padding is added inside of a border. If space is required outside of a border, its appropriate to use margin.

img
{
border: 3px solid #ccc;
float: right;
margin: 0 0 20px 20px;
}

Paddings, Borders, and Margins: Your Basic Box Model

Paddings, borders and margins behave in the following fashion for images, and for any block level element:

Padding, Borders and Margins

In other words, the block level element is surrounded by whatever padding is specified (the default is 0) then by whatever border is specified, and finally by whatever margin is specified.

Working with Tables

Let's apply what we've learned to making a table look more presentable. We will:

Adding Borders

Open the file in css_exercise_1 that contains the table of rates in Notepad, and add a reference to our stylesheet in the header of the document.

Adding Borders

Then open the stylesheet in Notepad, and add the following style declarations.

table 
{
border-collapse: collapse;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}

th, td
{
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

Adding Borders

What if you only wanted borders on the columns? Or the rows? You could try this:

table {
border-collapse: collapse;
}

th, td
{
border-bottom: 1px solid #000;
}

Adding Padding to Cells

Use padding to help the table breathe a little bit. When specifying two sets of settings for padding, the first is top and bottom, and the second is left and right.

table 
{
border-collapse: collapse;
}

th, td
{
border-bottom: 1px solid #ccc;
padding: 10px 20px;
}

Styling Table Headers

Differentiate the header by using color and background color.

(after other styles)

th
{
color: #fff;
background-color: #999;
border-bottom: 0;
}

Adding a Background Image to Rows

Add a background image to each cell, position and specify its repeat pattern. This can be done to with any block level element.

td
{
background-image:url(images/gray_gradient.gif);
background-position: bottom;
background-repeat: repeat-y;
}

Using div and span Elements

Using div and span Elements

The div and span elements, combined with the id and class attributes, can be used to apply specific styles to targeted areas of our document.

The div Element

The div element can be used to enclose a section and treat the entire section as a block level element for presentation. This is useful when you want to create a layout that uses columns, headers and footers, or when you would like to force a particular element to appear in a particular position.

<div>
(Any number of elements you wish to treat 
as a block-level element, or as a collective unit.)
</div>

The span Element

The span element can be used to enclose text and treat the text with different styles than are already being applied to its master elements.

<p>Some text <span>text styled 
differently</span> some more text.</p>

The class Attribute

The class attribute can be used in just about any XHTML element (but you will frequently see it with div and span). Use it to specify different styles for that element when you intend to invoke those styles repeatedly.

<p class="different_style">
Differently treated paragraph.
</p>

The id Attribute

The id attribute is similar to class but can only be invoked ONCE in a document. Use it to specify different styles for an element when you intend that element to appear only one time per Web page, like a header section, or a left column.

<div id="header">
(All tags contained in the header.)
</div>

Implementing a class

To implement styles for a class, use the period to precede the class name in the stylesheet. If you intend to apply that class to multiple elements, you don't need to specify the element names.

.big_letters
{
font-size: 300%;
}

Implmenting an id

To implement styles for a id, use the pound sign to precede the class name in the stylesheet. Remember, the id can only be used ONE TIME in the document, so only use it for situations where you intend to treat something in your metastructure as a single element.

#left_column
{
float: left;
}

Experimenting with div and span

To apply styles to elements within an id setting, such as a div, you can refer to them in the stylesheet by specifying a pound sign and the id without a space, then a space, then the elements. If you only wish to apply settings to elements within that particular id, then you must ALWAYS precede the tag with the pound sign and the id name, as demonstrated here:

#left_column p, #left_column h1, #left_column h4
{
font-face: Georgia;
}

Experimenting with div and span

Here's a demonstration of ways in which you would use div and span as ways of applying style to particular sections of a document.

Demonstration

Your Practice Assignment

Here are links to the completed class exercises.

Next week's agenda

Valid XHTML 1.0 Strict

Last updated: 03/25/07 17:32:59
Copyright © 2006 School of Information Arts and Technologies