Fundamentals of Internet Applications: July 2010

Hi everyone,

Again, a bit late in posting, but I know you all know what you have to do at this point. We worked hard on Wednesday's class, so I hope you can keep it up for the next couple of classes and during the week so that we can churn this out.

Please bring the homework from this week to next week's class. Your first page should be nearly finished. As mentioned below, once it is, even if it isn't perfect or even if it isn't close to perfect, go ahead and make copies of this page and rename them to the names mentioned below.

Also, don't forget that the questions down below are also due this week. Put the questions and answers into an .html list and turn them into me at the beginning of class.

TOPICS:

LINK Homework
LINK Questions
LINK Final Project;

LINK Content Requirements;
LINK Technical Requirements;
LINK Design Requirements;

HOMEWORK I—Final Project, Part I (continued): Since you didn't finish last week's homework, please work on it this week again and bring it to class this week. Remember, as I mentioned in the last blog, starting last week, the homework for each class is part of the final project. Each part will be do one week from the time that it was assigned. This means that the assignment for this week will be due in the next class. Each week I will assign a new part to the website. If you produce these assignments on time each week, you will have accumulated a small website and you will receive a decent homework grade.

The site that we are going to produce is for an ART GALLERY named Alpha Gallery. This week (as mentioned in class), you should design the title and the navigation for the site and keep in mind the comments that I made during class this week.

Due in class THIS week — You must try to produce the first page (the home page) of the design in XHTML and CSS and name it index.html. You must attempt to design this page, otherwise known as the home page, using the 2D designs and mockups you have created over the past few weeks as a guide. You should deviate from this design as little as possible, and only make changes for which you can make a convincing case to me.
Due in class THIS week — when complete, you must make four (4) ADDITIONAL copies of this file (copy & paste them) and give them the following names: gal_01.html, gal_02.html, artists_01.html, artists_02.html. As a result, all the pages will be exactly alike for the time being.
SEE BELOW FOR FURTHER INFORMATION ABOUT THE INDEX/HOME PAGE as well as all of the other pages.
Due in class THIS week —Questions: Answer the questions below for class next week (week 12)

FINAL PROJECT: Information
- The site that you are going to produce is for an art gallery and it will have six main parts: the home/index page, two gallery pages, two artist pages, an about page, a visit page, and an exhibit page. Please read the information provided.
  1. CONTENT REQUIREMENTS:
    1. Part 1: HOME PAGE—due THIS week.
      —this page includes the following:
      1. In this page, you have already established the color scheme that you will use throughout your design for this site, as given to you through your 2D design.
      2. The name of the gallery: Alpha Gallery
      3. The name of the current exhibit: "ART:21;" (Art in the 21st Century)—should appear somewhere on the 1st page (index);
      4. A logo of your own design for the gallery (Alpha Gallery)
      5. The following text for the current exhibit—should also appear somewhere on the 1st page (index):
        Contemporary art speaks directly to the important questions of our time, as well as to the changing landscape of American identity. It is both a mirror of contemporary society and a window through with we view and deepen our understanding of life as it exists today. Who are today's artists? What are they thinking about? How do they describe their work? Why do they do what they do?
        
        These are some of the questions addressed in the exhibition: ART:21 Art in the Twenty-First Century. This show presents the artists without interpretive mediation through large presentations of their work. If the unknown is the space in which creativity flourishes, This exhibit desires to bring it forward, illuminate it for others, and revel in it. This is ART:21's work—to reveal the existence of those regions which all the artists traverse, forging paths of exploration and study that take them into uncharted realms of creativity. By revealing the existence of those unknown territories, inhabited by all creative thinkers, I hope to educate, delight, and to provoke the viewers.
        
        It is difficult to imagine that anyone works harder than an artist. This—the non-stop work, accumulation of information, concentration, the need to be in the studio—is a continuing mini-theme for ART:21. Most artists experience intuitive leaps of recognition and connection, and find new ideas through introspection and research in many fields beyond art, although the art of the past remains a profound resource.
        
        One might say that in order to draw, you have to learn how to see first. Well, what about making drawings and other works of art about areas, about zones and realms that you CANNOT see, about areas hidden from view, about secret realms and invisible places? This is what many of these artists have in common: they are attempting to bring to light and view things that were previously unseen.
      6. Some kind of imagery or design to go with the name of the current exhibit, "Art 21:"
    2. Part 2: ARTIST PAGES—due in 2 weeks.
      —We will begin these pages in class next week and you will complete them for the following. These TWO pages will look identical. Essentially, what you will do for each artist is the following:
      1. a small picture of one of the works by the artist;
      2. his/her name; and
      3. a blurb of text about the artist—I have provided you with the text for these two pages below. Each page will contain 10 artists.
      LINK CLICK HERE for the text for the ARTISTS PAGES;
    3. Part 3: GALLERY PAGES—due in 3 weeks.
      —We will begin these pages in 2 weeks and you will completely them for the following week. These TWO pages will also look identical. They will have thumbnail images of the pictures that I have given you of the artwork. I gave you half of the images in our last class and will give you the remaining images in our next class. Each image should be clickable. When you click on the small thumbnail images, you are linked to a page with a much larger version of the image. Accompanying each large image should be the name of the artist and the title of the work as a caption. Also, when you click on the thumbnail images in the gallery, the pages with the larger image should open up in a separate browser window or tab.
      1. LINK image 1;
      2. LINK image 2;
      3. LINK image 3;
      4. LINK image 4;
      5. LINK image 5;
      6. LINK image 6;
      7. LINK image 7;
      8. LINK image 8;
      9. LINK image 9;
      10. LINK image 10;
      11. LINK image 11;
      12. LINK image 12;
      13. LINK image 13;
      14. LINK image 14;
      15. LINK image 15;
      16. LINK image 16;
      17. LINK image 17;
      18. LINK image 18;
      19. LINK image 19;
      20. LINK image 20;
  2. DESIGN REQUIREMENTS:
    1. Color Scheme—your color scheme for your web-site comes from or is inspired by the 2D design that you created in class.
    2. Page Layout—you must use CSS to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance. The layout itself should be inspired by the layout that is demonstrated design that you created in class.
  3. TECHNICAL REQUIREMENTS:
    1. XHTML
      —ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
      - that all tags and their attributes must be typed in lower case;
      - that all attribute values must be typed in quotes and with units;
      - that the DTD for strict XHTML must be typed at the top of the document;
      - that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
      - that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
      - and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are NOT permitted.
      If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
    2. CSS
      —ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
QUESTIONS: Answer these questions for next week's class as homework and to help guide you through this weeks' material—chapters 3, 5, and 7 on CSS:
1. How many fonts can you specify for the font-family CSS property?
2. According to the book (chapter 5), what are the four most widely supported fonts on computers?
3. Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
4. What would the purpose be of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
5. What is the difference between an internal and an external style sheet in where they are typed?
6. What are two ways to link style sheets to a web page?
7. What is a CSS rule?
8. What are the two main parts of any CSS rule?
9. What is a selector in CSS?
10. Other than tag names, what are two other types of CSS selectors?
11. What are two differences between IDs and Classes?
12. What character must be typed before the name of an ID? Before the name of a class?
13. How do you apply a class or an id so that the styles show up in a page?
14. Name five (5) examples of CSS properties that we have used in class.
15. Name three (3) examples of CSS selectors that we have used in class.
16. What does the <div></div> tag pair do?
17. How many different types of borders can you create with CSS? What are they?
18. What is padding?
19. Name three (3) places in a web page that you can set the background color.
20. Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.

First, type the basic structure of all web pages and save into your primary folder. Since this is the 9th week fo class, I'd suggest naming your folder wk9 and your file, as always, index.html:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>... </title>
5. </head>
6. <body> ... </body>
7. </html>

Let's begin with the section of the document that is going to contain the main heading and the menu navigation:
1. <body>
2. 
3. <div id="wrapper">
4. 
5. <div id="header">
6. 
7. <div id="title">
8. <h1>Carter Johnson</h1>
9. </div>
10. 
11. <div id="menu">
12. <ol>
13. <li>
14. <a href="#">one</a>
15. </li>
16. <li>
17. <a href="#">two</a>
18. </li>
19. <li>
20. <a href="#">three</a>
21. </li>
22. <li>
23. <a href="#">four</a>
24. </li>
25. <li>
26. <a href="#">five</a>
27. </li>
28. </ol>
29. </div>
30. </div>
31. </div>
32. </body>

The structure that this sort of nested arrangement of <div> tags will provide us with three main sections: the header, the content, and the footer. These three sections may be structured as columns (vertically) or, more commonly, as rows (horizontally).

Inside the header section are two further divisions: the title and the menu. These two IDs are probably self-explanatory, but the title section will contain the main heading of the page, and the menu will contain the primary menu navigation of the page.

Within the content section are also two further divisions: the primary content section, and the secondary content section. They are normally arranged as columns which will be the way this design will approach the structure. Therefore, there will be two columns; exactly the way we've created our designs in class in which the primary column contains the primary content of the page, and the secondary, narrower column acts as a sidebar.

The last main section is the footer and it will be the smallest section of the design at the very bottom of the page. Graphically, the structure will take up space on the page as follows:

header

title

menu

content

primary

secondary

footer

Now, we can add our first CSS. What we have typed so far is just the header section with its two sub-sections, the title and the menu. Later on, the CSS code should be typed in a separate .css document; however, for now you can type it in the head section as you will see below. We will begin by setting the main styles for the document and the IDs that we have created so far. Below you will see an image of what your HTML and the first CSS will produce in the browser, and below that the CSS that will help produce that:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>. . . </title>
5. <style type="text/css">
6. body {background-color:#ffffff;
7. margin:0px 0px 0px 0px;}
8. #wrapper {background-color:#ffffff;
9. width:950px;
10. padding:0px 0px 0px 0px};
11. &header {border-style:solid;
12. border-width:1px;
13. color:#aa6633;
14. border-color:#000000;
15. background-color:#ffffff;
16. title {border-style:solid;
17. border-width:1px;
18. color:#aa6633;
19. border-color:#000000;
20. background-color:#ffffff;
21. </style>
22. </head>

Next, we will make a couple of small changes to the CSS that we have, adding a bit of a margin on the left, and then eliminating the border. We can always turn the border back on if we need to be able to see the boundaries of the division.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>. . . </title>
5. <style type="text/css">
6. body {background-color:#ffffff;
7. margin:0px 0px 0px 50px;}
8. #wrapper {background-color:#ffffff;
9. width:950px;
10. padding:0px 0px 0px 0px};
11. #header {border-style:solid;
12. border-width:0px;
13. color:#aa6633;
14. border-color:#000000;
15. background-color:#ffffff;
16. title {border-style:solid;
17. border-width:0px;
18. color:#aa6633;
19. border-color:#000000;
20. background-color:#ffffff;
21. </style>
22. </head>

After this, we can simply style the main heading of the page, the <h1> tag within the header section.
1. #title h1 {font-family:Impact;
2. font-size:36pt;
3. color:#000000;
4. letter-spacing:-1;}

Immediately below, you will see the styles for the menu ID that you should add to the bottom of the CSS, and then an image showing how these styles affect the page. Pay particular attention to the margins attributed.
1. #menu h1 {border-style:solid;
2. border-width:1px;
3. border-color:#000000;
4. background-color:#ffffff;
5. margin-top:-80px;
6. margin-left:32px;}

After the main heading, we need to add styles to the list as a whole (the <ol> tag), and to each list item (the <li> tags).
1. #menu ol {list-style:none;
2. display:inline;}

1. #menu ol {list-style:none;
2. display:inline;}
3. #menu li {float:right;}

1. #menu ol {list-style:none;
2. display:inline;}
3. #menu li {float:right;
4. margin-left:5px;
5. width:120px;}

Next, we remove the styles for the border for the header, the title , and the menu; and then we add the styles for the links within the list.
1. body {background-color:#ffffff;
2. margin:0px 0px 0px 50px;}
3. #wrapper {background-color:#ffffff;
4. width:950px;
5. padding:0px 0px 0px 0px};
6. #header {border-style:solid;
7. border-width:0px;
8. border-color:#000000;
9. color:#aa6633;
10. background-color:#ffffff;
11. title {border-style:solid;
12. border-width:0px;
13. border-color:#000000;
14. color:#aa6633;
15. border-color:#000000;
16. background-color:#ffffff;
17. #title h1 {font-family:Impact;
18. font-size:36pt;
19. color:#000000;
20. letter-spacing:-1;}
21. #menu h1 {border-style:solid;
22. border-width:1px;
23. border-color:#000000;
24. background-color:#ffffff;
25. margin-top:-80px;
26. margin-left:32px;}
27. #menu ol {list-style:none;
28. display:inline;}
29. #menu li {float:right;
30. margin-left:5px;
31. width:120px;}
32. #menu a {border-style:solid;
33. border-width:1px;
34. border-color:#000000;
35. display:block;}
36. </style>
37. </head>

