Hi,
Welcome to Sitepoint 
The content property is only used in conjunction with the [URL=“http://reference.sitepoint.com/css/pseudoelement-before”]:before and [URL=“http://reference.sitepoint.com/css/pseudoelement-after”]:after pseudo classes (not supported in IE6 and 7) and cannot be used in the manner you have above. It should be used like this:
div:after{content: "this string is placed inside all div elements [B]after[/B] the content in that div.";}
div:before{content: "this string is placed inside all div elements [B]before[/B] the content in that div.";}
As an aside you should not use generated content for important content as that should be in the html as normal.
when I tried to edit the image by adding height & width, the image just disappears.
You have the image outside of the body element and it should be inside it. You have also missed the closing quote from the image src attribute and also added a space between the src attribute and the opening quote.
It should look like this:
<body>
<img src="images/bigBlueMarble.jpg" width="300" height="100" alt="example image" />
Although the image should itself be in a block level box to keep things nicely in order.
<body>
<p><img src="images/bigBlueMarble.jpg" width="300" height="100" alt="example image" /></p>
You have a gap between the dimension and the unit in your padding.
padding: 10 px;
It should be:
padding:[B]10px[/B];
Copy your page code and run it through the validator to see a list of errors that it produces as the doctype seems broken also.
The keyword skyblue is not a valid css keyword and you should use the hex equivalent.
Valid code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
div {
border:2px solid blue;
background:#87ceeb;
color: green;
font-size: xx-large;
padding:10px;
}
div:after {
content: "this string is placed inside all div elements.";
}
</style>
</head>
<body>
<p><img src="images/bigBlueMarble.jpg" width="300" height="100" alt="example image" /></p>
<div></div>
<div></div>
</body>
</html>
Of course that makes no allowances for semantics as I’m guessing this is just a test but if that image is supposed to be a heading then it should be in a heading tag (h1).
Also as mentioned above there is no content in the html so the generated content should only be decorative and not important to the content otherwise it should be in the html by default as users with css switched off get a blank page.
Hope that helps