Advanced HTML (and CSS) for Red Staters
A continuation of an earlier piece.
There comes a time in the use of HTML that you can't do any more using basic logical markup. To do the fancy one-off tricks, you have to use one-off style instructions.
And rather than bore people with any more introduction, I'll get right to it. To do a pullout quote as featured in this diary, do this:
<div style="float: right; width: 50%; font-size: larger; margin: 1em">Text to be pulled out here
Note that you can also float an image on the side, like this:
<div style="float: left; margin: 1em"><img src="Image location here
" alt="Image description here
Just make sure the image isn't too wide to make it work nicely.
The key here is the use of Cascading Style Sheets instructions (that bit in the quotes after
style=) to do things that aren't done automatically. As long as you separate the instructions in the quotes with semicolons, as done in my examples, the sky's the limit as to how you can customize things. It doesn't end with the pullouts, either. You can make a sarcastic comment strike out some text like so:
<span style="text-decoration: line-through">Text to be struck out here
Other CSS instructions include
border: 1px solid red; obviously more useful for paragraphs and pullouts than ordinary text spans), underlines (
text-decoration: underline), colors (
color: white; background-color: black); subscript, superscript, and font sizes (
font-size: smaller; vertical-align: sub (or
super in place of
These are tools that can be very unpleasant to read if used badly. And worse, if your HTML messes up, a slip-up using these style instructions can make the rest of the page illegible. Please preview and test in a standards-compliant piece of software like Firefox if you're unsure of whether you did things right!
Update: A note on colors: you're not constrained to basic names like
blue. Instead of using those words, you can use any 24-bit RGB color code by writing it in the format
#RRGGBB, where RR, GG, and BB are hexadecimal values.
If that went over your head, have no fear. Just use your favorite paint program to pick an arbitrary color, and chances are it'll be able to give you the HTML/CSS code for it. I know Gimp does.