This exercise will demonstrate ways to utilize advanced CSS selectors in order to reduce dependence on classes for styling.
In this exercise, you may NOT add anything to the HTML.
Instead, you must make all of your styling via pure CSS. This means, then, that you cannot add or remove classes or IDs to the document. You cannot, in other words, edit the HTML in any way.
Your guide in this will be the following web page:
First download this zip archive for the files needed. This includes a screenshot showing most of what you need to do. The screenshot was taken on a retina Mac, so it’s big, but that means that you can zoom in to see any level of detail you need.
Using the information provided by the above article and the screenshot file, please make the following changes to the page. Put all your additions in a new file called mystyles.css.
TASK ONE: HEADERS
Make the h1, h2, and h3 elements Oswald (Google font), with an appropriate fallback font stack chosen at CSSFontStack.com. Do this with a single style.
Make h1 elements in the header be 3.157rem. Make h1 elements in ARTICLES be 2.369rem.
In the h1 that’s in the header, make the first word ( “Afrobeat:” ) this color: #c46d3b. Make the next three words this color: #788880. Make sure that the H1 in the ARTICLE remains black.
Make every h3 be the Google font “Alegreya Sans SC”. Space its letters out further, as in the screenshot, using the letter-spacing property.
TASK TWO: MENU
Put a small border element between all of the list items in the header (using one of the colors you used in the header), but make sure that there is no border element before the first one and after the last one (ie at the beginning and end of the NAV).
Remember: you must do this with CSS, and with no changes to the HTML.
TASK THREE: FIRST PARAGRAPH STYLINGS
Make the first line of the first paragraph in the document be bold.
For an extra challenge, figure out how to select and style the “drop cap” first letter of this first paragraph.
TASK FOUR: “SECTION INTRO” PARAGRAPHS
Under 800px and over 1340px, make the first paragraph directly following an H2 (but not an h3) be italicized and 1.777rem font-size:
TASK FIVE: CLEAN UP SOME UGLY TEXT WRAPPING
When the browser width is between 860 and 1300px, make any images that come directly after an H3 be left-aligned, with no text flowing up beside them. Again, remember that you aren’t allowed to modify the HTML.
TASK SIX: FOOTER LINK STYLING
In the footer, there is a list of “Other Important Figures in Afrobeat”. Look at the HTML and figure out how to style each “category” of link the following colors:
contemporary artists: indiandred
Figure out how to do this in the most extensible way, so that we add a contemporary artist, for example, the required styling will be automatically applied.
TASK SEVEN: A FEW MORE TWEAKS FOR SMALL VIEWPORTS
For viewports under 600px, remove the background image on the header—but keep keep the linear gradient. Also, make the min-height of the header smaller.
Finally, find a way to prevent text from coming up beside the smaller images at smaller breakpoints:
TASK EIGHT: ICON FONTS
Go to icomoon.com and generate a font with five appropriate icons for your top menu. Figure out how to put them into your menu without editing the HTML. Sorry, no screenshot: I’m just about to run out the door to get to class!