Some people asked about how I did the fancy formatting in a recent post. This is a mini-tutorial on the CSS parts of things. It assumes you have done some HTML editing.

There is a special additional stuff you can do using something called CSS (Cascading Style Sheets). CSS is a whole extra language for specifying layout and can be piggy-backed onto HTML text by using a style attribute on various elements. You don't have to understand all of CSS to know how to do some cool things. Just take a look at some examples:

Use <p style="text-indent: 2em;">Your text here.</p> to create a paragraph that has 2 ems of indentation in the first line only. An "em" is a funny unit that is the width of the capital M in the current font. That character is usually the widest in the font, and so an em is considered to be a "wide space" in any font. This paragraph is indented 2 ems.

Don't be perplexed,
<p style="text-align: center;">this will center your text.</p>
It's more clear from afar,
if you use <br />
which forces a line break
to shorter the lines make.
The centering will show 'em.
You've got a great poem.
So work out a rhyme
Or just have a good time.

Use <p style="text-align: right;">Your text here.</p>
to align to the right instead of the left.
Not that you'd want to do that a lot here
since Salon leans left.

Draw a border with the border attribute. A solid black border one pixel wide (a pixel being a single screen dot, the smallest your monitor can display) is done with:
<p style="border: 1px solid black;">Your text here.</p>

That looks crowded, though, doesn't it. Usually you want padding around the text inside the border. Let's add about 5 pixels of padding:
<p style="border: 1px solid black; padding: 5px;">Your text here.</p>

You can specify the font to use, but beware: Just about everyone on the net has different fonts on their computer, so often this doesn't work or has variable effect. You specify the “font-family” in a style setting, and the recommended value given is a list of fonts to try in order from left to right until one is found. For example, to get a font without serifs (the little horizontal bar at the top and bottom of a capitalized “i” for example), you specify
  style="font-family: Arial, Helvetica, sans-serif;"
(Trivia: “sans” is French for “without” if you didn't know.)
To get a font with serifs, try:
  style="font-family: Times New Roman, Times, serif;"
But as long as you put in these fallbacks, you can try others. For example, if ou write:
  style="font-family: Goudy Old Style, Goudy, Bookman, Century Schoolbook, Times New Roman, Times Roman, Times, serif;"
you should get Goudy Old Style (if it's present on the end-user's machine), or Goudy (if it's present), or Bookman. If this paragraph you're reading looks different than others before it, that's because you've got one of those fonts. I set up this paragraph using:
<p style="font-family: Goudy Old Style, Goudy, Bookman, Century Schoolbook, Times New Roman, Times Roman, Times, serif;">You can specify...</p>

Some colors are possible to name. For those that are not, you can use a “#” character followed by 6 letters which are hexadecimal digits. If you don't know what a hexadecimal digit is, don't get scared. It just means that letters are bigger than numbers and that f is the biggest. So ffffff is the biggest six-digit number and 000000 is the smallest. You're almost there. Don't panic. Each pair of digits represents a primary color. The first two are red, the next two blue, and the next two green. So 000000 means no red, no blue, no green (the color ends up black, by the way). ffffff means lots of red, lots of blue, and lots of green (and ends up being white). 00ffff has no red but lots of blue and green. That's going to come out aqua (or some might say cyan, but aqua is the official name). If you don't know a lot about mixing colors of light, it's not like paint. Yellow is made up of red and green in light. (Trust me.) So ffff00 is yellow. But if you put in more blue, you'll get a color closer to white, which means a pastel yellow. ffffbb for example. This paragraph is that pastel yellow color, #ffffbb.

You can make text flow around a picture or a div by using the CSS directive “float: right;” or “float: left;”. Put the thing you want to be flowed around first, then the text that follows will do that. You can set the width of a div with a width specification. A normal Open Salon column is 485px wide, so if you use, for example, 200px, you'll get just under half a column. The pumpkin that is featured in this column is set to be 50 pixels wide and because no height is set will appear proportional height. A margin of 5 pixels is added around the pumpkin outside of its border so it doesn't run into the text. (The margin is like the padding, but margin is on the outside of the border instead of the inside.) That pumpkin was specified by:
<img style="float: right; width: 50px; margin: 5px; border: 2px solid black;"
  src="http://open.salon.com/files/pumpkin-face1221728008.gif" mce_src="http://open.salon.com/files/pumpkin-face1221728008.gif"
  alt="pumpkin face" />

A div or paragraph can be resticted to a particular width, forcing the item to be that particular width rather than the default of 485px. This paragraph is 300px wide, as done by:
<p style="width: 300px;">

Another thing that can be set to a width is a horizontal rule, <hr />.

You can set its width explicitly. You can also say whether the short line should appear left, center, or right.
<hr style="width: 150px; text-align: center;" />

In fact you can give the rule a height and a color if you like:
<hr style="width: 200px; height: 5px; text-align: left; color: green;" />

The official CSS specification can be found at w3.org.

If you got value from this post, please "rate" it.