Occasionally, I want more control over how certain parts of a weblog entry look instead of the default paragraph tag that Movable Type uses. Sometimes I need a paragraph to be centered, or sometimes a footnote. And what about controlling images? (Note, the rest of this article assumes that you understand a little about CSS, a little about HTML, and how to modify Movable Type templates.)
To start, here is my basic paragraph and formatting tag styles:
p {
font: normal 90% georgia,serif;
line-height: 125%;
margin: 0.75em 0;
}
blockquote {
font: normal 90% georgia,serif;
line-height: 112%;
}
ol, ul {
font: normal 90% georgia,serif;
margin-top: 0.5em;
margin-bottom: 0.75em;
}
li p {
font-size: 100%;
line-height: 100%;
margin: 0.25em 0;
}
To learn more about styling list tags, i.e. <ol> and <ul>, read “Consistent List Indentation” by Eric Meyer. Note, the li p style is needed to avoid applying the font size of 90% twice, that is once for the <ol> or <ul> container tag, and once more for the <p> tag.
To control special formatting options within the bounds of a weblog entry, I have setup the following styles. In order to use these styles (and blockquotes and lists) within Movable Type, you have to set the Text Formatting option to none on an Edit Entry page, and use the standard paragraph tags, <p> and </p> around every paragraph.
p.lyrics {margin-left: 3em;}
p.center {text-align: center;}
.footnote {font-size: 80%;}
img {border-width: 0;}
.b1 {border: 1px solid navy;}
.b2 {border: 2px solid navy;}
.imgright, .imgleft {
display: block;
border-width: 0;
font: normal 75% verdana,sans-serif;
text-align: center;
}
.imgright {
float: right;
margin: 0 0 0.5em 1em;
}
.imgleft {
float: left;
margin: 0 1em 0.5em 0;
}
p.center img {margin: 0 20px;}
.null a,
.null a:visited,
.null a:hover,
.null a:active,
.null a:visited:hover {
border-width: 0;
background: transparent;
text-decoration: none
}
The paragraph class lyrics is used to modify only the left margin of a paragraph to make it look indented. A <blockquote> tag could also be used for indenting, but the blockquote tag also indents the right side. The following code, <p class="lyrics">text</p>, generates this:
Roses are red,
Violets are blue…
Note, the <br> tag is used as a new line for lyrics instead of a brand new paragraph tag.
The paragraph class center is used to center a paragraph. The following code, <p class="center">text</p>, generates this:
Hello world
The generic class footnote shrinks the font size. This class can also be used with other tags like div and span. The following code, <p class="footnote">text</p>, generates this:
Note: Footnotes are additional pieces of information that should stand apart from the main body of text.
The power of CSS lets us combine classes. The following code, <p class="center footnote">text</p>, generates this:
Centered, footnote paragraph.
Now for controlling images within a weblog entry. I have set the default style for images to have no border. Note, in the code examples below, the attribute values between the empty quotes have been left out in an attempt to save space. I do not use the border attribute within any <img> tag because XHTML strict does not allow them. Besides, I like the control CSS gives me in formatting borders. I also prefer the consistency over many weblog entries.
For a plain image float, like the one used above, for either to the left or to the right, use the following code:
<img class="imgright" alt="" title="" src="" width="" height="">
For a linked image with a float, either to the left or right, use:
<div class="imgleft null"><a href=""><img alt="" title="" src="" width="" height=""></a></div>
Note, a <div> tag is used as a container. The null class nullifies any anchor styling within the container. Without this class, if any borders or backgrounds have been assigned to your anchor tags, they will show up around the image.
For one or more plain images centered within a paragraph, use:
<p class="center"><img alt="" title="" src="" width="" height=""></p>
Note, left and right margins for images within a centered paragraph are set to 20px to avoid crowding the images together.
Need a border around an image, use either b1 or b2 classes with the <img> tag.
<p class="center"><img class="b2" alt="" title="" src="" width="" height=""></p>
Need a border around a linked image, use the null class with either b1 or b2:
<p class="center null"><img class="b2" alt="" title="" src="" width="" height=""></p>
Oswald
One more, need a subtitle for an image? Try this code,
<div class="imgright">
<img alt="" title="" src="" width="" height="">
<br>text</div>
The power of CSS lets us style anything the way we want. I know there are some Movable Type plugins available that may help in controlling HTML tags, but I like the control of hand coding the tags myself. This small set of CSS styles, matched up with a minimum of HTML tags, lets me do nearly everything I need within a weblog entry.
Happy coding…
Note, I am currently publishing this weblog under XHTML 1.0 Transitional.