Advanced HTML (and CSS) for Red Staters
By Neil Stevens Comments (14) / Email this page » / Leave a comment »
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</div>
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"/></div>
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</span>
Other CSS instructions include borders (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 sub)).
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 red or 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.
...the mother of all black truffles.
Its great to know what can be done without messing up the board.
As someone who frequently forgets to do this REMEMBER PREVIEW POSTS WHEN DOING THESE THINGS
I can't count the number of blogs I have left Italicized or bolded by accident.
I'll need to find this again.
A Constitution of Government once changed from Freedom, can never be restored. Liberty, once lost, is lost forever. -John Adams
This is a *great* help, thanks for putting it together. We're sure to incorporate it into a document for new (and old) users.
Let me know if you need me to clean up or elaborate on anything for such a document.
--
Run like Reagan!
For finishing the job, especially. And folks, let me say now that I'm a bit of a fuddyduddy about this, but Neil has it right using CSS instead of older, deprecated tags. Part of the reason I'm a fuddyduddy is that when CSS was in its infancy, it was more trouble than it was worth in a lot of cases -- because all of the major browsers rendered parts of it differently (or not at all.)
I'm not dipping my toes in the browser wars except to say that those days are largely in the past, and CSS is the way to do it correctly now.
And like any other area, when it comes to special effects, use them with taste, prudence and in moderation. With power comes responsibility. ;)
The best quick-intro I have found to CSS is here.
Using the CSS style tag, you can override the default treatment for a given element. For instance, my signature starts with CSS code to redefine what an HTML "horizontal rule" looks like:
- <STYLE> HR {height:2px; width:30%; margin: 0px 0px 0px 0px;}</STYLE><hr>Evil men ...
But since on Redstate our signatures are included as the default comment text, there is no reason not to put your own favorite CSS code in your signature and habitually type your comments between whatever code you insert and whatever sage saying with which you bless your readers.
To blockquote something without the giant quote mark appearing, the lazy way is to do as I did above and use <ul><li>offset text</li></ul>. The unlazy way is to redefine <blockquote>.
To get regular bullets for an unordered list, you can override the way the <ul> tag looks. The property list-style-type: allows you to define the style of the bullets or numbers of list items.
<ul style="left-margin:10%; list-style-type: disc">
<li> first point
</li><li> second point
</li></ul>
The following options are available for list-style-type::
- disc
- circle
- square
- none (no bullet, the Redstate default)
Similarly, outlines ("ordered lists") can have Roman numerals, Greek letters, etc. <ol> tag:
- decimal (1.,2.,3.,4. etc.)
- lower-roman (i.,ii.,iii.,iv. etc.)
- upper-roman (I.,II.,III.,IV. etc.)
- lower-alpha (a.,b.,c.,d. etc.)
- upper-alpha (A.,B.,C.,D. etc.)
- lower-latin (a.,b.,c.,d. etc. including extended Latin character set)
- upper-latin (A.,B.,C.,D. etc. including extended Latin character set)
- none (no numbers)
<STYLE type="text/css"> OL.withroman { list-style-type: lower-roman }
</STYLE>
<OL class="withroman">
<LI> Step one ...
<LI> Step two ...
</OL>
A truly dedicated Redstate hacker would download the Redstate CSS files:
http://www.redstate.com/misc/drupal.css
http://www.redstate.com/modules/yshout/css/yshout.css
http://www.redstate.com/modules/devel/devel.css
http://www.redstate.com/themes/redstate/style.css
http://www.redstate.com/modules/recommended_nodes/recommended_nodes.css
... and make various versions them as themes on a web server somewhere, then use whichever of them seems most appropriate. You could have a "Moby accusation" theme, a "You're a dolt for disagreeing with me" theme, or perhaps even a "5-nt" theme. But that would take precious time away from toadying jsteele.
<style type="text/css">
<!--
/* change the background color for my blog entries */
.socrates-blog { background-color:#FF0FFF; font-family:Times,serif; }
/* change the font and margins for my comments */
.socrates-comment { font-family:Arial,sans-serif; color:blue;
border-bottom-style:solid;
margin:0px;
margin-bottom:16px; }
-->
</style>
Then a blog entry would begin:
<div class="socrates-blog">Liberals are not like us, and here's an essay on why.</div>
And comments would go like:
<div class="socrates-comment">5, jsteele -- highly recommended. :-)</div>
If you do any fancy CSS and start changing defaults, etc., please bracket your text with <span></span> (or div /div), and name your classes after your username. That will keep you from inadvertently overriding the defaults. And the preview button is your friend -- at least if you want folks to recommend your posts!
Nitpicks: Don't use capitals for STYLE, OL, UL, LI, or anything like that. Old, old HTML versions supported it fine, but that stuff is going away. And when you use a horizontal rule, write it <hr/>
These are just nitpicks though. That's an interesting idea overall.
--
Run like Reagan!
Nitpicks fully accepted. Old habits die like horror-flick villains: you think you have them killed, and then ...
Evil men hide from the truth, but good men stand upon it.
But that would take precious time away from toadying jsteele.
John
--------
Ethnic humor is part of human nature. The Dutch tell Belgian jokes. The Belgians tell French jokes. The French tell English jokes. The English tell Irish jokes. The Irish tell Irish jokes.
we simple peons are called to speak TRUTH to. Get used to it. Get over it.
_______________________________
If "pro" is the opposite of "con", what is the opposite of "progress"?
Whenever I want to do something with HTML I just go look for someone else's page that does it and copy the source. Tech-plagiarism is a wonderful thing. Unless of course there is code involved. Then you're screwed.
"There are those who look at things the way they are, and ask why... I dream of things that never were and ask why not." George Bernard Shaw
I was looking for the earlier more basic one just this morning and you heard my psychic scream.