I will be at a conference on March 7, 2007. There will be no class that day. In order to make up for the lost time, you are required to go to the following web site and do the following tutorial. The entire tutorial should take a little over an hour to complete.
Go to http://www.w3schools.com/css/css_examples.asp
Perform the following tasks on the site.
Background
Set
the background color - There are four different backgrounds that can
be changed. Experiment with each of them.
Set
an image as the background - In addition to the image bgdesert.jpg, you
may also select smiley.gif.
How
to repeat a background image - Change the value of background-repeat
to repeat, no-repeat, repeat-x or repeat-y.
How
to place the background image - Change the value of background-position
to left, right or center. Next, try the two word combinations top left, bottom
right. Add more content to the body of the html page (enter many <br>
tags), then change the position again.
A
fixed background image (this image will not scroll with the rest of the
page)
All the background
properties in one declaration - Make changes to any of the properties.
All of them can be set at once.
Text
Set the color of
the text - Change the color of the headings and the paragraphs. Heading
tags are just like paragraph tags, but they use a different font.
Specify
the space between characters - Notice that the spacing can be postive
and negative.
Align the
text - The alignment options are left, right, center and justify. To
see how justify works, add a lot more text to one of the paragraphs and then
set the alignment to justify.
Decorate
the text - Try all of the options that are listed in the page. There
is also blink, but never put that in a page for one of my assignments.
Indent text
- In addition to the text-indent, also add a margin. By setting the text-indent
as negative, you can get a hanging indent:
p {maring: 1cm; text-indent: -1cm}
Control
the letters in a text - Try each option.
Font
Set the font
of a text - Select several fonts in one font-family statement. The first
one that is found will be used. Try entering
p {font-family: "courier new", "times new roman"}
then change it to
p {font-family: "times new roman", "courier new"}
There are three generic font families. They do not specify a specific font,
they ony specify a major characteristic of a font. Each browser is guaranteed
to have one of each of these fonts. Use them as the last choice in a list
of fonts.
p {font-family: bazooka, sans-serif}
If the browser doesn't have bazooka, then it will have a font without
serifs.
Set the size
of the font - In addtion to using percentage, try using
points.
p {font-size: 36pt}
Set the style
of the font
Set the
variant of the font
Set the boldness
of the font
All the font properties
in one declaration
Border
Set the
style of the four borders
Set different
borders on each side
Set the
color of the four borders
Set
the width of the bottom border
Set
the width of the left border
Set
the width of the right border
Set
the width of the top border
All the
bottom border properties in one declaration
All the left
border properties in one declaration
All the
right border properties in one declaration
All the top
border properties in one declaration
All the
width of the border properties in one declaration
All the border
properties in one declaration
Margin
Set the left
margin of a text
Set the
right margin of a text
Set the top
margin of a text
Set the
bottom margin of a text
All the margin
properties in one declaration
Padding
Set the
left padding of a tablecell
Set the
right padding of a tablecell
Set the top
padding of a tablecell
Set the
bottom padding of a tablecell
All the padding
properties in one declaration
List
The different
list-item markers in unordered lists
The
different list-item markers in ordered lists
Set
an image as the list-item marker
Place
the list-item marker
All list
properties in one declaration
Dimension
Increase the space between lines
Classification
How to display
an element?
A simple use of
the float property
An image with
border and margins that floats to the right in a paragraph
An image with
a caption that floats to the right
Let the first
letter of a paragraph float to the left
Creating a horizontal
menu
Position
an element relative to its normal position
Position
an element with an absolute value
How to make
an element invisible
Change the
cursor
Positioning
Position
an element relative to its normal position
Position
an element with an absolute value
Set the shape of
an element
What should
happen when an element's content is too big to fit in a specified
area
Vertical
alignment of an image
Place an element
"behind" another element
Place an element
"behind" another element 2
Pseudo-classes
Add different colors
to a hyperlink
Add other styles
to hyperlinks
The use of
the :first-child pseudo-class
The use of the :lang
pseudo-class
Pseudo-elements
Make the
first letter special in a text
Make the
first line special in a text