Lesson Four: Adding the Design with CSS
Important Note:
Look in the head element in your html code and notice this line:
<link rel="stylesheet" type="text/css" href="mission.css"> This is the code that tells the browser that you are using the mission.css file for your design.
Adding Color to the Website
Most browsers will support the colors at this site by name:
Name Color Chart
There are thousands of colors that you can call with a hexadecimal code like this: #675c47. You can find browser friendly hex codes at this site:
Hexidecimal Color Chart
- The body element tags enclose every element in the body section of your webpage. Therefore, if you make a design change to the body element everything in the body is changed. Open a new file in notepad and enter this code:
body { color: maroon; }
Then click file, save as (use the all files type) and save the file as mission.css in your historytree folder. Double click your mission.html file and your text will be maroon. Sample
Important Note: Only use save as the first time that you save a CSS file. If you use save as a second time Microsoft will put another CSS extension on your file. It will look like this: file.css.css. It will no longer run. - Now add this background code to the body element:
body { color: maroon; background-color: tan; }
Once again save and test your file to be sure that the code worked. Sample - Now add this border to the body element:
(solid tells the browser that you want a solid line, 2px means 2 pixels wide, and maroon is the color.)body { color: maroon; background-color: tan; border: solid 2px maroon; }
Once again save and test your file to be sure that the code worked. Sample - Now add this margin to the body element:
body { color: maroon; background-color: tan; border: solid 2px maroon; margin: 40px; }
Once again save and test your file to be sure that the code worked. Sample - Notice that the text is lined up right next to the border. Let's make a little room with some padding.
body { color:maroon; background-color: tan; border: solid 2px maroon; margin: 40px; padding: 20px; }
Once again save and test your file to be sure that the code worked. Sample - This line will add some space between your lines of text:
body { color: maroon; background-color: tan; border: solid 2px maroon; margin: 40px; padding: 20px; line-height: 1.6em; }
Once again save and test your file to be sure that the code worked. Sample - Let's make the page easier to read by making the font larger with this code:
body { color: maroon; background-color: tan; border: solid 2px maroon; margin: 40px; padding: 20px; line-height: 1.6em; font-size: large; }
Once again save and test your file to be sure that the code worked. Sample - This font-family code will make your page much more attractive:
body { color: maroon; background-color: tan; border: solid 2px maroon; margin: 40px; padding: 20px; line-height: 1.6em; font-size: large; font-family: Georgia, "Times New Roman", Times, serif; }
Once again save and test your file to be sure that the code worked. Sample
How it works:
The CSS file sure makes your Mission Statement more attractive. Also, the text is easier to read since it is now larger and more separated. What is even better is that you can use the same CSS file for as many pages as you would like. You just have to be sure that the link code in the head element of your html file is calling the correct CSS file.
Sample
In step 8 you entered this code: font-family: Georgia, "Times New Roman", Times, serif; The last word ( serif in this case) is actually the name of the font-family. The other terms identify types of fonts within the font-family. The different browsers use different fonts, so it is necessary to specify a few choices. The browser will choose the first listing (Georgia in this case) if that font exists in the browser. If not, then the next font in line will be chosen until the browser finds an applicable font. If none of your fonts is found, the browser will use a default font that exists in the serif font-family.