horsemandotpy / practice-for-week-07-css-linking-imports

Practice: CSS Linking and Imports

Now, it's time to practice your understanding of the CSS: Linking.

Set up

Clone the practice from the starter.

Once you've in VS Code, you can drag the index.html file into your browser to view the webpage, or use the File Explorer to open it in your browser. The only file you will need to edit for this practice is main.css.

Remember to save the CSS file and refresh the page in the browser whenever you make changes.

Background and Context

You will begin with a web page that has all of the HTML and a little CSS completed. You only need to add to the CSS to complete each phase.

Phase 1 - Link the CSS

The first step is to:

1. Link both the button.css file and the styles.css files to the index.html file to add some color to this page!

Once you get that to work, and display the styles correctly on the page, refactor your code to:

2. Create an import.css file. Use the @import keyword to import the styles.css file and the button.css file. Then link the import.css file to your index.html.

It is good practice to try both to familarize yourself with the two methods of linking stylesheets.

What you've learned

Congratulations! You have successfully practiced how to link your CSS to your HTML files.