Imagine that you have to change the font size for a headline in your Web site. No problem, right? Just go in and change the font size property on that page. But, what if you had a site with a hundred such titles that you had to change one by one? It would be both time consuming and inefficient. That is where CSS come in. They allow developers and designers to make wholesale changes to a Web site by changing code in only one file. In fact, with HTML5, formatting must all be done using CSS.
In this assessment, you will create your site navigation and a single external CSS file that controls text elements on each of your Web pages.
Directions
Complete the following:
Create and save an externally linked, CSS3-compliant style sheet to control all your Web pages (see page list below). It should define properties (such as position, margin, padding, font-family, color, size, et cetera) for each of the following:
Headlines.
Header.
Body text.
Background (image or color)
Navigation (use an unordered list to format the list items for navigation).
Footer (location/font size and color).
Anchor links (current, hover, visited).
Update the code in your homepage and template to link to the new style sheet.
Use your page template to create the other four pages for the site and title each appropriately.
About Us.
Services.
Gallery.
Contact Us.
Create functional page navigation using CSS. Use textual links using either a horizontal navigation across the top or vertical navigation down the left side.
Define text and background properties for all page elements using CSS.
Make sure to enter context-appropriate text in the content sections for each of the pages to demonstrate that the formatting and design are consistent across the site.
Make sure you do the following:
Submit error-free HTML5 and CSS code.
Create functioning site navigation using CSS.
Create a functioning external CSS file linked to a Web site.
Use CSS to effectively manipulate properties of Web page elements.
Write developer comments to describe and explain code.
Notes
Make a note of the following as you complete this assessment:
Use the same CSS formatting that references a single external style sheet for all pages.
Use Web fonts such as those available on Google Fonts Web site, linked in the Resources under the Suggested Resources heading.
Use
tags only when there is no better element for the job to describe the content that it is containing. Use the semantic layout elements such as header, article, section, nav, and footer instead.
Hint: Consider building your entire layout interface first. It can help you plan your development of your pages to figure out where you want your content to go.
Additional Requirements
Submit your work in the courseroom as index.html.
Last Completed Projects
| topic title | academic level | Writer | delivered |
|---|