Box Properties Assignment Explained

This week we learn about CSS box properties.

Preparation:

Text: Chapter 10 - Getting Intimate with Elements: The Box Model

CD: View lesson 2 (optional). Omit the section on CSS shorthand until lesson 3.

Watch the last hour of the class that has sound:

https://sas.elluminate.com/p.jnlp?psid=2009-03-24.1902.M.BACB983C4AB2475211372E6158F1C3.vcr

You will be asked to download Elluminate Live to watch these movies.

The first hour recording has no sound - so watch these movies from my CD instead. You will need quiktime

box model demo

using box properties to style a <p> tag with an id

XHTML Template: Remember that you should start all your web pages with a standard format. Below is code that you should copy and use as your template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Place a title here</title>
<link type="text/css" rel="stylesheet" href="yourcssfile.css" />
</head>
<body >

content, content, content ...

</body>
</html>

For Credit:

Use the "line-height" property in a style or rule. [10 pts]
Create an "id" for a block element (such as "p", "heading", or "list" element)- 15 points.
Give this element an id. Use all of the following properties in a single rule:
* padding
* margin
* border-style
* border-color
* border-width
Add a background image to a CSS rule. [10 pts]

Demonstrate the background-image, background-position, and background-repeat properties in a single CSS rule. Note that your background-image must be stored on your student server account and that the url you provide must use a relative path (not a complete URL).

At this point don't use the shorthand "background" for now. Use the exact properties I have listed.

Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Links to these validators are on the resources page. Note that points will be deducted from your score for each error in your XHTML or CSS code.

Upload your webpage, background image, and css file to the server. Upload them directly into your public_html folder, not into a subfolder.

4. 5 points will be assigned if the pages validate for HTML and CSS

Turn in Homework

On the homework organizer page, add a link to the Web pages which contain the tags that are using box the properties covered in this lesson. Add another link to the .css file. Explain what element is displaying a "line-height" property, the box properties and the background property. sample homework organizer page

Take Quiz

Here is a link to quiz 1 which is worth 20 points

Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt. If you load the quiz more than once you will receive a 0.

Your Website Project:

Rather than having you wreck your website project each week trying to incorporate everything you learn, you will demonstrate your mastery of concepts each week on a page that is not a part of the website you are developing. Your website project will be due the last week of class.

I am not giving you specific instructions as to how to develop your site, and I know that many of you will want to continue development of the sites you started in the A class. You have complete control over what CSS you use in your web sites, and you don't need to use everything we learn in this class. All pages must validate, and you should try and get your site looking as good as you can get it. Also, please check out the Considerations for a Good Website page.

CIS 58.51B

Box Properties Assignment Explained

Preparation:

Turn in Homework

Take Quiz