Bonus

We'll download a pre-created stylesheet and add a link element in the header to use the styles.

1. Create a folder for the stylesheet inside your "CodingAndCocktails/session1/html" folder following the techniques we learned for front-end architecture.

   Need a hint?

   A stylesheet is a CSS file. What folder structure did you use in the front-end architecture section to store CSS files?

2. In VS Code, create a file named main.css inside the new folder you created.

3. In a new browser tab, navigate to Coding & Cocktails provided stylesheet. Copy the contents of the file and paste it into main.css. Save main.css.

4. In the head section of your index.html file, add this tag right above the closing </head> tag:

   <link rel="stylesheet" href="DIR/main.css" />
   

   Hey that href attribute looks familiar! This time we're using the href attribute for the source of the stylesheet, not for the source of the image, but the use of the attribute is the same. We're using a new HTML element link to pull in an external source. The rel attribute declares the external source type and tells the browser we're bringing in a style sheet.

5. Replace "DIR" with the path to the main.css file.

6. Save your file and open the index.html file in Chrome.

7. Share your success by posting a screenshot to Slack!