Information Architecture for the Web: Coding

For most web projects and websites, you'll want to create an external style sheet known as a Cascading Style Sheet. This is a separate document that can be attached to a single document or a series of pages such as a website. An external style sheet allows you to make changes to this single document that will impact all of your web page.

Let's say you want to change the color of the headings on very page of your website. Using the traditional method would involve changing the styles on every page of your website. If you had 100 pages, this would take a long time! Using a shared CSS, all you have to do is make a single change to your style sheet document and all the pages would be impacted.

Creating an External CSS

You need to create a new document. You make it just like a web page in Notepad or TextEdit, but you save it with the .css file extension rather than a .html extension. If you've already created an internal style sheet, you can copy it from the HEAD area of your web page right into your new document.

If you copy the style rules from the HEAD of a web pag, remember that you DO NOT need the start and end style tags, just the rules.

Example

body {font-family: "Arial", sans-serif; margin-left: 15%; margin-right: 15%; }
p { font-family: "Times", serif; color: black; font-size: 100%; }
h1 {font-family: "Verdana", sans-serif; color: red; font-size: 200%; }
h2 {font-family: "Arial", sans-serif; color: green; font-size: 150%; }

Enter your style rules and save the document with an .css extension such as mystyle.css. You can call it whatever you want.

Attaching the CSS to Your Web Page

You simply refer to the .css file in your <head> directing the code to the the name of your file such as arch.css. Save this document in the same folder/directory as your HTML documents. Be sure to upload the .css file to the web along with your web pages.

Then, go back to your HTML document and create a link tag under the style sheet to indicate the name of the stylesheet file. The rel tells the system that it's a style sheet and the href tells the name of the file.

Example

Example

Explore the Pets page and the associated external pets.css.
Notice the style link in the head area of the page.
Create an external style sheet.

Try It!

Remove the style information from your practice web page and create a separate style sheet. Remember, you'll need to upload the style sheet along with your HTML documents.

Coding: CSS: External Style Sheets

Creating an External CSS

Attaching the CSS to Your Web Page