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 - Don't worry about the oblique option, most fonts don't
have an oblique style.
Set the
variant of the font - There are only two options: normal and
small-caps.
Set the boldness
of the font - Try bole, bolder, lighter. Also try numbers from 100 to
900. Normal is 400, bold is 700. Most fonts only have normal and bold.
Border - Explore all of the links below. Try changing thickness and color for each 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 - Explore all the links below. Try different margin widths.
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 - Explore all the links below. Try different padding widths.
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 - Follow each link to see all the possibilities for lists.
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 - Change the line spacing. Use different percentages. Also try using centimeters or inches.
Pseudo-classes
Add different colors
to a hyperlink - Change each of the colors.
Add other styles
to hyperlinks - Experiment with the different styles.
Pseudo-elements
Make the
first letter special in a text - Experiment with different styles.
Make the first
line special in a text - Experiment with different styles.