bbb Home |
Style - Internal, External, Classes, and ID's | Contents |
<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>
<head><link rel="stylesheet" type="text/css" href="mystyle.css"/></head>
Font: 8pt 12pt 20pt 24pt Width: Min. 50% 75% 100% |
1. Experiment with the example above:
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.