Setting Background Color

The basic syntax of the style tag looks like this:

<style type="text/css">
selector {property: value}
</style>

Unfortunately, if someone tries to view a page with embedded styles using an older browser, the style tags will be ignored. To make matters much worse, some older browsers will display the style declarations in the body of the page! The accepted hack to work around this problem is to wrap comment tags around everything inside the <style> tags (You remember comments from the very first lesson). So, our basic format really looks like this:

<style type="text/css">
<!--
selector {property: value}
-->
</style>

The declaration between the comment tags consists of three parts: The Selector, property and value. The Selector is the element you want to define (like the body of the web page).  The Property is the attribute you want to change (like the background color) and the property is set with the Value (like "yellow" or "#FFFFCC"). Notice that the Property and Value are separated by a colon, and grouped with a set of braces. Braces are those curly bracket things that look like this: {}

So, let's fill in our example with instructions to set the background color of the body to light yellow:

<style type="text/css">
<!--
body {background-color: #FFFFCC};
-->
</style>

So let's do this! Copy the markup above and Paste it between the <head> tags in your wish.htm page. When you test the page it should look something like this:

You may be wondering why we aren't sticking with this much simpler markup: <body bgcolor="#FFFFCC">

It does seem to have the exact same results, but trust me for now: we're working toward something much bigger.