Style Sheets #1 Colors and Font Families
Help! Somebody got into my website with a set of Crayola Crayons and messed up the colors and some fonts on my website!
This could be an interesting way to get a feel for how you can use cascading style sheets as a part of a website. I'll provide a ficticious website, which you can download to a folder on your desktop. You don't have to worry about screwing it up and you can just delete it when you're done.
- Right click and save target as this fixthewebsite zip file in a new folder on your desktop. The file is only 4kb.
- EXTRACT the files to the folder on your desktop (if you don't extract the files, it won't work right)
- You should see an index.html, style.css,and two folders for page 2 and page 3, inside of which is an html file for those pages.
- Open (double-click) the index.html file and you'll see the problem. The worst is with the links in the first column. There are three pages on the website, click the links for Page 1 and 2(if you can see them).
- Resize the window so that it only takes up half the screen
- Open the style.css file with a text editor (right click, open with Notepad) and arrange it on the side of the screen next to your browser.
There are no images (just the background for the images) so you won't be able to fix that, unless you copy some images from your computer, paste them in to a folder for page 1 or 2, and rename them a001.jpg ...etc.
To change colors, you can use a color name (red), a hex reference (#FF0000) or rgb (rgb(255,000,000)). Hex or RGB gives you a lot more choice in color, and most programs that let you pick a color will show you the numbers for the colors you've selected. When you find ones you like, put them in the comment section.
I've left some comments on the top of the style sheet with hex colors I use for my page, you can use those if you want, but be creative and come up with your own color pallette (sp?).
Be CAREFUL with the syntax of the style sheet. If you find the sheet no longer works, chances are you've omitted a semicolon or curly bracket. Also, remember text will disappear if the text color is the same as the background, and that can happen easily.
Notice that as you update the style sheet, all three pages of the website are updated (as long as you refreshed). That's one of the beauties of using a style sheet.