CSS Styling Lab - External Style Sheet
Ready for an External style sheet? External style sheets (sometimes called global style sheets) are used in every modern web site because changes to all of the pages can be made from a single file. With an external style sheet, you define your styles in a single file, a CSS file, and link this file to all of your HTML files.
- Open your HTML editor
- Type the following:
body { background: #C0CCC1; padding: 20px; } h2 { font-size: x-large; text-transform: lowercase; text-decoration: underline; color: yellow; } .selector, .declaration, .property, .value, .rule { font-family:"Courier New", Courier, monospace; } - Save As format.css (remember to select All Files or you will end up with a text document)
- Place format.css in the "css_lab" folder in your "labs" folder along with css_lab.html.
- Open css_lab.html from your work in the CSS Lab using your HTML editor
- Type <link rel="stylesheet" href="format.css" type="text/css" /> just before the ending </head> tag
- Save your work and view in a browser
You have now created an external style sheet format.css and linked it to the same html document that contains internal and in-line css.
If your file is not similar to the image below then check the styles you defined check for spelling errors and syntax errors such as semi-colons. Also check that you named the css file correctly and placed the correct name in the link reference. They must be identical (all lowercase). Finally check that they appear in the same folder.
Notice what rules from the external style sheet did not seem to apply to the page. Why do you think that is the case?
Make a link in the navigation section of your portfolio home page to the CSS lab document, validate all files, and upload them to the server.
Now start thinking about what styles you want to use on your web site. You can start applying them in the Styling Portfolio exercise.