3.2  Style Sheets - Font, Text, and Background

Index Code Tester

OBJECTIVE

DISCUSSION

Font Properties

<div style = "font-family: courier; font-size: xx-small; font-style: italic; font-variant: small-caps; font-weight: 700">Hi</div>   


Text Properties

<div style = "color: red; letter-spacing: 5; text-align:center; text-decoration: line-through; text-indent: 20;white-space:nowrap; word-spacing: 3">Hi, this is really exciting text</div>  


Background Properties

<body style = "background-attachment: scroll; background-color:red; background-image: url('ball.gif'); background-position: 100 100; background-repeat: no-repeat">Hi, this is really exciting text</body>  

EXERCISES

In all of the following exercises, use style properties.

In exercises 1 & 2 you will list the style properties and possible values for each.  You might want to create a .css file and add this information to the file to set it up as a template file. 

1.  List the Text properties and possible values for each.

2.  List the Background Properties and possible values for each.

3.  Create a new page.  Use the internal style approach to define the style for the body tag.  Make sure that the page meets the following requirements:

  1. An image appears repeatedly in the background.
  2. The images scroll with the page
  3. A <div> tag has its background color set to blue.

4.  Create a new page.  Use the internal style approach to define the style for the body tag.  Make sure that the page meets the following requirements:

  1. An image appears once in the center.
  2. The image is fixed to the background so that the text scrolls over it
  3. A <div> tag has its background color set to blue.

5.  Using the page you created in #4, use the internal style approach to define the style for the div tag.  Make sure that your page meets the following requirements:

  1. The background color of the div is green.
  2. The font color is yellow.
  3. A line appears over the text.
  4. The text is centered.
  5. The spacing between the words is 10.
  6. The spacing between the letters is 5.
  7. The font is verdana.
  8. The text is italic.

6.  What style properties are used to...

  1. Make the background image appear in a specific location?
  2. Make text indented?
  3. Make text uppercase?
  4. Make text large? 

LINKS AND HELP

http://www.w3schools.com/css/css_syntax.asp
http://www.w3.org/Style/CSS/learning
http://www.w3schools.com/css/css_reference.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp