Site content in content.txt
You will need to add the following code to the top of your HTML page before the <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Replace your <html> tage with:
<html xmlns="http://www.w3.org/1999/xhtml">Having formed the basic framework for the page design and having created the four content areas, you can start adding the actual content to the page. Initially you will add just a few headings to the content areas.
Now that you have the basic framework and see that content fits in the correct areas, you need to have an idea of what the page will look like so you can develop the style. Remember you already have the content for this site, so you are developing and deploying the stylesheet.
The following is the end goal for the page look-and-feel:
The stylesheet you are developing will continue to grow with specific class elements in each of the four major division (masthead, content, sidebar and footer). To help with maintenance, it is best that you group the elements you add in the appropriate segment of your stylesheet. It will also help that you put comments in the sheet at least demarcating these segments. Look over the example basic stylesheet for this project for ideas that will help you create better stylesheets (ex0001.css).
You will need to style the two (2) headings you added to the content area.
From the final example, you can see that the heading 1 for the content area needs to have background of white and text color of #DDAA66. The font size is 1.5 em with padding of 0.5 em top and bottom and 2em left and right. The margin is a bit more complex having no top margin and 1.25 em bottom margin; the left margin is -2em and the right is 33%. The left margin setting make the white area of the heading start at the edge of the page, whereas the content area is indented. The right margin is set to a percentage thus the amount of space between the heading and the sidebar that is not covered by the white background is dependent upon the size of the browser window. Try it out.
A few other elements need be set for the headings in the content area. The style for boldface in the h1 heading needs have the text color set to black.
The second heading in the content area needs to be styled as well. To create the style of the final example, you need to set the top and bottom margin to 0.5 em and the left and right need be at zero. Add padding of 0.25 em all around the heading. The font size is set to 1.5 em and there is a solid bottom border of color 996633 one (1) pixel thick. The border creates the line between the actual content and the heading.
Insert the correct elements in you stylesheet and view the page.
For the sidebar, you will need to setup a few style elements to format the area. Div tags in the sidebar need to have a background of 996633 and text color of white with 0.75 em top margin and padding of 1 em except the top needs be zero.
Heading 3 (h3) within the sidebar div tags need to have background of 446699 with the font size set to 1.25 em and the text set to lowercase. The margin for the top and bottom are set to zero and the left and right are set to -0.8 em with padding of 0.4 em top and bottom, and 0.8em left and right.
Paragraph tags within the footer should have margins of zero. Anchor tags within the footer should have the underline removed and have a text color of DDAA66.
Remove the placeholder image from the sidebar, then save your CSS and your HTML and have a look at your results. The result should look like the following image. After you achieve these settings, try changing a few settings such as the H3 margin in the sidebar div and see what the settings do.
The next step: add more content (CSS_Exercise_3.html)