External Stylesheets

Transcript

I have two HTML files with the same header and footer. I also have the same styles for my header and footer. This is super repetitive and will only get worse as I add more pages to my website.

When you have the same styles for certain tags across multiple pages on your website, you can use an external style sheet. An external style sheet is a file specifically for CSS. It's basically like ripping out the style tags from your HTML file so that you can link those styles to as many HTML files as you want.

Let me show you how this works. First, I'll create a file called app.css. Next, I'll cut the CSS for my header and footer from both of my HTML files and paste it into my app dot.css file. CSS files are only for CSS. That means no HTML.

The last step is to link both of the HTML files to app.css. To do this I'll need a new tag called link. The link tag requires two attributes. The first is “href.” This tells the location of the file, just like an anchor. I'll set the “href” value to app.css. The second attribute is REL, short for relationship. This tells the HTML file what kind of relationship it has with the file you linked. In this case, the REL value is style sheet because it's linked to a CSS style sheet.

I can copy and paste this link into my other HTML files and now my CSS is much more D.R.Y.. All of the styles from my header and footer are in one CSS file. When I add a third page to my website, I can easily link that page to my app.css and the header and footer will be styled, just like “About Me” and “My Gallery.”