CSS Body
Let's look at what the first sector says.
| body { font-family: Arial; font-size: medium; color: #000000; background-color: #FFFFFF; vertical-align: top; } |
The sector name "body" is a standard element of websites and is automatically associated with the <body> tag of the website.
The first two lines of instruction makes any font that does not have any other instructions to be Aria; and the size to be medium. You can use an absolute number when defining fonts. However, since many people adjust their individual computer settings to their needs we found it better to only do then when we have to. For instance, if one of your visitors is visually impaired, they may have adjusted the settings to display text in a larger format. If there is an absolute value, the visitor will probably not be able to see it.
The next line "color: #000000;" defines the font color of throughout the website. If a font in the website is given a different instruction, it will follow that instruction until the instruction has ended. Then it will go back to this color. The color in this line is listed as "#000000", which is the color black.
The second to last line "background-color: #FFFFFF;" defines the color of the background of the website. The color #FFFFFF is the color white. To change this color, go to your Pre-Planning Template and look at the number you wrote down at the bottom for the background color. Change the #FFFFFF number to that number. For the sake of this demonstration, we will change it to #40ff40 to match the corners we made earlier.
And the last line "vertical-align: top;" states that all of the content should be aligned to the top of their respective areas unless otherwise indicated.
There is also a way to put an image in as your background. However, you must be careful when doing this and choose an image that you can still read text through. Otherwise, your visitors will get frustrated and go away.
 |
To add an image to the background, save the image into your images directory of the website. Then on the right side, find the box that says "background - image". |
 |
Use the drop-down box to select the "Choose Image" option. Direct the window to the image you want to use and when you are done, it will display how it will look in the window below. Note that when you use and image as a background that it will tile the image across the website. |
For now we are just going to change the background color. Save the file and upload it to your server to see the changes.
 |
Notice how the corners of the side menu now blend with the background!
