i can haz caption?
Photography: eva101

Does CSS frighten you?

You’re in good company. There are plenty of tech-savy people who are also frightened of CSS. And thus it is up to web designers to save the world.

Or is it?

Let’s face it—blogging platforms take care of the CSS plumbing for us. We casual users just want to pick the shower curtains. So here’s a cookbook to applying some basic attributes to text: color, font size, and margins. We’ll have a few more for next time.

And today’s extra special recipe is making captions that stay with images aligned to the left or right, like the pic to the right.

Contents

Using Basic CSS Attributes

Applying attributes to paragraphs versus some words
Color attributes
Font attributes
Margins

Special Recipe

Captioning images

Applying attributes to a lot of paragraphs versus just some words

A <div> creates a “box” that you can stick text, images, etc in, and then you can use CSS to apply attributes to everything in that box.

Example:

<p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p>

<div style="font-size:80%;">
<p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p>

<p>"My dear Mr. Bennet," said his lady to him one day, "have you heard that Netherfield Park is let at last?"</p>
</div>

<p>Mr. Bennet replied that he had not.</p>

One thing about <div> is that it breaks the rest of the text around it, which makes it unsuitable for, say, just bolding a couple words without creating any breaks. For that, you need <span>:

<p>It is a <span style="font-size:150%;">truth</span> universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p>

With <div> and <span>, the world of HTML and CSS is your oyster.

back to contents

Color attributes

color: the color of the text.
background-color: background color of the area around the text.

These can take either color names, like black and red, or a color code like #fed667. For more color codes, see the Ultimate HTML Color Hex Code List. Which is made of win.

Example:

<div style="background-color:#fed667;">
Mr. Bennet made no answer.

"Do you not want to know who has taken it?" cried his wife impatiently.

"<span style="color:red;">You</span> want to tell me, and I have no objection to hearing it."

<span style="color:blue;background-color:pink;">This was invitation enough.</span>
</div>

Note that we can specify multiple attributes in a single style string; they just need to be separated with semicolons.

back to contents

Font attributes

There are a lot of these; I’ll only introduce the ones you’ll be typically interested in.

font-family: the font you want to use, like 'Times New Roman', Arial, or 'Courier New'. If a family name has spaces, enclose the name in single quotes. You can specify a list of families; if a font isn’t found, the browser tries the next.

In order for a font to display correctly for your readers, they must have the font installed. Fortunately, you can still safely choose from more than just these three: see Safe Web Fonts.

font-size: size of the font. This can be specified as a percentage, keyword like small or big, in pixels or inches or other measurement, or in terms of the current font size. This last one is useful when you don’t want to deal with the accumulated effects of multiple percentages (what the heck size is 110% of 70% of 220%? The answer changes depending on the order of the percentages applied). So for instance,

• 1em means the same size as the current font.
• 2em means twice the size of the current font.
• 0.5em means half the size of the current font.
• Yes, with em you can use decimals. 3.14em thus makes sense.

font-weight: how heavy a font is. A replacement for <b>, it can take successive values from 100 to 900, or simply bold, bolder, lighter, and normal (no bolding).

font-style: how italic a font is. A replacement for <i>, you can have italic, oblique (less curly than italic), or normal (no italics).

Example:

<div style="font-style:oblique;font-weight:bold;">
"What is his name?"

"Bingley."

"Is he <span style="font-size:.75em;">married</span> or single?"

<div style="font-weight:normal;">
"<span style="font-family:'Times New Roman', serif;">Oh!  Single, my dear, to be sure!</span>  A single man of large fortune; four or five thousand a year.  What a fine thing for our girls!"

"How so?  How can it affect them?"
</div>

</div>

Note that the second <div> is nested in the first <div>, and is able to override the boldness using font-weight: normal;.

back to contents

Margins

They won’t work on <span> or any other tag that doesn’t create a line break. Which makes sense, when you think about it.

You can specify them separately as margin-top, margin-right, margin-bottom, and margin-left, but I usually like to specify them all at once with margin and the four numbers, like

<div style="margin:5px 5px 0 10px;">

(px means “pixels”. If you have 0 you don’t need to specify units next to it, otherwise you need units. I also like to use ex, which is the height of an ‘x’ in the current font.)

To remember which number is which: we start at the top, and continue clockwise around the sides; this ends up with the order as top, right, bottom, left.

