Project 1 — Format Webpages with CSS
You are given a website template and three webpages for the Forward Fitness Club website – The Home page, the About Us page, and the Contact Us page. However, these pages lack formatting to enhance their appearance.
A plan was created for Forward Fitness Club that provides information about the desired typography and colors to enhance the business brand and logo. The plan includes a wireframe, which specifies passive white space between HTML elements. To add these design elements according to the plan, you will need to create and apply CSS styles in an external style sheet, a separate file that contains the styles for the website.
The project that you will complete enhances the website for Forward Fitness Club through the use of CSS. You are to apply styles to the HTML5 elements on each page to give the site a certain look and feel.
You will link the external style sheet to all of the pages in the website, including the template. As you add styles to the style sheet, they immediately format the attached webpages when you open or refresh the pages in a browser.
þ Figure 4–1 shows the Home page after it has been enhanced by CSS.
þ Figure 4-35 shows the About Us page after it has been enhanced by CSS
þ Figure 4-36 shows the Contact Us page after it has been enhanced by CSS
Follow the steps in the chapter (pages 154- 172) to create the required external style sheet and save as styles.css in the css folder. The css file must be added to each of the pages to apply the effect.
Note:
- Add the external style sheet to the head section of the web pages:<link rel=”stylesheet” href=”css/styles.css”>
- Add Your name to the comment block at the top of the web pages
