External Style Sheets
External Has an external file (a stylesheet) created in notepad(styles.css) This file defines styles for different elements Your individual webpages link to this stylesheet Controls all webpages that link to this stylesheet Code for individual webpages: <link rel="stylesheet" type="text/css" href=“styles.css" /> This goes in the <head> </head> section of all of the webpages on your site (except the stylesheet)
External Continued hr {color:yellow;} p {margin-left:10px;} body {background-image:url("images/sand.gif");} This is an example of a stylesheet. Every page in the website will now have yellow horizontal rules whenever they use the <hr> tag. Note there is no body tag, html tag, etc, and the filename have the extension .css If you change the stylesheet to hr {color:red;}, then all horizontal rules will be red. This is true if you have 2 pages or 200 pages (as long as each page has the stylesheet referenced in the <head> tag).
External CSS Illustrated The stylesheet controls the design of all of these webpages stylesheet.css index.html contact.html questions.html store.html Note: All of these html pages must include the <link> information pointing to the css document
CSS is about Control! If you have all three types of styles (inline, embedded and external), you could have this situation External says all <hr> are yellow (on all 200 pages of the website) Internal/Embedded says all on this page are red Inline says the first <hr> on this page is blue Internal CSS overrides external, and inline overrides them both
The examples in this lesson will prove very helpful!