Nearly finishing up, we need to add a few more styles to the horizontal list at this point to make the items look more like blocks that the user can click on.
1. #menu a {border-style:solid;
2. border-width:1px;
3. border-color:#000000;
4. display:block;
5. padding:5px;
6. font-family:Arial, Helvetica, sans-serif;
7. font-weight:bold
8. font-size:14pt;
9. text-decoration:none;
10. align-center}

And finally, to finish up the first part of this exercise, creating the header section, including a navigation menu, we'll add some styling to a couple of the link states:
1. a:link a {color:#ffffff
2. background-color:#333333;}
3. a:hover a {color:#000000;
4. background-color:#cc0000;}

Now that we have completed the top section, the header, we can move on to the other parts of the page. We'll proceed to the content ID, the section that is going to contain all the content, primary and secondary, of the page.
1. #content {border-top-style:solid;
2. border-top:width:5px;
3. border-top-color:#000000;
4. margin-top:0px;
5. background-color:#ffffff;}

In order to see the effects of these styles, we have to add some content I am just going to use the content from last week's lesson, but with some minor changes
1. <body>
2. 
3. <div id="wrapper">
4. 
5. <div id="header">
6. 
7. <div id="title">
8. <h1>Carter Johnson</h1>
9. </div>
10. 
11. <div id="menu">
12. <ol>
13. <li>
14. <a href="#">one</a>
15. </li>
16. <li>
17. <a href="#">two</a>
18. </li>
19. <li>
20. <a href="#">three</a>
21. </li>
22. <li>
23. <a href="#">four</a>
24. </li>
25. <li>
26. <a href="#">five</a>
27. </li>
28. </ol>
29. </div>
30. </div>
31. 
32. <div id="content">
33. <div id="primary">
34. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus velit a justo blandit vehicula. Nullam fermentum risus non libero euismod condimentum. Suspendisse dui tellus, tincidunt non pellentesque at, porttitor sed felis. Duis dui enim, molestie non fringilla non, viverra vitae urna. Morbi imperdiet volutpat euismod. Sed sem lorem, suscipit non pellentesque in, sagittis at felis. Aenean erat turpis, porta eu ullamcorper eget, consectetur ut urna. Nunc hendrerit, ante a gravida vestibulum, dui mauris volutpat arcu, et dictum nulla orci non mauris. Sed a est mi, at feugiat tortor. Proin aliquam nibh at odio vestibulum commodo. Nulla adipiscing fermentum vestibulum. Suspendisse potenti. Aenean suscipit erat dapibus eros tempor eget tincidunt tortor aliquam. </p>
35. <p>Nulla facilisi. Donec bibendum, neque sit amet gravida pharetra, nunc arcu euismod nisl, id porttitor nulla tellus ac arcu. Phasellus sapien odio, eleifend non hendrerit non, consequat sit amet risus. Phasellus aliquam laoreet mauris, eget accumsan turpis commodo et. Donec mattis tortor lacus. Etiam aliquet ullamcorper mauris, sit amet viverra sem semper nec. Nullam arcu nunc, dictum sit amet sollicitudin id, fermentum quis nisl. Vivamus elementum ornare dolor eu rutrum. Vestibulum non venenatis odio. Ut tellus risus, pretium ut porta a, pharetra tempus velit. Aenean nec adipiscing arcu. Integer mi nunc, gravida eu porta quis, accumsan ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dictum lacus quis magna dignissim vehicula. Maecenas elementum luctus suscipit. Aliquam facilisis lobortis odio, eget tempus nulla rhoncus eu. Morbi tellus nulla, cursus nec viverra id, venenatis sit amet ipsum. Phasellus mattis aliquet tincidunt. </p>
36. <p>Vestibulum et neque et elit rhoncus lobortis. Fusce auctor neque a purus imperdiet mattis. Donec ac felis a arcu tempus malesuada. Integer ultrices congue nisl, eget rhoncus dui accumsan eget. Aliquam quis ligula sit amet eros malesuada facilisis. Praesent at auctor sapien. Sed fermentum dolor quis nibh mattis tincidunt. Curabitur eu urna vel turpis pulvinar molestie. Etiam egestas, lacus non tincidunt egestas, odio mauris suscipit libero, vitae pharetra lectus nisl eu lorem. Suspendisse potenti. Vivamus consequat, arcu nec elementum condimentum, dui diam ornare orci, sit amet bibendum sapien mi quis leo. Integer id gravida massa. Aliquam non urna ut orci viverra imperdiet quis vel arcu. Donec sagittis molestie neque. Sed fringilla felis sed lorem laoreet ultricies condimentum mauris consequat. Sed fermentum fringilla enim ut blandit. Aenean quam dui, consectetur et adipiscing ut, congue et dui. Etiam porta tempus tellus, nec consequat libero pretium a. Vivamus condimentum magna ut tellus porttitor feugiat. Aliquam sed purus massa. </p>
37. <p>Proin commodo mollis viverra. Pellentesque aliquet lorem egestas justo scelerisque sit amet auctor quam aliquam. Donec interdum ligula a mauris sagittis lacinia. Sed bibendum tempus faucibus. Curabitur eu lectus sed mauris cursus dapibus vitae sit amet est. Morbi massa eros, accumsan a gravida in, feugiat sit amet libero. Integer rhoncus, tortor eget vestibulum vestibulum, diam nisl auctor augue, a dignissim velit turpis sed sapien. Vivamus rhoncus massa suscipit tellus consectetur consectetur. Donec id augue ac nisl pretium pretium non et ligula. Donec sed odio aliquet libero vehicula sollicitudin quis eget mauris. Nullam nec tortor vestibulum enim condimentum scelerisque. Aliquam in aliquet risus. Nulla ornare tempor dapibus. </p>
38. </div>
39. <div id="secondary">
40. <h2>Sidebar</h2>
41. h3>section 1</h3>
42. <p>Nullam nec mauris nec mi vulputate rhoncus id sed nulla. Donec tempus imperdiet dui in gravida. Nulla vulputate gravida sem at condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id massa erat, quis interdum elit. Donec fermentum sollicitudin dui id condimentum. Vestibulum consequat ullamcorper ornare. Suspendisse potenti. Phasellus egestas leo vel justo aliquam eu eleifend neque egestas. Nam ut tellus at risus interdum fringilla mollis eget justo. Vivamus egestas interdum ipsum sit amet blandit. Nunc viverra turpis ut turpis cursus congue rutrum dui fringilla. Phasellus venenatis rhoncus purus vitae interdum. Pellentesque et ultrices orci. Morbi placerat, felis porta sollicitudin rhoncus, urna massa hendrerit nulla, a imperdiet sem lectus id tellus. Quisque accumsan neque id felis mollis nec viverra urna faucibus. Cras sit amet ante massa, et viverra lectus. Aenean neque arcu, tempor in eleifend ut, luctus sed nibh. Maecenas felis risus, molestie quis tempor ut, ornare eu urna.</p>
43. <h3>section two</h3>
44. <p>Proin commodo mollis viverra. Pellentesque aliquet lorem egestas justo scelerisque sit amet auctor quam aliquam. Donec interdum ligula a mauris sagittis lacinia. Sed bibendum tempus faucibus. Curabitur eu lectus sed mauris cursus dapibus vitae sit amet est. Morbi massa eros, accumsan a gravida in, feugiat sit amet libero. Integer rhoncus, tortor eget vestibulum vestibulum, diam nisl auctor augue, a dignissim velit turpis sed sapien. Vivamus rhoncus massa suscipit tellus consectetur consectetur. Donec id augue ac nisl pretium pretium non et ligula. Donec sed odio aliquet libero vehicula sollicitudin quis eget mauris. Nullam nec tortor vestibulum enim condimentum scelerisque. Aliquam in aliquet risus. Nulla ornare tempor dapibus. </p>
45. <;/div>
46. </div>
47. <div id="footer">
48. <h4>This is the footer: Designed by Carter Johnson, Fall 2009</h4>
49. </div>
50. </div>
51. </body>

To improve things, we'll add a bit of a margin at the top to push things down.
1. #content {border-top-style:solid;
2. border-top:width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}

Now, we'll add the styles for the footer to the bottom of the growing list of CSS rules:
1. #footer {border-top-color:#000000;
2. border-top-width:10px;
3. border-top-style:solid;
4. background-color:#aa0000;
5. padding:10px;
6. font-family:Arial, Helvetica, sans-serif;
7. font-size:9pt;
8. line-height:8pt;
9. color:#000000;}

In the next series of additions to the CSS, we are going to start working on the text in the content section. Recall, this section will contain two sub-sections itself: the primary division and the secondary (sidebar) division. We start by adding the basic styles to the primary ID. I'll place this rule just below the content and just above the footer
1. #content {border-top-style:solid;
2. border-top-width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}
6. #primary {margin-top:10px;
7. width:600px;
8. background-color:none;}
9. #footer {border-top-color:#000000;
10. border-top-width:10px;
11. border-top-style:solid;
12. background-color:#aa0000;
13. padding:10px;
14. font-family:Arial, Helvetica, sans-serif;
15. font-size:9pt;
16. line-height:8pt;
17. color:#000000;}

