i can haz caption?
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.
Using Basic CSS Attributes
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.
<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.
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.
<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.
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',
'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
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,
1emmeans the same size as the current font.
2emmeans twice the size of the current font.
0.5emmeans half the size of the current font.
- Yes, with
emyou can use decimals.
3.14emthus makes sense.
font-weight: how heavy a font is. A replacement for
<b>, it can take successive values from 100 to 900, or simply
normal (no bolding).
font-style: how italic a font is. A replacement for
<i>, you can have
oblique (less curly than italic), or
normal (no italics).
<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
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-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.
<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.
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.
<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='http://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.
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!
The Floor is Open
For questions, comments, and suggestions.