COS 125 Day 17. Agenda Assignment #4 Corrected – 4 A’s, 5 B’s, 3 C’s, and 3 non-submits Assignment #5 Due Exam #3 Corrected – 5 A’s, 5 B’s, 2 C’s, 2 D’s.

COS 125

Day 17

Agenda

Assignment #4 Corrected – 4 A’s, 5 B’s, 3 C’s, and 3 non-submits

Assignment #5 Due Exam #3 Corrected

– 5 A’s, 5 B’s, 2 C’s, 2 D’s and 1 non-take

Capstone Progress Reports Over Due Assignment #6 posted Lecture/Discuss Creating and Applying Styles

Assignment #4

Work in CODE mode not design!! A Title of “assignment #4”

– <head>……<title>A title</title>…..</head> A least 3 of the 6 possible Section headers

– Give each header a name and a title <h1 id=”name” title=”name” ></h1>

A division, a paragraph and an in-line span– <div></div>– <p></p>– <span></span>

Add some comments – Your name– Date you created this web page

<!—Tony Gauvin March 25 2004 -->

Assignment #4

Bold– <b></b>

Italic– <i></i>

Preformatted text– <pre></pre>

Big and small text– <big></big>– <small></small>

Monospaced text– <tty></tty>– <kbd></kbd>

Quoted text (with reference)– <blockquote cite=”url”></blockquote>

Superscript and subscript– <sub></sub>– <sup></sup>

Assignment 4

A transparent gif of your name (Image 1)– page 93 of text

A animation of your name (Image 2)– page 101 of text

A photorealistic image downloaded from the web (Image 3) Recompress to smaller file size but the same image size

(Image 4)– Page 100 of text

Resize to half the original size (Image 5)– Use PSP

Assignment 4

Make sure each image has alternate text and a title– <img src=”apicture.gif” alt=”aPicture” id=”name/>

Make sure you specify size for each image– <img src=”apicture.gif” alt=”aPicture” id=”name” width=”x” height=”y”/>

Rescale image 3 to 50% of Browser viewable width– <img src=”apicture.gif” alt=”aPicture” id=”name width=”50%” />

Create some text describing Image 3 and create the following– float the text to the right of image 3

<img src=”apicture.gif” alt=”aPicture” align=”left” id=”name width=”50%” /> <p></p>

– float the text to the left of image 4 <img src=”apicture.gif” alt=”aPicture” align=”right” id=”name width=”50%” />

<p></p> Make sure you have a background color or image

– <body bgcolor="#CCCCCC">

Learning Objectives

Understand the syntax of a CSS rule Write CSS rules Assign the same style rule to more than one element Create style rules for link states Understand how to create an external style sheet Understand how to link to an external style sheet Understand how to use internal style sheets Understand how to import an external style sheet Understand how to apply styles locally Explore how to use comments in style rules

Style Sheet Examples

Examples of applying style sheets– http://perleybrook.umfk.maine.edu/samples/styles.htm

Formatting– http://perleybrook.umfk.maine.edu/samples/StyleFormat.htm

Styles

Use to format XHTML documents Separate Content from Format Allows consistent “Look and Feel” to all web

pages in a web site

Constructing A Style Rule

Selector {property:value; property:value} Examples

– h1 {color:red;background:yellow}– h2 {color:white;background:black}– p {color:blue}

Constructing Selectors

A selector determines which elements will be formatted

A selector can contain up to 5 criteria (any combination)

– The type or name of the element– The context in which the element is found– The class or id of an element– The pseudo-class of an element or a pseudo-element itself– Whether or not an element has certain attributes and values

Selecting Elements by Name

Simply type the element as the selector– h1– p– div

Add { property:value;…} You can group element with a comma

– h1,h2,h3 {color:red}

You can use * for all elements– * {color:red}

Selecting Elements by Class or ID

If your elements is labeled with id or class, it can be formatted via a selector

If you used class– <h1 class=“bigheader”></h1>– .bigheader {property:value}

If you used id– <h1 id=“firstheader”></h1>– #firstheader { property :value}

Can be used with element name– h1.bigheader {color:red}– h1#firstheader {color:red}

Selecting Elements by Context

Selecting elements based on parent/child relationship between elements

<div> <h1>header</h1><p>paragraph <big>BIG</big><small>small</small></p></div>

div is ancestor of all the above elementsh1 is child of divdiv is parent (ancestor) of h1big is a sibling of smallh1 is a sibling of p big is descendent of div and child of p

Selecting Elements by context

To select an element based on the context (relationship) do the following

For a any descendant element– Ancestor descendant {…}– Div.class p {color:red}

For only the child of a parent element (only some browsers)

– Ancestor > descendent {…}– Div#label > p {color:red}

Selecting Elements by Context

To select elements that are the first child of a parent element– div p:first-child {color-red}

To select element based on siblings– div p+p {color:red}

Selecting Links elements based on their state (pseudo-class)

State means visited, mouse is over link.. etc– a:link {color:red}– a:visted{color:blue}– a:focus{color:yellow}– a:hover{color:green}– a:active{color:white}

Selecting part of an element (pseudo-element)

You can select just the first letter or first line of an element to be formatted

h1:first-letter {color:red} p:first-line {color:blue} Does not work with all browsers

Selecting elements based on attributes of the element

element[attribute]{…}Or element[attribute=“value”] {…} (must have)Or element[attribute~=“value”]{…} (can have)Or element[attribute|=“value”]{…} (must have “value-”)

Does not work in Internet Explorer

Combining Elements

You can combine any of the previous techniques

First you define context Then the element Then class or id Next pseudo-class or pseudo-element Div.works p em:firstletter{color:red}

Creating an external Style Sheet

Create a new text doc Define rules Save as “anyname.css File must be “text only” In Dreamweaver

– File>New>”CSS Style Sheets” – then select one of the already begun style sheets

Linking an external style sheet

In head section– <link rel=“stylesheet” type=“text/css”

href=“url.css”/>– url.css is the location and filename of your

external CSS style sheets

Creating an Internal Style Sheet

Internal style sheet will only effect the one web page

In head section <style type=“text/css”>

selector{property:value}

….

</style>

Importing External Style Sheets

Used with internal style sheet commands <style type=“text/css”>

@import “external.css”;

selector{property:value}

….

</style>

Applying styles locally

Use style attribute in the element you wish to format

Will only effect that occurrence of the element

Example– <img style=“color:red;border:solid” src

=“image.gif” height=“250” alt=“image”>

Location of style rules

With so many ways to apply style what happens when there is more than one rule for a an element– Locally applied rules take precedence– Internal style rules before imported style rules– Order of the rules in a style sheet

Adding comments to a style rule

Why??– So that you remember

/* comments */ Cannot be nested

– /* this /*doesn’t*/ work */

Assignment #6 posted

I have posted assignment 6 in WebCT – Covers Chapters 8-11– Most difficult assignment yet– Due April 7 (One week from Thursday)– I posted it early to allow for any one who may

wish to get an early start– We will discuss this assignment in upcoming

classes

COS 125 Day 17. Agenda Assignment #4 Corrected – 4 A’s, 5 B’s, 3 C’s, and 3 non-submits Assignment #5 Due Exam #3 Corrected – 5 A’s, 5 B’s, 2 C’s, 2 D’s.

Documents