For this week’s assignment we will go back to our assignment from Weeks 3 and 4 and add CSS to style the pages of our children’s books. Please be sure to read the requirements below carefully as there are a number of required items.Create a single style sheet for your children’s book web site and call it week6styles.css. You must put all of your styles in this document for this assignment. This will be your external CSS file. All of your pages must link to this file. This is a necessary step to help me when grading this project. You are not allowed to have any embedded or inline CSS in your site.Project Style RequirementsYou are welcome to expand or interpret these items as you see fit as long as the basics are met. For example, you are welcome to change text color or add additional formatting even if it isn’t specifically stated. The following are minimum requirements. Please have fun with this assignment. I really enjoyed reading your stories and I hope to be delighted by your book designs as well!For each style you implement from the requirements below please include a comment in your CSS file telling me which styles meet which requirements. Please help me with grading this assignment so I don’t miss anything! If I cannot easily determine how a style meets one of the following requirements you may lose points and not have the ability to make a revision.[10 points] Page 1 (Book Cover)Use a large, stylized, font for the title of your book. You must change the font to something other than the default is used by your browser.Change the background color of the page.Add a border to your book’s cover image.Align and/or appropriately size the cover image using only CSS. If you previously used a deprecated tag like “center” in your book you must remove all instances of it.Change the border color of the image when the user mouses (hovers) over the image so they know they click on it to advance to the next page.[15 points] Page 2 (Author Page)Add a border to your author image.Align and/or appropriately size the author image using only CSS. If you previously used a deprecated tag like “center” in your book you must remove all instances of it.Style the fonts on this page so that the author’s name is more prevalent in some way.Make the copyright text smaller and less prevalent.Move the navigation links that advance forward and backwards through the book to a footer on the page. Do your best to style these items so they look like buttons (no underline and a border or filled background). We will cover some of the required styles in a future week but this will be a good challenge! Do not use the html button element here. I want you to add a background color and to style the “a” element so that it resembles a button. These buttons should change color when hovered and clicked. Visited links should have the same color as unvisited links (this is a book, we don’t need to know which pages we have or have not visited). All page forward and backward links on all other pages should look identical to these items. Note that these items are navigation and should be marked up as such. Wrap them in a nav element. [20 points] Pages 3 through 7 (Story Pages)Add a recurring header to the top of every page that includes the name of the book and the author. This text should be small and should be distinct from the remainder of the text on the page. There should be a visual line of some type under the entire length of the header to separate it from the rest of the page.Align and/or appropriately size the story images using only CSS. If you previously used a deprecated tag like “center” in your book you must remove all instances of it.Style the text on these pages so it is readable. What this means is up to you but please do not use the default browser text settings. Pay attention to fonts, text size, word and line spacing, and other aspects of good typography here.[5 points] Page 8 (The End)Make the background color of this page a gradient.Make the “The End” text so it is visible displayed against the gradient. This may involve making it bigger or adjusting the text size and/or color. You may need or want to add a shadow.[15 points] Definition Links (New Feature)This is a children’s book so pick 3 words in your story that might be a challenge for a young reader.Style these words in a unique fashion so they are easily identified.Make these words links that link to their definition at https://www.merriam-webster.com/ These links cannot be the default styles. You must stylize these so a child would know these are items of interest and be engaging for them to click on. How you do this is up to you but have fun here as well!Make sure these links open into a new browser window or tab.[10 points] You must use a variety of selectors. Think about how you can use style inheritance and the cascade to optimize your CSS file.You must use at least one element selectorYou must use at least one class selectorYou must use at least one id selectorAt least one style rule should be applied to more than a single item (multiple elements or class selector).At least one style should be applied using a descendent selector.Extra Credit (4 points): Try to use at least one other contextual selector found on page 283 of the textbook (child, next-sibling, or subsequent-sibling).[10 points] Size requirementsAll sized items should uses relative sizes such as em, rem, vh, vw, or percentages. There should be no absolutely sized items in the document.Images and text should be appropriately sized for the page layout. I will be grading these items on a desktop browser using a large monitor so we don’t need to concern ourselves with mobile layouts, yet![10 points] Inheritance & Style OptimizationHow well do your styles leverage style inheritance?Do your styles contain unresolved or unexpected conflicts?Do you have styles in your CSS file that are not used in your document? If so, delete them.Are all of your style attributes spelled correctly?Do not use !important in your document! Resolve any conflicts by adjusting the specificity/weight/order of your selector.Children’s Story: Zip the directory that contains your entire site (images, css, and html pages) and submit that zip file.
