bigbadbrain logo
bbb Home
  Lesson 3 - Format Home Page Using Style  

SUMMARY

In this lesson you will modify the home page for your game. You will learn how to use style to change the appearance of your web page.  You will also learn how to make pages change in response to users action by using dynamic HTML (DHTML). 

DISCUSSION

Cascading Style Sheets (CSS) or Style is an approach to change the appearance of one web page or many web pages.  Style can be added using one of three approaches: in-line, internal, and external.  In this lesson, only the in-line approach will be discussed.  

To add style to a tag we add the following to the opening tag:

<tag style = "style-prop1: value1; prop2:value2; prop3: value3">

where tag will be replaced by an actual tag and style-prop1, prop2, prop3, value1, value2, and value3 will be replaced by actual properties and values.  We can add as few as one property or as many properties as you want.  There are over 100 different properties and many possible values for each.

In line 3 in the example below, we add style to the <body> tag so that the background color of the page is black and the color of the text in the page is white.  Notice the following:

  • Style properties must be within quotation marks
  • Different properties must be separated by a semi-colon
  • When a property is made up of two words, the two words are separated by a dash. 

In line 4, we add a <div> tag.  A <div> tag is used as a "container" to enclose content.  <div> tags force line breaks before and after the <div>.  In line 4, we add add style to the <div> so that text within the <div> has a size of 24 points and is arial.  Notice that the text in the <div> on line 5 is not affected by the style properties defined for the <div> in line 4.  Visit the Web Design Tutorial for more information.

EXAMPLE - Adding Style

 Font Size: 10pt 12pt   View Large Version
 Ctrl-C to Copy
1
2
3
4
5
6
7

GAME DEVELOPMENT

Modify your home page for your game. 
  1. Set the background color of the page to something other than white.
  2. Set the font to verdana, courier new, tahoma, impact or comic sans ms.
  3. Set the text color to something other than black.
  4. Add a <div> with the words "Start Game" in it.

 
©dfx interactive, inc. Contact us at bigbadbrain@bigbadbrain.com