Inherit
I told you we would have look at the inherit value. Let's imagine that we want the p:first-letter pseudo element to be the same color as the paragraph text. You can just simply change the color value to match the color value in the p element, but you will need to keep changing the value every time you change the p color.
Instead of entering a hex code, you can use inherit. You are understand the concept with the parent element and the children. Well, you can easily apply that to inherit. Consider that p is the parent, and you want the p:first-letter child to inherit one of it's properties! It's easy; you literally type in inherit for the color value:
<!--
body {background-color: #669900; color: #99FF00; font-size: 12px; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size: 2.5em; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: .8em; color: #FFFFFF; text-align: justify; line-height: 1.2;}
p:first-letter {color: inherit; font-size: 2em;}
-->
</style>
Try it! You can keep changing the p color, and the same color will always cascade down the the p:first-letter child! The inherit value works with quite a few properties. In fact, it's often the default. If you look closely at the markup, you will see that the h2 elements are the same color as the body. We haven't redefined the color property for the h2 selector, so it naturally inherits the parent color!
Well, this is getting amazing! Now take these tools, and create a style that's pleasing to your eye:
