This is going to be a fairly comprehensive post, covering all customisations available for text within a border.
Firstly... the code
Ok, so lets start at the beginning. The RED piece of code listed above is the background, border and drop shadow.
Reading left to right, we will address each part and the customisation possibilities.
The code can be ignored until the section "width: 500px;" This specifies the width of the area itself, this can be increased and decreased as desired. For example width: 423px or 600px, px meaning pixels.
The next part of the code reads "border: 3px solid #353535;" This is the actual border around the area. The thickness of the border can be adjusted by either increasing or decreasing the "3px" by one or two pixels either way.
The word solid can be changed to either "dotted" "dashed" "outset" "inset" "grooved" "double" and "ridged", to change the style of border.
#353535 is the Hexadecimal Colour Code for the image border. You can either visit my post here regarding Hex Colour Codes or grab the code from your template designer, for a shade you have already incorporated into your blog design.
"border-radius: 15px;" is in direct reference to the curved edges of the area. be aware that this feature only works in some browsers. You can either increase or decrease the size of the curve by editing the "15px" to a slightly lower or slightly higher number.
"box-shadow: 5px 5px 2.5px #000000;" is in direct relation to the box shadow. If no box shadow is required, simply delete the line. Same goes with the border radius and border codes already covered. If these things are not required, simply delete the relevant section of code... where was I??? "The 5px 5px" figures are the thickness of the box shadow. Increase or decrease as desired. The 2.5px is the amount of blur. It can also be adjusted and even deleted if no blur is required (for a sharp edged shadow). The #000000code is another Hex code reference (black).
"background-color: #353535;" is in direct reference to a plain background colour of your choice. Please see the above comments and link regarding Hexadecimal colours. As also stated above, simply remove the background image piece of code and you will be left with this plain colour background.
The green piece of code listed above is how you change the appearance of the text/font.
The blue piece of code listed above is your actual text.
<b>....</b> makes the text bold, remove the <b> and </b> if you do not require bold text.
<i>....</i> makes the text italics, remove <i> and </i> if you do not require your text in italics.
Hope this all makes sense, but if you have any questions at all, leave me a comment.
Thanks for tuning in!