Murder by Death

I've been asked in the How To BookLikes group how to change the font size (or color) in an individual post, as opposed to across your entire blog.  If you have any familiarity with HTML, this is actually easy to do, but these instructions will assume nothing.

 

Please note:  I cannot recreate the 'greater than' or 'less than' symbols in this post, so whenever I'm talking about the html tags below, please remember that they should look like the screenshots, NOT like I type them out.

 

Also, for the sake of keeping this simple, I'm only discussing the 'P' tag and font size and color.  

 

Step 1.  Create a post.   ;)

 

Step 2. Once you've written the body of your post, or at a minimum, the text you want to format, look at the tool bar across the post body and specifically that last button on the right:

 

 

When you click on this button a window is going to pop up in front of your post and show you what it looks like under its kilt, so to speak.  Raw code baby!  But really, not very raw - mostly, if your unfamiliar with html, a lot of brackets around what will be recognisable as your post.

 

 

Look for the text you want to change.  For this example, I'm looking for the next two lines:

 

Big font

 

Small font

  

Which looks like this when it's naked:

 

 

To change the format, we need to add information to the "p" tag.  We'll start with the line that says Big Font.  We're going to change it from:

so that the 'p' tag says 

p style="font-size: 26px;"    (make sure you include the brackets though)  which gives us:

 

Big font

 

and if we change it to, say:  p style="font-size: 9px;"  we'll get:

 

Small font

 

A few notes about size:

'px' = pixels.  You can also use:

'em' = well, em.  It's used by developers, mostly, but 1 em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

 

If you prefer, you can use relative values:

xx-small	Sets the font-size to an xx-small size
x-small	Sets the font-size to an extra small size
small	Sets the font-size to a small size
large	Sets the font-size to a large size
x-large	Sets the font-size to an extra large size
xx-large	Sets the font-size to an xx-large size
smaller	Sets the font-size to a smaller size than the default font size
larger	Sets the font-size to a larger size than the default font size

 

when using relative sizes the tag will look similar to this:  p style="font-size: x-large;"

 

you can also set the size as a percentage of the default font size:

p style="font-size: 200%;" will get you this:

 

200% Font Size

 

 

If I go back to the "source" button my code now looks like this:

 

 

Changing the color:

(Please note:  this tag uses the US spelling of color.  The UK spelling might be recognised by some browsers, but for predictable results, if you're outside the US, make sure you buck your spell checker and use the Yank spelling variation.)

 

Changing the color is the same process, just different wording.  So, if I want blue text the easy, peasy way to do that is to hit the source button, look for the text you want to be blue and change the 'p' tag so it says:

p style="color: blue;"   this gives me:

a blue font

 

Easy right?  Now some people might think this is limiting, only using color names.  It is, but not nearly so much as you'd think.  There are a lot of predefined colours such as:

Slate Blue

Indian Red

Olive

 

Check out this list of all the pre-defined colours currently supported by all browsers.

 

But if you want total control, you can have that.  For those that want to get down to the nitty gritty, the following are also supported:

 

Hexadecimal values:  these are the web codes for each color on the spectrum and they are a combination of 6 letters and/or numbers preceded by a hash tag.  So they look like this:

#000000  (black) or

#FFFFFF (white) or

#df2020 (red)

Hex will look like this:  p style="color: #df2020;"

 

RGB values:  red, blue, green

RGBA values:  same as RGB, but you can add a transparency value

 

RGB will look like this:  p style="color: rgb(0, 255, 0);"    (this is green)

RGBA values will look like this:  p style="color: rgba(0, 0, 255, 0.3);"   (this is blue with 30% opacity)

 

HSL and HSLA values are also supported, but that's nerdy even by my standards, so rather than bore you with it, you can read more about it here.

 

Here's what that code looks like:

 

As a grand finale, here's how you'd make your fonts both custom sized and colourful:

 

Big, Purple Font!!

 

 

A VERY IMPORTANT NOTE!!!

Make sure if you do this that you NEVER forget the semi-colon.  If you don't see the results you expect, check your syntax very carefully and make sure that semi-colon is at the end.  IF YOU USE MULTIPLE VALUES - color and size, make sure there is a semi-colon after each:  one after the size and one after the color, as in the screenshot above.

 

Have fun and remember - people have to read your posts, hopefully without eyestrain, so keep it classy!  ;-)