HTML & CSS Tutorial

Designing a web page using CSS and DIV tags.

Step 1: Create new index page for your site.

You will probably want to rename your original index.html to bio.html.

  1. Give your page a title and save it.
  2. Insert a background image and background color.

Step 2: Create an external CSS Style Sheet for this site.

  1. Show your CSS Styles Window Palette.
  2. Create a Universal Selector by selecting the new CSS Rule button.
  3. In the New CSS Rule palette, choose:

♦ Selector Type: ID

♦ Selector Name: * (The means Universal Selector – every tag that is inserted into this page will be constrained to the styles in this rule.)

♦ Rule Definition: (New Style Sheet)

♦ Select OK and save the CSS File in the CSS folder of your site.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your margins and padding to zero.

Step 3: Using the Common Tools Bar, insert the first DIV Tag, which is the “wrapper” DIV ID.

♦ Select the Insert DIV Tag from the Common Tool Bar.

♦ Insert DIV Tag palette:

      • Insert: At insertion Point
      • Class: (leave blank)
      • ID: wrapper

Step 4: Set the CSS rule on the “wrapper” DIV ID.

  1. Go to Code view and find the DIV tag with the ID of “wrapper”.  Insert the cursor between the opening and closing DIV tags.  This will identify the “wrapper” DIV as you create your next CSS rule.
  2. Select the “New CSS Rule” button at the bottom of the CSS palette.

♦ Selector Type: ID or Compound

♦ Selector Name: #wrapper (This selects the wrapper DIV- every tag that is inserted into this DIV will be constrained to the styles in this rule.)

♦ Rule Definition: (layout.css)

♦ Select OK.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your:

♦ Width: 800

♦ Margin: (to center the wrapper) Right & Left at “auto”

♦ Find/select the Background category and then set your:

♦Background color: f7f7f7

Step 5: Using the Common Tools Bar, insert the next DIV Tag, which will be the “logo” DIV ID.

♦ Select the Insert DIV Tag from the Common Tool Bar.

♦ Insert DIV Tag palette:

      • Insert: After start of tag (this will place this DIV Tag inside of another DIV Tag)
      • “At start of tag” = <div id= “wrapper”>
      • Class: (leave blank)
      • ID: logo

Step 6: Set the CSS rule on the “logo” DIV ID that is inside of the “wrapper” DIV ID.

  1. Select the “New CSS Rule” button at the bottom of the CSS palette.

♦ Selector Type: Compound

♦ Selector Name: #wrapper #logo (This selects the logo DIV inside of the wrapper DIV- every tag that is inserted into this DIV will be constrained to the styles in this rule.)

♦ Rule Definition: (layout.css)

♦ Select OK. Then select OK on the CSS Rule Definition Window

  1. Insert logo image into logo DIV and set the link as your homepage. Remove the border from the image.

Step 7: Using the Common Tools Bar, insert the next DIV Tag, which will be the “navigation” DIV ID.

♦ Select the Insert DIV Tag from the Common Tool Bar.

♦ Insert DIV Tag palette:

      • Insert: After tag (this will place this DIV Tag inside of another DIV Tag)
      • “After tag” = <div id= “logo”>
      • Class: (leave blank)
      • ID: navigation

Step 8: Set the CSS rule on the “navigation” DIV ID that is inside of the “wrapper” DIV ID.

  1. Select the “New CSS Rule” button at the bottom of the CSS palette.

♦Selector Type: Compound

♦ Selector Name: #wrapper #navigation (This selects the navigation DIV inside of the wrapper DIV- every tag that is inserted into this DIV will be constrained to the styles in this rule.)

♦ Rule Definition: (layout.css)

♦ Select OK.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your:

♦ Width: 800

♦ Height: 35 pixels

♦ Find/select the Background category and then set your:

♦ Background color: ffffff

  1. Type navigation text into navigation DIV and set the links using the “#”.

Step 9: By hand coding, insert the next DIV Tag, which will be the “bodyArea” DIV ID.

♦ After the end tag for the Navigation DIV, hit “return” and on the next line, type:

      • <div id= “bodyArea”> </div>

♦ Inside of the “bodyArea” DIV insert 2 DIVs Tag:

      • <div id= “left”></div>
      • <div id= “right”></div>

Step 10: Set the CSS rule on the “left” and “right” DIV IDs that is inside of the “bodyArea”  & “wrapper” DIV IDs.

  1. Select the “New CSS Rule” button at the bottom of the CSS palette for the “left” DIV.

♦ Selector Type: Compound

♦ Selector Name: #wrapper #bodyArea

♦ Rule Definition: (layout.css)

♦ Select OK.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your:

♦ Width: 550

♦ Height: 200 pixels

♦ Float: Left

♦ Find/select the Background category and then set your:

♦ Background color: “any color you want”

♦ Select “OK”.

  1. Select the “New CSS Rule” button at the bottom of the CSS palette for the “right” DIV.

♦ Selector Type: Compound

♦ Selector Name: #wrapper #bodyArea

♦ Rule Definition: (layout.css)

♦ Select OK.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your:

♦ Width: 250

♦ Height: 200 pixels

♦ Float: right

♦ Find/select the Background category and then set your:

♦ Background color: “any color you want but different from the “left” rule.

♦ Select “OK”.

Step 11: Using the Common Tools Bar, insert the next DIV Tag, which will be the “footer” DIV ID.

♦ Select the Insert DIV Tag from the Common Tool Bar.

♦ Insert DIV Tag palette:

      • Insert: After tag (this will place this DIV Tag inside of another DIV Tag)
      • “After tag” = <div id= “right”>
      • Class: (leave blank)
      • ID: footer

Step 12: Set the CSS rule on the “footer” DIV ID that is inside of the “bodyArea”  & “wrapper” DIV IDs.

  1. Select the “New CSS Rule” button at the bottom of the CSS palette.

♦ Selector Type: Compound

♦ Selector Name: #wrapper #bodyArea #footer (This selects the footer DIV inside of the bodyArea DIV, which is inside of the wrapper DIV.)

♦ Rule Definition: (layout.css)

♦ Select OK.

♦ In the CSS Rule Definition Window (this comes up automatically after you save the file), find/select the Box category and then set your:

♦ Height: 40 pixels

♦ Clear: both (left & right)

♦ Find/select the Background category and then set your:

♦ Background color: ffffff

  1. Type your footer information, i.e. copyright and contact info.

Step 13: Add text and photos to your left and right DIVs and make final tweaks to your heights of each (remove the height from the CSS Style). Style your text in your left and right DIVs.