SCENARIO 1: REPEAT, REPEAT AGAIN
You start writing some html for a single web page. You add some inline styles to a p tag. You add a second p tag and have to type out the same inline styles to keep them consistent. The same thing happens with your headings, links, images, etc. You finish your single page site and get it live. A month later, you decide you want to change the color of your headers. You go from element to element updating the same code multiple times. You start to realize there is probably a better way to do this.
SCENARIO 2: A BETTER WAY
You start writing your html for a single web page. You add the style element to the head element. You add the p selector and declare some styles. These apply to all your p tags on the page. This is so much better. A week later, you decide to add another page to the site. You copy and paste the style element from one web page to the other to keep the styles consistent on your site. You add another page a few days later and have to do the same thing. A few weeks later, you decide to change the color of your headings. So, you go into all of your pages and update the same code in multiple places. You begin to realize there is probably a better way.
SCENARIO 3: THE BEST WAY
You begin writing your html for a single web page. You create a second file called styles.css which you pull into your html file using a link element. You begin adding styles for all your headings, p tags, links, images, etc. A week later you add another page to the site. You link it to the same styles.css file. A few week later you add another page to your site and utilize the same styles.css file. A month later, you decide to change the color of your headings. You go into styles.css and adjust the code. The changes are applied to all your web pages.
THE MORAL OF THE STORY
Use an external style sheet. This is considered best practice amongst most developers for the following reasons:
- A single style sheet can be used for multiple web pages
- Updating a style for the entire site only requires a change in one file
- The HTML is cleaner and easier to read
