Project 1B website of misinformation |
Create a style sheet for your files
A style sheet is a file in which you define the visual "style" of your page(s) (e.g. the color, the font, the size of the text, etc).
You already created styles for background-color and text color in the "Content and Styles" step of Project 1A. You included the styles in the <body> tag. In this step, you will move those styles to a separate style sheet.
1. Open NotePad++. Click File > New. A new blank file will appear. To set up the file for CSS, choose language > C > CSS as shown.
2. At the top of your document, specify the character set, just like we did at the top of the XHTML 1.0 Strict page, and add a comment that it's a CSS Document.
@charset "utf-8";
/* CSS Document */
In CSS, you provide instructions to the browser that tell it how to display HTML elements. First, we'll tell it how to display the <body> element. Since the <body> element includes everything that appears in the browser display window, this style will affect your entire page:
3. Type the word "body", then type opening and closing curly brackets { } on the next two lines so it looks like this:
Recall that in Project 1A, you specified the text color and background page. Your markup looked something like this:
<body style="font-family:Verdana, Geneva, sans-serif; background-color:#A60400; color:#BF7230;">
4. Now you can move those styles to the external style sheet. Copy everything between the quotes in your own project_plan.html's body style and paste it into your external CSS file.
Right now it's on one long line that's hard to read. Break it up by pressing Enter to start a new line after every semicolon (;) , as shown here:
Isn't that easier to read? Make sure there is a semicolon at the end of each line and that you have opening and closing curly braces around your styles.
5. Save your file as hoax.css on your desktop.
Now you have a style sheet, but it isn't attached to your pages. You'll do that next.
| previous page | next page |
|
|
|
Note: Color is identified using a code made up of the digits 0-9 and a-f. The sequence goes like this: 0123456789abcdef ("a" really means "11", "b" means "12" etc.—it's a way of indicating numbers up to 16 using only single digits). This code is called "hexidecimal." The first two digits identify how much red is in the color, the second two identify how much green is in the color and the last two identify how much blue is in the color. Here are some sample colors:
|