Lecture 11

H O M E
1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20

Quiz 2 Review

How many missed which one:


1. D	1
2. C	9
3. E	9
4. A	3

Most common errors on the Table:

Missed row and column spacers

Mixed up background images in td tag with img tag inside table cell

Almost everyone got colspan correct

Review Assignment 1

Background tiling "errors"

Image file sizes

Navigation

Don't depend on browsers backup button

When in doubt, put in a link

Named anchors work only on long pages

Spell Checking!!!

Use the built in one in Dreamweaver, or better yet, use Word and cutn'paste

Some stand out assignments:

http://pixel.csuhayward.edu/art3870/026/

http://pixel.csuhayward.edu/art3870/032/

http://pixel.csuhayward.edu/art3870/023/

http://pixel.csuhayward.edu/art3870/010/

http://pixel.csuhayward.edu/art3870/006/

Dissections

Getting good pages to dissect, keep'm coming!

Please rank these and send me in an email

E ran.org

F thephantomlimbs.com

G westiemonkey.com

Cascading Style Sheets

rich Styling

Let's look at an example

They seem about the same, but you only have to write the css once!
Example

Re-Usable

Create is once, use it on every page by storing your stylesheets externally to the html file.

Fine Level of Control

Finer control than is possible with HTML/XTHML

Solid table borders, even dashed ones
Background image repetition
Page positioning
Different cursor types
Inline and block control
Text!

Capitalization control
Pixel height!
Padding
Indent the first line of a paragraph
Justified text

Reliable table heights
List bullet types (like here)
Unbreakable runs of text
Multiple link colors and hover types on the same page

Online references

http://www.htmlhelp.com/reference/css/properties.html
The W3C’s official reference page

http://www.w3schools.com/css/css_reference.asp
Nice, all-on-one-page with listing of supported browsers

http://www.zvon.org/xxl/css1Reference/Output/
Good one with examples for each type

What is CSS, really?

The answer to Designers' Prayers

HTML and XHTML are Structural Languages,
while CSS is a Stylistic Language.

HTML/XHTML designates the meaning of a document’s content, like:

Headings
Emphasis
Tables
Paragraphs

CSS designates the visual appearance, or presentation, of a document’s content, like:

Bold
Underlined
Left-aligned
Orange

Remember, separating presentation from content?

It's the future...

XHTML has already deprecated stylistic tags like:

<font> <u> <strike> <center>

Future specs may well make them illegal. And XML, the future language of the web has no stylistic tags at all.

How It's Done

Three Flavors

Linked

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

Here's an example

Embedded

<style type="text/css">

<!--

.mystyle {cssproperty: value; }

-->

</style>

Gotcha! Alert

Inline

<h1 style="cssproperty: value;">

The Rules Of The Game

Basic Rules

The basic unit of a style is called a rule

