CSS For LiveJournal

Introduction

This is a quick and dirty introduction to using CSS in your LiveJournal. CSS was designed to add some very useful layout tools to HTML. It's tremendously useful for designing websites. It can even be added to your LiveJournal to add a little bit of flare to your LJ entries.

LiveJournal is a weblog website. Weblogs are easily updated, and organized into communities and groups of friends. There are other weblog services out there, but this tutorial may or may not apply to them as well.

This tutorial will focus on using CSS in your LiveJournal entries with a free LJ account. Paid accounts may be able to do some extra things that the free accounts can't do, but we're not going to focus on them. LJ strips out most CSS from any entry you submit. They have a good reason: to prevent people from screwing up the layout of everybody's posts on a Friends page.

CSS is designed to degrade well. If an older browser comes across a page using CSS, it can still display the information you have posted, even if the layout isn't quite right. As a nice side effect, people with disabilities aren't completely shut out from reading your page or post. Even people stuck using a text web-browser can read your entry without problem.

Just a final note: This page is primarily done with CSS. The side menu bar, layout effects, and section and figure numbers are all done with CSS. There is no Javascript, and the menubar is actually just a list (with some heavy CSS, courtesy of the List-O-Matic). Unfortunately, mouse-over effects are impossible to do in CSS on LJ, and generating the menu's appearance is tedious for LJ.

HTML Overview

HTML is the language used to create web pages. The idea is that there is content (ie, these words), and there is information defining what the intent of the content is (ie, this is italic content).

The content is pretty easy to create. For the purposes of a web journal, it's the text that you type in, maybe with a picture.

To define the intent of some content, it is surrounded in a tag. An HTML tag is surrounded by a "<" and a ">" symbol. For example:
The text between the <strong> tag and the </strong> tag is intended to be displayed strongly (and is usually bolded). The <strong> tag tells the browser that the content which follows is strong. It is a starting tag. The </strong> tag is the ending tag. All ending tags begin with a slash ("/") and have the same name as the starting tag this it ends. It says that any following content is not necessarily strong.

HTML tags can be nested. This means that you can put a start and end tag in the content between another pair of start and end tags.

HTML tags can have attributes. These are parameters which can affect how the tag is displayed, or how it is supposed to work. For example, the <img> tag is supposed to show an image, but what image? The actual image comes from the src attribute. So, for example:

Note that there is no ending tag. As shown in the table of common HTML tags, some tags don't have an ending tag, since they define more content rather than defining what the intent is.

