ICS
225 Web Design and Implementation
Lab 2: Style Sheets
Create a
directory called Lab2 and place all the parts of this lab in the directory.
Part I. CSS Tutorial Materials
Refer to this online tutorial for HTML help as needed: http://www.w3schools.com/html
Refer to this online tutorial for CSS help as needed: http://www.w3schools.com/css/default.asp. The link to CSS Examples is especially
helpful.
Part II.
Tables
1. Type in a sample web page. Later in the class you will be using an HTML
validator to be sure your code meets the XHTML standards. To get you started on the right track,
include these lines at the top of each of your files.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Your Title Here</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
2. Implement a table in the body of
your web page.
3. In addition, add an ordered or
unordered list of items to your page.
4. Upload and test. If you would like to see if your page meets
the requirements for validation, go to http://w3.org
and select the HTML Validator link.
5. Alternatively, you can test your web
page on your local computer by opening an Explorer window, going to the
directory holding your web page and double clicking on the file name. Local testing is always permitted, but don’t
forget to upload and test your final version.
You can only validate pages which have been uploaded to the server.
Part III.
Style Rules
1.
Using
the sample page from part II, add new style rules to your web page to do the
following. Alter your web page so that
it uses the tags for which you have defined rules. As you add each style rule, test to see that
your rules are correctly applied to your web page.
·
Assign
a different color to each of the <h1>, <h2> and <h3> tags. (color)
·
Right
align the contents of all paragraphs.
(text-align)
·
Change
the background color. (background-color)
·
Change
the font for one or more tags.
(font-family)
·
Decorate
some text with overline, linethrough, or blink. (text-decoration)
·
Adjust
the numbering style for the ordered list or the style of the symbol for an
unordered list (list-style-type).
·
Add
a dotted line border to your table (border).
·
Adjust
the size of the table columns so they are all of equal size (width).
2. Keep trying new
style changes:
·
Change
the style of the cursor as it moves over the list. (cursor)
·
Capitalize
the first letter of every word in a paragraph.
Apply this rule to only one paragraph.
(text-transform)
·
Display
an image on your web page. Use style
commands to control the height and width of an image. (height, width)
·
Display
an image in the background. That is, an
image will be displayed in the background and your text and other page elements
will be laid on top of the image.
Note: Do not put a space in front
of the parenthesis. (background-image)
Part IV. Style
Sheets
Style rules
are often placed in a separate file, a style sheet, and saved. This allows the same set of style rules to be
linked or imported into many web pages, creating a consistent look and feel
across your entire web site.
1. Open a blank window in your
editor. Cut the style rules out of the
style section of your web page (from Part II) and paste them into your blank
file. Do not put the <style> or
</style> tags in this file – just the style rules themselves. Save this file as myrules.css. You must use the extension .css
2. Change the style
section of your web page as follows:
<style type="text/css">
@import
"myrules.css";
</style>
Note: Instead
of using the style tags and the @import "myrules.css" statement, you could replace the style
section with this statement:
<link href="myrules.css"
rel="stylesheet" type="text/css">
3. Retest your web
page to make sure everything looks the same.
Note: If you have
linked or imported a style sheet and
you have defined rules inside your web page (inline rules), the inline rules
will override the style sheet rules.
Note: If you have
trouble making your changes show up when using style sheets, you may need to
close your browser and restart it.
Part V.
Additional Help on CSS
http://www.htmlhelp.com/reference/css/