An external style sheet is a second text file that holds CSS rules for a web page. Instead of placing those rules directly in HTML, save them in a file—traditionally with a .css name such as styles.css—and attach that file to the page. Think of it as one costume rack that several pages can use. section 7.7
This is especially handy once a site has more than one page. Copying an internal <style> element into every page creates repeated work; changing a shared rule then means changing it everywhere. A shared external file makes a consistent look much easier to maintain. section 7.6
Set up an external style sheet in three small steps:
- Create a CSS file and write ordinary CSS rules in it. The rules use selectors, braces, properties, and values, but do not need a <style> element. section 7.7
- Place a <link> element in the HTML page’s head section so the browser knows about the file. section 7.7
- Give href the right location: a filename for the same directory, css/styles.css for a subdirectory, /css/styles.css from the site root, or a full URL for a remote file. section 7.7
A stylesheet beside the page
If styles.css sits in the same directory as an HTML page, link it like this: <link href="styles.css" rel="stylesheet"> The browser loads the CSS file and applies its rules to the page. In HTML5, type="text/css" is not needed on this link. section 7.7
<link href="styles.css" rel="stylesheet">
Use this compact link as a starting point when the HTML file and CSS file live together. section 7.7
External style sheets are one source in the CSS cascade. When the same rule conflicts across style sources, external styles have more weight than browser default and user styles, but less weight than internal and inline styles. section 19.26
Try it: make a styles.css file, add one rule, link it from two HTML pages, then change the rule once. Both pages should reflect the change. section 7.6 section 7.7
