Text Enhancement using HTML

Real simple text specification of font, size and color.

I offer this characterization about the suggestions offered here – while they should produce the desired results, there’s no pretense of elegance.  Perhaps I’ll call them “caveman code”.  I have long given up the arduous study of such subjects, but I’ve got scraps I’m happy to share.

There are several ways to control the font, size & color of your posted text.

A) The WP (Word Press) Visual Editor gives you limited control over some of these attributes via the editor buttons (as you probably already know).

B) More broad and precise control can be had using the WP HTML Editor (examples to follow).  You can use your existing blog to try these out (in “preview mode” first, while you’re learning), OR better, create a new private blog (free) using the same WP “theme” to practice without risk to your real public blog.  OK?

Here are the two template pieces of HTML code you can use, followed by some additional comments.

1) Paragraph style (has a blank line before and after the text)

<p style=”font:20px Arial;color:#000000;”>text</p>

2) Span style (inserts text format definitions within any continuous body of text, ie. change any select few words of text within a sentence, etc.)

<span style=”font:20px Arial;color:#000000;”>text</span>

3) Type in the two lines of HTML code templates above into your own blog editor practice page.  All the punctuation must be precisely as shown above.
DO NOT “COPY & PASTE” THESE TWO LINES ABOVE FROM THIS POSTING.

here are the parts you can change:

4) About fonts (font:20px Arial)  Try out using some different fonts.  Font names like Times New Roman (spaces inside name) must be written with single-quote-marks surrounding them!  Keep in mind that not all browsers may recognize all font names, so it is best to stay with the more common types.
Here’s a couple references:

Windows & Mac Fonts
Wikipedia about HTML Fonts

5) About size (font:20px)  Substitute different values here to change the size of your text (this is an absolute type of size definition expressed in pixels).  Alternately you might (instead of “20px”) enter:

number%    where number is 100, plus or minus, as a percentage of the default (normal) posted size, ie. 70% (smaller) or 170% (larger) for example.  This is considered a ‘better’ way to specify the size.

6) About colors (color:#000000)  Try out different color HEX code numbers (again, different browsers may not precisely recognize all possible colors).

Color references (use the 6-digit HEX values, no spaces):

w3school colornames
Wikipedia about Web Colors

7) About text.  Double-click the word “text” in the templates given here, then just type in the actual (poem) text you want for your posting.

Some additional notes about using HTML for posting poems:

(1) Both codes (P and SPAN) will continue in effect until the first blank line in your text; then they will cease to affect the text.  Because poems are loaded with blank lines, that could mean re-entering the code over and over again, but there is an easy way past this problem!

When you come to a “blank line” enter this:    (&)nbsp;
Leave out the brackets used here.  This is the HTML code for one “blank-space” which is different from a blank-line, so the P or SPAN code will continue in effect.  Sneaky huh!

(2) Using “cookie cutter” code, making it easy!
It would be a lot (too much) work to keep re-typing in these lines of HTML code every time you wanted to change something again, so one simple solution is to make a ‘cheat sheet’ of HTML codes you use frequently.  Then just copy & paste from that sheet into your new text posting and change the bits you want to alter.  You could keep these “templates” in a text-editor page, in a “dummy” blog page (unpublished), or even copy from within your own current blog editing page.

C) WP Font-Kit & CSS Editor
Word Press offers (for a fee) access to the actual CSS (Cascading Style Sheets) for your specific blog “theme”.  CSS provides broader control over the blog format, more than only your individual posts (default text fonts & size, color & format of links, background color, sidebar captions, etc.).  CSS however is not for the faint of heart, requires more serious knowledge about codes, and even so, some considerable trial & error process to produce the desired results.  But fair to say here, there is something more on the horizon should that desire arrive.

I hope this brief summary is of some assistance for you in producing the text formats you want to see on your blog.  There is certainly a lot more to HTML than mentioned here, yet there’s a lot you can do with just these two lines of code.
Best advice – take your time, practice some, and most of all – have fun!

Any questions?  Please just ask.