The first part of your question deals with cascading style sheet rules and specificity. The letter doesn't become white, because you have a previous rule that overrides it.
Code:
p {
font:larger Arial, Helvetica, sans-serif;
padding:100px;
color:#000000;
}
The preceding rule applies to all <p> elements.
Code:
.c {
color:#FFFFFF;
background-color:#0000FF;
position:absolute;
top:10px;
right:10px;
}
This rule applies to the parent <div> element. color is an inherited property, so text inside that <div> (but not inside a <p>) will be white. But text inside a <p> will be black, because you have a specific rule applying to <p> elements that takes precedence over inheritance.
With regards to the second question, when you change the rule to:
Code:
.c p {
color:#FFFFFF;
background-color:#0000FF;
position:absolute;
top:10px;
right:10px;
}
The rule now applies to the <p> element instead of the parent <div> element. The <div> element is no longer absolutely positioned, so it appears in the normal flow of the document, which places it in the upper left hand corner of the screen. The <p> element is now absolutely positioned, so it appears roughly where the <div> element appeared before, but it has default margin applied to it by the browser, so it's shifted down a bit. The border in question is applied to the <div> element, not the <p> element, which is why you see the border in the upper left hand corner instead of applied to the <p> element.
HTH!