bbb Home
Style - Internal, External, Classes, and ID's Contents        

DEFINING STYLE INTERNALLY

<head>

<style>

H1 {

font-style: italic;
font-weight: bold;

}

.myClass {   /* comment ... defines a class */

font-weight: 200;
font-size: 36pt;

}

#myID {    /*defines format for an id */

color: red;
font-size: 50px;

}

</style>

</head>

<body>

<div class = "myclass">abc</div>

<div id = "myID">def</div>

DEFINING STYLE EXTERNALLY IN A .css FILE

    
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

NOTES ON STYLE


EXAMPLE

Font: 8pt   12pt   20pt   24pt   Width: Min. 50%   75%   100%   

PRACTICE

1. Experiment with the example above:

  1. Create a new class called yellowClass and define a property so that the text color is yellow. Then create a div and set its class to yellowClass.
  2. Use the internal approach to define the font-family for the <body> to be arial.
  3. Set the background color of the <h1> tag to be red using the inline approach.

2. Create a page that looks like the attached image.  You must use style to define all properties except cellspacing.  Define the style properties in the head section for the tags, ID's, and classes that are listed in the table below.    Set the position of the periodic table so that it is 100px from the left and 100px from the top of the screen.

Tag, ID or Class Style Properties Applies to...
body font-size, font-family -
td width, height, text-align, border -
#periodicTable position, top, left, border The table
.metal background-color, color The metals in the table (Al, Ga) 
.metalloid background-color, color The metalloids in the table (B, Si, Ge, As) 
.nonmetal background-color, color The nonmetals in the table (C, N, P)

3. Using only style and <div>'s create a page that looks like the attached image.  You should use three <div>'s to create the page.  One of the <div>'s is the "container" used to hold the other two <div>'s.  This "container" <div> has the border.  The second <div> is nested within the "container" <div>  and has the name of the chemical element (Carbon).  The third <div> is also nested within the "container" <div> and holds the information about the element. You should define three classes and apply one to each <div>.  You may also need to define font-size.

4. Modify the periodic table page in #2 so that the element page in #3 opens in a new window when the user clicks on the element.

5. Modify #2 and #3 by creating an external style sheet, moving all style properties to the style sheet, and linking the two pages to the style sheet.

6. Create individual pages for two other elements (AL, Ga, B, Si, Ge, As, N, or P) and then add links to your periodic table to these two elements as you did for Carbon in #4.

7. Experiment with Dreamweaver or Frontpage.

  1. Create a page and a style sheet
  2. Link the style sheet to the page.
  3. Set some style properties for the body tag in the style sheet. View your page.
  4. Create a class in the style sheet and add at least one style property.
  5. Create a tag in your page and set its class to the class that you defined in the style sheet.
  6. Right click on the page in Dreamweaver and select CSS Styles...Manage Styles. Experiment with the Edit Style Sheet window.
  7. Check out the Properties window at the bottom of the page. Notice how you can select the style from the drop-down box.
  8. Check out Text...CSS Styles in the menu. Notice that the styles are listed.

SELF-QUIZ