In this assignment, we will create another simple flexbox menu. We will style this page in our usual manner by creating a style section in the head of the document and typing in our CSS. However, we will then delete the style tags and move the CSS to another document. Our goal is to have a document for the HTML and a separate document for the CSS. We will then link the HTML document to the CSS document using the link tag.
We will name our HTML document assignment017E.html and our CSS document masterstyles.css. Notice the .css extension.
After we have created our external stylesheet, masterstyles.css, we will make our menu interactive by using CSS transitions. When you hover over a link, it will change color as usual, but we will be able to control the transition from one color to the other and doing it slowly for a great effect.
Let us code the menu, separate the CSS, link to our masterstyles.css file, and add transition code to the .css file.