Example:

<div style="margin:0 0 1ex 8ex;">
"My dear Mr. Bennet," replied his wife, "how can you be so tiresome!  You must know that I am thinking of his marrying one of them."
</div>

"Is that his design in settling here?"

<div style="margin:0 4ex;">
"Design!  Nonsense, how can you talk so!  But it is very likely that he <i>may</i> fall in love with one of them, and therefore you must visit him as soon as he comes."
</div>

Note: I am indeed mixing the old <i> tag in with the new and spiffy div/span/CSS stuff. Purists will tell you not to. For the casual user, unless you are doing this for a typesetter who needs everything just so so they can easily generate a book from your web page, I say do what works and causes the least amount of typing.

back to contents

Special Recipe: Captioning Images

The technique: you create a <div> of a specific width, stick an image and caption text in it, play with some attributes to make the <div> float to the right or left, and have some nice margins so that your other text won’t slide into the image.

Image to the right, centered small italic caption.

Note: to get the appropriate width for your div, add 10 pixels to the width of your image. This image is 120 pixels wide, so the div is set to be 130 pixels wide. You may, of course, need to adjust this up or down until it all works.

Also, this code assumes that you have a blog that inserts automatic line breaks. Otherwise, put a <br /> between the image and the caption.

Example:

Caption: A non-cheezy cover for Pride and Prejudice.

When Jane and Elizabeth were alone, the former, who had been cautious in her praise of Mr. Bingley before, expressed to her sister just how very much she admired him.

“He is just what a young man ought to be,” said she, “sensible, good-humoured, lively; and I never saw such happy manners!–so much ease, with such perfect good breeding!”

“He is also handsome,” replied Elizabeth, “which a young man ought likewise to be, if he possibly can. His character is thereby complete.”

“I was very much flattered by his asking me to dance a second time. I did not expect such a compliment.”

“Did not you? I did for you. But that is one great difference between us. Compliments always take you by surprise, and me never. What could be more natural than his asking you again? He could not help seeing that you were about five times as pretty as every other woman in the room. No thanks to his gallantry for that. Well, he certainly is very agreeable, and I give you leave to like him. You have liked many a stupider person.”

“Dear Lizzy!”

<div style="width:130px;float:right;font-style:italic;font-size:.75em;text-align:center;line-height:1.2em;margin:0 0 5px 10px;">
<img src='https://spontaneousderivation.files.wordpress.com/2008/03/pride-and-prejudice.jpg' />
Caption: A non-cheezy cover for Pride and Prejudice.</div>
When Jane and Elizabeth were alone, the former, who had been cautious in her praise of Mr. Bingley before, expressed to her sister just how very much she admired him.

"He is just what a young man ought to be," said she, "sensible, good-humoured, lively; and I never saw such happy manners!--so much ease, with such perfect good breeding!"

"He is also handsome," replied Elizabeth, "which a young man ought likewise to be, if he possibly can.  His character is thereby complete."

Image to the left, centered small italic caption.

See previous example for notes about what width the div should be. This code assumes automatic line breaks.

Caption: A non-cheezy cover for Pride and Prejudice.

When Jane and Elizabeth were alone, the former, who had been cautious in her praise of Mr. Bingley before, expressed to her sister just how very much she admired him.

“He is just what a young man ought to be,” said she, “sensible, good-humoured, lively; and I never saw such happy manners!–so much ease, with such perfect good breeding!”

“He is also handsome,” replied Elizabeth, “which a young man ought likewise to be, if he possibly can. His character is thereby complete.”

“I was very much flattered by his asking me to dance a second time. I did not expect such a compliment.”

“Did not you? I did for you. But that is one great difference between us. Compliments always take you by surprise, and me never. What could be more natural than his asking you again? He could not help seeing that you were about five times as pretty as every other woman in the room. No thanks to his gallantry for that. Well, he certainly is very agreeable, and I give you leave to like him. You have liked many a stupider person.”

“Dear Lizzy!”

Random by-note: I prefer images on the right, because the default ragged-right looks better with the image next to it. On the left, there is a very clear border. Though if I’m running a lot of images and a lot of text, I like to put some on the right, and some on the left, in an alternating fashion.

Even more random by-note: oh, how I love Regency-era snark!

back to contents

The Floor is Open

For questions, comments, and suggestions.