Title: Exploring History: Creating a Stylish Navigation Bar Objective: The objective of this exercise is to build upon the previous HTML assignment by incorporating basic CSS to style the navigation bar header and enhance the visual appeal of the webpage while focusing on historical topics. Instructions: 1. Start with the HTML file you created for the previous assignment ("history.html"). 2. Open your HTML file and create a new section within the <head> tag to link an external CSS file. Use the <link> tag and specify the location of your CSS file (e.g., "styles.css"). 3. Create a new CSS file named "styles.css" in the same directory as your HTML file. 4. Begin styling the navigation bar header by targeting the <nav> and <ul> elements. Use CSS properties such as background-color, padding, list-style-type, display, float, and text-align to customize the appearance of the navigation bar. 5. Style the <li> elements within the navigation bar to control their appearance when hovered over or clicked. You can use properties like background-color, color, padding, border-radius, transition, etc. 6. Experiment with different font styles, sizes, and colors for the navigation items and their hover effects. 7. Ensure that the navigation bar remains responsive and adjusts its layout appropriately for different screen sizes using CSS media queries. You can change the layout, font sizes, or any other properties to make it more user-friendly on smaller screens. 8. Save your CSS file and ensure that your HTML file correctly links to it. 9. Test your webpage in a web browser to ensure that the navigation bar is styled as expected and remains functional. Evaluation Criteria: Integration of CSS styles into the HTML document (5 points) Creativity and visual appeal of the navigation bar design (10 points) Consistency in styling across different screen sizes (5 points) Proper use of CSS selectors and properties (10 points) Overall organization and clarity of the webpage (5 points) Submission: Submit your updated "history.html" file along with the newly created "styles.css" file in zip folder. Ensure all files are neatly organized in a single folder. Note: While styling the navigation bar, consider using historical themes or imagery to complement the topic of history. Experiment with different color schemes and layout designs to create an engaging and visually appealing webpage.