h1 {color:#888888;}

Rule Structure

Part names

Syntax

What Can Be Styled?

Or what kind of selectors are there?

Any tag

<h1>

<table>

<em>

<strong>

<any_tag>...

These re-definitions are automatic and will replace the default values of the tag.

Custom selectors, or “classes”, which start with a period

.description

.important

.help

.anyname_you_want

These selectors are invoked when a tag includes the class attribute

<p class=”warning”>

They can be used anywhere on the page and as often as needed

ID selectors, which start with a #

#first-para

#footer

#recent-hits

These selectors are invoked when a tag includes the id attribute

<p id=”first-para”>

They can only be used once on a page

Which one for where?

Redefined tag selectors for everywhere in a page

Class selectors for specific parts of a page that might appear over and over but not everywhere, like a description or an important paragraph.

ID selectors for parts of a page that only appear once, like the first paragraph or the footer.

And, of course, just to confuse the issue, there's a special type of class selector called "pseudo-class"

:link

:visited

:active

:hover

Which controls the look and response of an anchor tag

And also "pseudo-elements"

:first-letter

:first-line

Which controls the first letter and line of a block element

Building Rules

Grouping Selectors

Instead of:

h1 {color: #ff00ff;}

h2 {color: #ff00ff;}

h3 {color: #ff00ff;}

h4 {color: #ff00ff;}

h5 {color: #ff00ff;}

You can group them as:

h1, h2, h3, h4, h5 {color: #ff00ff;}

Grouping Declarations

Instead of:

h1 {font: 18pt Helvetica;}

h1 {color: #ff00ff;}

h1 {background: #66ffff;}

You can group them as:

h1 {font: 18pt Helvetica; color: #ff00ff; background: #66ffff;}

Which could also be written as:

h1 {

font: 18pt Helvetica;

color: #ff00ff;

background: #66ffff;

}

Potential GOTCHA!, don't forget the semicolons!

Contextual Selectors

Sets the context of a tag or class to a specific tag

h1 em {color: #888888;}

Makes an <em> tag color text #888888 but only in an h1 tag

Example

.important {color:#ff0000;}

td.important {color:#0000ff;}

Example

CSS Units

Color

Names or RGB hexadecimal, but don't use names

Length

Absolute Length Units

Inches (in), Centimeters (cm), Millimeters(mm), Points (pt), Picas (pc)

Relative Length Units

M-height (em)

1em

2em

.5em

But use Pixels (px)

Supposedly it’s a relative size, since monitor sizes change, but it’s the only size that’s always proportional to all other elements on the screen, especially images.

Text Properties

Value values

Values are listed in red monospaced when they're specific words that must be used, and in black with <> brackets around it when it's a numeric value. Numeric values usually need a unit measurement as well, like:

10px

10em

10%

Pay attention to the "or" and or "and" between values.

Indentation & Horizontal Alignment

Works only on block elements

text-indent: <length> or <percentage>

Example

text-align: left or center or right or justify

Example

The Height of Lines

line-height: <length> or <percentage> or <number>

Example

Vertical Alignment

vertical-align: baseline or sub or super or bottom or text-bottom or middle or top or text-top or <percentage>

Example

Spacing

word-spacing: <length> or normal

Example

letter-spacing: <length> or normal

Example

Text Transformation

text-transform: uppercase or 
							lowercase or capitalize or none

Example

Text Decoration

text-decoration: underline or overline or line-through

Example

Fonts

font-family: <family name 1>, 
							or <family name 2>, or <family name n>, or <generic 
							family name>

Example

Uses the same cascading "elegant degradation" as html's font face attribute.

Multiple font names must be separated by commas.

Font names with space must be in quotes:

"Courier New"

Generic Family Names:

serif

sans-serif

monospace

cursive

font-weight: normal or bold 
							or bolder or lighter or 100 or 
							200 or 300 to 900

Example

Numbered weights:

From the Open-Type standard's 9 levels of weight. 100 being the lightest, 900 the heaviest.

Generally anything other than bold and normal are not useful or predictable. Don't use them.

font-size: <length> or <percentage> 
							or xx-small or x-small or small or 
							medium or large or x-large or xx-large 
							or smaller or larger

Example

font-style: italic or oblique 
							or normal

Example

Oblique is useless.

font-variant: small-caps;

Example

font: <font-style> optional

and/or <font-variant> optional

and/or <font-weight> optional

and <font-size> required

or <font-size>/<line-height>
optional– but you must have a font-size

and <font-family> required

Example

h1 {font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 30px; line-height: 60px; font-family: Verdana, Helvetica, Arial, sans-serif;}

Becomes

h1 {font: bold italic small-caps 30px/60px Verdana, Helvetica, Arial, sans-serif;}

Sequence of properties counts.

style, variant, weight, size, family

style, variant and weight are optional

font-size is required

line-height is optional, but must be combined with font-size like this:

12px/14px

font-family is required

Exercises

Exercise 1

Create a page that looks like this