Virginia DeBolt (bio) writes the bi-weekly Elder Geek column for Time Goes By in which she takes the mystery out of techie things all bloggers and internet users need to know to simplify computer use. She has written several books on technology and keeps two blogs herself, Web Teacher and First 50 Words. You will find links to Virginia's previous Time Goes By Elder Geek columns here.

One of the questions from back in August when I asked what readers wanted to know was how to put a quotation from a news source in a box on a blog. I'm going to answer that question today, even though some of the bloggers among you may not be able to get to the file that controls this.

Today's post is the geekiest one I've written for Time Goes By. If it makes your eyes cross, please tell me I'm getting too geeky. If you get excited by the geek factor and try it out, please let me know that, too.

CSS means Cascading Style Sheet. CSS is what you use to determine how things look on a blog. If you use Wordpress for your blog, and it is hosted free with a URL like myblog.wordpress.com, you may not be able to get to the files that control the CSS. If you are on Blogspot, you can make changes to the template CSS.

If your blog is like Time Goes By, which Ronni hosts on her own domain and controls herself, you should be able to get to the CSS file with no problem.

So, for the bloggers who can work on their CSS, here's how to make a box around a quote.

This image shows a bit of CSS from a Blogspot blog. This is in the template area of the blog. In Wordpress, the CSS is in a separate file called styles.css. Let's use the image to get a bit of education on CSS.

In the image, you see this:

That's where the CSS starts. On Wordpress, or any other place where the CSS is in a separate style sheet away from the blog template, you see only styles with no <style> at the beginning.

In the image, you see this: /* THE BACKGROUND COLOR, FOREGROUND COLOR AND FONT SETTINGS FOR THE BODY*/

That is a comment, an explanation to help you understand the style rule. It does nothing to the blog's appearance.

Finally you see a style rule:

body {
    margin:0px;
    padding:0px;
    background:#f6f6f6;
    color:#000000;
    font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    }

Here's what that rule means. It's a rule that styles the body. It sets a size for the body margin and the body padding. It sets a background color for the body. It sets a color (meaning the color of the words) for the body. It sets a font for the body. All the colons and semi-colons and curly braces mean something important. If you copy what I tell you exactly, you don't need to worry about what they mean.

What to Style, What to Style?
When you quote a source, you should put the quoted material in a blockquote on your blog. On both Wordpress and Blogger, the icon used to create a blockquote in the text looks like an opening quotation mark. When you select some text in your blog post and click the quotation mark icon, the text is indented. That's a blockquote.

You want to style a blockquote. You need a rule in your CSS for blockquotes. Look carefully at the CSS to see if there already is a rule for blockquote there. Sometimes the word "blockquote" is mixed up among a bunch of other words, so watch closely. Here's the rule on my Wordpress blog, Web Teacher. This rule styles blockquotes that are in my content and blockquotes that are in my comments. The things the rule does to my blockquotes are inside the curly braces.

div.entry-content blockquote, div.comments ol.commentlist blockquote {
    background:url(images/blockquote.png) no-repeat top left;
    margin-left:0;
    margin-right:3em;
    padding:0 0 0 2em;
    }

When I put a blockquote on my blog, here's how it looks.

The quotation mark image shows up beside the blockquote because of the rule for background. The blockquote rule styles background and margin and padding. What this blockquote does not have is a box around it.

Get to Boxes Around Quoted Stuff Already
To make a box in CSS, you use "border." Border can be added to one, two, three, or all four sides of a box. Borders can come in various widths (1px, 10px, 50px, whatever), in various styles (solid, dotted, dashed, groove, inset) and in various colors (black, gray, blue, or color values like #746f70).

If I added some new CSS about border to my rule for blockquote, here's what I might add:

div.entry-content blockquote, div.comments ol.commentlist blockquote {
    background:url(images/blockquote.png) no-repeat top left;
    margin-left:0;
    margin-right:3em;
    padding:0 0 0 2em;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    }

I added a 1px wide, solid border in a black color to my blockquotes. Here's how it looks now.

The background image of the quotation marks doesn't show up now, which I would fix if I really wanted to do this on my blog.

To play around with borders on your blog, try copying my rules. Make sure you get them inside the last curly brace at the end of the blockquote rule, and make sure you include the colons and semi-colons just as shown here.

Then you can change the width or style or color to suit yourself. Don't be afraid to experiment. Save what you change and refresh your blog page to see how it looks. If you don't like what you see, take it back out of the style rules and go back to the original appearance.

If your blog doesn't already have a CSS rule for blockquotes that you can add border to, make one like this.

blockquote {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    }

Advanced Boxes
Each side of the box can have its own border rule. The sides start from the top and go around clockwise. So you can have a rule for border-top-width, border-top-style, border-top-color that is different in appearance from border-right-width, border-right-style and border-right-color. The other two sides of the box are border-bottom and border-left.

You can have a border on only the border-right part of the box and nothing on the other three sides. Or only on the border-bottom and nowhere else. Or a thick border on the right and bottom, with thinner ones on the top and left so it looks like a drop shadow.

Here's a tutorial on borders from w3schools. If you really get interested in boxes and borders, you can learn more there.

At The Elder Storytelling Place today, Lyn Burnstine: Sleuthing the Shelves