1. #primary {margin-top:10px;
2. width:600px;
3. background-color:none;
4. float:left;
5. padding:0px 5px 10px 10px}

1. #primary h2 {font-family:Arial, Helvetica, sans-serif;
2. font-size:24pt;
3. line-height:18pt;
4. color:#aa0000;}
5. #primary p {font-family:Arial, Helvetica, sans-serif;
6. font-size:10pt;
7. line-height:10pt;
8. text-align:justify;
9. color:#aa0000;}

1. #primary h2 {font-family:Arial, Helvetica, sans-serif;
2. font-size:24pt;
3. line-height:18pt;
4. color:#aa0000;}
5. #primary p {font-family:Arial, Helvetica, sans-serif;
6. font-size:10pt;
7. line-height:10pt;
8. text-align:justify;
9. color:#aa0000;
10. padding:0px 10px 5px 10px;}

1. #secondary p {float:left;
2. width:300px;
3. background-color:#000000;}

In the next series of additions to the CSS, we are going to start working on the text in the content section. Recall, this section will contain two sub-sections itself: the primary division and the secondary (sidebar) division. We start by adding the basic styles to the primary ID. I'll place this rule just below the content and just above the footer
1. #content {border-top-style:solid;
2. border-top-width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}
6. #primary {margin-top:10px;
7. width:600px;
8. background-color:none;}
9. #primary {margin-top:10px;
10. width:600px;
11. background-color:none;
12. float:left;
13. padding:0px 5px 10px 10px}
14. #primary h2 {font-family:Arial, Helvetica, sans-serif;
15. font-size:24pt;
16. line-height:18pt;
17. color:#aa0000;}
18. #primary p {font-family:Arial, Helvetica, sans-serif;
19. font-size:10pt;
20. line-height:10pt;
21. text-align:justify;
22. color:#aa0000;
23. padding:0px 10px 5px 10px;}
24. #secondary {float:left;
25. width:300px;
26. background-color:#000000;}
27. #footer {clear:both;
28. border-top-color:#000000;
29. border-top-width:10px;
30. border-top-style:solid;
31. background-color:#aa0000;
32. padding:10px;
33. font-family:Arial, Helvetica, sans-serif;
34. font-size:9pt;
35. line-height:8pt;
36. color:#000000;}

1. #secondary {float:left;
2. width:300px;
3. background-color:#000000;
4. margin:0px 0px 0px 15px;}
5. #secondary h2 {font-family:Arial, Helvetica, sans-serif;
6. font-size:16pt;
7. line-height:12pt;
8. color:#aa0000;}
9. #secondary h3 {font-family:Arial, Helvetica, sans-serif;
10. font-size:12pt;
11. line-height:10pt;
12. color:#999999;}
13. #secondary p {font-family:Arial, Helvetica, sans-serif;
14. font-size:9pt;
15. font-style:italic;
16. line-height:9pt;
17. color:#cccccc;}

1. #secondary p {font-family:Arial, Helvetica, sans-serif;
2. font-size:9pt;
3. font-style:italic;
4. line-height:9pt;
5. color:#cccccc;
6. padding-left:10px;}