All attributes in an HTML tag look like:
The value part must be enclosed between double quotes (").

A short table of some of the most common HTML tags is below. If you would like to learn more about HTML, take a look at additional resources listed at the end of this document.

Very Common HTML Tags

Start Tag	End Tag	What it does
<h1>	</h1>	The content between the tags is a first-level header. Very big text, usually.
<h2>	</h2>	The content between the tags is a second-level header. Big text, usually.
<h3>	</h3>	The content between the tags is a third-level header. Slightly bigger text, usually.
<hr>		Create a horizontal line.
<br>		Cause a break in the text (like hitting carriage-return on a typewriter).
<a href="webpage">	</a>	The text between the tags is a weblink to the given webpage.
<img src="web_image">	None	Displays the given web URL.
<ol>	</ol>	<li> tags within the content are part of an automatically numbered list.
<ul>	</ul>	<li> tags within the content are part of an bulleted list.
<span>	</span>	Encloses content, but doesn't change its appearance. See the next section.
<div>	</div>	Boxes the enclosed content, but doesn't change its appearance. See the next section.

Useful Tags: DIV and SPAN

There are two HTML tags that look very strange. The <div> and <span> tags don't change the appearance of the content enclosed between the starting and ending tags. The following example show how they work.
Doesn't seem to do much, right? Exactly right, and that is why they are useful.

All the other HTML tags have some sort of meaning already defined them. Header tags make the enclosed content stand out, the bold tags (<b>..</b>) cause the text to be bolded.

The <div> and <span> tags do not have any pre-defined meaning, so you can make them mean things that don't exist in HTML. Columns, headers, and footers can be created using these tags. For LiveJournal, you can use the div and span tags to create side-bars, with additional commentary, information, or pictures related to your journal entry. How? Keep reading.

The tags with no meaning are useful because you give them meaning. Very zen. Now, let's see how you add meaning to these tags.

CSS in an HTML Tag

All HTML tags have a special attrobite: the style attribute. The style attribute allows you to insert CSS into a tag, and change the way it is laid out on the web page.

The value of the style attribute is one or more CSS property and value pairs. Each pair looks like the following:
property: value;
The property is the name of a CSS property. The value can be a keyword specific to the property, a unit of measurement, or a color.

The following example shows how these properties might be used:
Let's examine this example a bit better. In the first span tag, we are setting the border property. The value for the border property is "solid thin red". There is only one CSS property set in the first span tag, but there is still a semicolon (;) at then end of the value. The whole thing is enclosed by double quotes.

The second span tag sets two CSS properties. It changes the CSS property background to a value of "black". There is a semicolon that follows the value "black". The CSS property color is set to a value of "white". A semicolon ends the whole thing.

This is how CSS is added to HTML tags. Although the example uses the <span> tag, you can add CSS to any other type of HTML tag.

Simple Floats

Lets say you have a new photo to show off in your LiveJournal. It's small, so it won't annoy people, and you want it to along with a paragraph to describe it.

There are several problems with this layout:

1. There is only one line of text on the same level as the picture.
2. There's a big gap of white-space to the right of the picture.
3. There's no spacing between the text and the picture. You can see the "T" in "This Halloween..." touching the image.
4. There's no way to add a nice caption below the image, centered with respect to the picture.
5. I don't have kids, and I really don't know who those kids are. So I made stuff up.
   

We'll solve the first two problems in this section. Problems 3 and 4 will be dealt with later. Problem 5 is intractable.

Why do we have the first two problems? HTML defines that the picture is inline with the paragraph. This means that it is aligned with a line of text in the paragraph. It's like a regular text word in the paragraph. A word in a paragraph can't be in more than one line of the paragraph, so the picture can't be either.

That's not what we want, is it? We would like the paragraph to flow around the picture, much like in a newspaper. That means that the picture is not really part of the paragraph, and we should enclose the image in <div> tag:

That's not right, either. Now the picture isn't even inside the paragraph at all. Why not?

The <div> tag is a block element, and things don't normally line up with it. It is something seperate from the paragraph, and that's why it's displayed that way: it is clearly content seperate from the text.

The float CSS property can make the image "float" to the side of the paragraph, allowing the paragraph to wrap around the picture. We can make the image float to either to the "left" or to the "right". Let's make the picture float to the left:

Now we've got what we want! We still have the paragraph touching the picture, and we don't have a caption yet. Still, this is a much better layout than before, and it wasn't that difficult!

Pictures and Captions

Now, let's put a caption in the <div> tag with the image. We'd like the caption text to appear below the image. A simple way to do this is to put a <br> tag, to start a new line below the image:


We have a caption, but it still needs a little work. For one thing, the caption is left justified.
We will center the text by setting the text-align CSS property. The text-align property has 5 possible values. They are:

• "left" uses left justification.
• "right" aligns the text to the right.
• "center" centers the affected text.
• "justify" uses the default justification for the language that is being used. Most European and American languages are left-to-right, so this would be the same as left justification.
• "inherit" uses whatever justification was being previously used. It's almost as if you did not specify a text-align property.

Now that we know what the settings can be, let's make all the text centered in the <div>.

That looks very good! The caption is centered under the image.

Font Foolery

There's still more that can be done to the caption. For something like LiveJournal, it's not particularly needed. You don't need to change the font, or mess around with the font size. In fact, it's probably foolishness. But... it can look really good.

So, if you'd like to learn more about how to change the fonts using CSS, keep reading this next section. If you've had enough, you can skip this section without suffering spontaneous combustion.

To change the font and its size, we'll use the font-family and the font-size CSS properties. Finally, to bold the font, we'll use the text-weight CSS property. We will be changing these properties in the <div> tag, so that it affects everything inside it.

The font-family property allows you to change the font for text. You can specify exactly what font you want (such as Helvetica), or you can specify one of several types of fonts. There are five types of fonts under CSS:

The font-size property allows you to set the font size. There are several different measurements you can use:

• The font can be specified as a percentage of the normal font size. "100%" is the same size, "200%" is fifty-percent taller.
• You can specify exactly how big, using inches or centimeters. "1cm" is one centimeter tall. "1in" is one inch tall.
• The font can be specified as a pixel size. Pixels are the dots that make up your screen. "25px" is 25 pixels tall. Be careful, since people with high resolution monitors may not be able to read your text if you make it too small. Remember, some people may have vision problems.

For our purposes, we want to set the text-align property to "center". The font property will be set to "75% sans-serif". Finally, the font-weight property will be set to "bold" to bold the text.

To keep the style from getting overwhelmingly long, I'm not going to include these font changes in the following sections.

Backgrounds, and Putting Up Borders

Let's change the background color for the <div> tag. This will let us see exactly how much room it is taking up. We can then put a border around the image to "fence" it off from the descriptive paragraph.

The background color can be set with the background-color CSS property. CSS knows several different colors by name (such as red, blue, and green). There are 17 colors that are known. The full color list is available online. For our example, we're going to use the silver color for our background.

If you would like to use a different color, you're going to need to figure out how much red, green, and blue is in the color. This is known as the RGB color model.

Now, let's add the silver background to our LJ entry:

Now, we just need to add a border to our picture. Borders under CSS are very flexible. Each side of the box can have a different style, color, and thickness. To set them, you can use the border attribute.

For this tutorial, we are just going to set the border the same for the whole picture, and use the default border color and thickness. We still need to decide on the style for the border. There are several styles, as shown below.

After deciding which border looks the best, it needs to be added to the style. Personally, I've decided that the ridge style would be most appropriate. In the end, this decision is strictly a matter of taste.

A Float Needs Personal Space

The paragraph still touches the bordered image. There isn't any space between the image and the border, either. Both of these problems can be dealt with by using the padding and margin CSS properties.

Padding is the space between the content and the border. Margin is the spacing between the border and anything else. A clear example of this is shown below:

So, we just want to increase the

What Now?

HTML Information

The W3C defines the various standards that make up the World-Wide Web on the Internet. They are the definitive source of information.
If you'd like all the HTML tags, and exactly what they do, take a look at the Table of HTML tags. You can also look at the full HTML 4.01 specification.

Check to see if you're using real valid HTML! Different web browsers react differently to poorly made pages, so it's in your best interest to make sure that you're using correct HTML. Catch your mistakes by using the W3C's Markup Validation Service.

A quick Google search on "HTML tutorial" will net you a lot of places to look.

If you use Mozilla or Netscape 7, you can add a HTML 4.01 quick reference to your side-bar. This is incredibly handy!

CSS Information

Again, the W3C defines the standard for CSS. There's a list of all the CSS properties, as well as the full CSS 2.1 specification available.

The List-O-Matic was used to generate the nifty side navigation bar. You can't use it to generate menus for your LiveJournal, unfortunately.

Again, if you use Mozilla or Netscape 7, you can add a CSS 2.1 quick reference to your side-bar.

CSS.MaxDesign.Com.Au has some truly wonderful tutorials. They are:

• Floatutorial: Step-by-step instructions on setting up floating images and captions. Goes a bit farther than this tutorial does.
• Listutorial: Step-by-step instructions on how to build a custom horizontal or vertical menus from lists. Also contains instructions so you can replace the bullets in a list with your own image

Complex Spiral has an article which explains a CSS problem that I had when creating the floating images sections. Specifically, The images drop out of the shaded example box and into the next tutorial text, causing the next tutorial text to wrap around the image. In the article Containing Floats, it's explained why this behavior is desired, and a good way of preventing it.