Using CSS

Applying CSS to the Inline Images Page

You should make sure you have the HTML for the inline image assignment completed before taking this next step and applying some structure and CSS to your file. This is called “progressive enhancement” and is a best practice for web design. CSS can change the look and feel and even the layout of a page without any change in the content at all. You will apply a pre-made stylesheet (CSS file) that have made and posted. You will need to add this line to your 
<link rel="stylesheet" href="http://picavulpes.net/images.css" />
section
Notice I am hosting the CSS file for you. You don’t need to edit this file at all to get it to affect your code. Often a website has a CSS file that was made by a third party and will require very little editing. CSS can affect the look/feel/layout of a webpage without the HTML for the page being changed at all. You must structure your HTML correctly though. Make sure you used the basic HTML5 structure correctly. You need to be sure the entire set of images and the associated links are all included in one over-arching article tag. Next you will need to surround the heading (h2), image tag, and caption inside a figure tag. Put the link to the Flickr photo page inside a figcaption tag. The caption is contained inside the figure tag. This is called tag nesting.  See example below:

<figure>
<h2>Put image title here</h2>
<img src="flickrURL.jpg" alt="alt text here" width="150" />

<figcaption>Put a link to Flickr photo page here</figcaption></figure>

Feel free to use my example page to make this thing work. You can edit the HTML from last time to complete this assignment. The one HTML file will work for both the inline images assignment and also for this assignment.