Linda's How-Do-I Series? How Do I Change My Font Type, Size, and Color?

Changing the font type, size and color is a relatively easy change to make in HTML and here's how you would do it.

Let's say I had an image and some text below the image that I wanted to change. Currently my image and text look like this:


COME JOIN Top Blogs By Crafters

Right now the HTML coding is as follows (minus the ***'s which are there so you can view the HTML in this article):

<***center><***a href="http://topblogsbycrafters.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/Topblogsbycraftersblogbutton125x125-1.jpg" /><***/a><***br/>COME JOIN Top Bogs  By Crafters<***/center>

Let's say that I wanted to BOLD the COME JOIN text. Here's how I would do that (minus the ***'s):

<***/strong>COME JOIN<***/strong> Top Blogs By Crafters

and here's what it would look like:

COME JOIN Top Blogs By Crafters

In the coding above(minus the ***'s which are there so you can view the HTML in this article)<***strong><***/strong> is the HTML command for BOLD.

Currently the text is using whatever font style, size, or font face has been established as the default for this website or blog or blog post. If I wanted to change the "font-family" for the "COME JOIN" to say, verdana this is how I'd do it (minus the ***'s):

<***strong><***span style=***"font-family:verdana;">COME JOIN<***/span><***/strong> Top Blogs By Crafters

and that would look like this:

COME JOIN Top Blogs By Crafters

The font family could be replaced with arial, verdana, georgia, arial black, Times New Roman, etc. Whatever font type face you want.

The font-size for the "COME JOIN" is currently at the normal default established for this website or blog. If you want this to be bigger increase the %. If you want it to be smaller decrease the %.

The font color for the "Come Join" is currently black. This could be red, blue, green, purple, maroon, black, etc. any color you want. This could also be HTML coded using a # such as color:#069 or color:#000069. It could also be coded using RGB (Red, Green, Blue) color tables in which case it would be coded as rgb(0, 0, 105).

So, let's say we want to change the above to make the "COME JOIN" font red and make it smallers (say 78%). Here's how we would do that (minus the ***'s):

<***strong><***span style=***"font-family:verdana;font-size:78%;color:red;">COME JOIN<***/span><***/strong> Top Blogs By Crafters

and that would look like this:

COME JOIN Top Blogs By Crafters

Now, let's say I want to change the font family, increase the font size using %'s and change the color to #000069 which is a navy blue but use the RGB codes. Here's how I would do that (minus the ***'s)

<***strong><***span style=***"color: rgb(0, 0, 105);font-family:arial black;font-size:110%;">COME JOIN<***/span><***/strong> Top Blogs By Crafters

and that would product this:

COME JOIN Top Blogs By Crafters

Now let's say I want to combine it all with my button picture above but want to increase the size of the font to 180%, change the font face to arial black, and change the color to maroon. Here's how I would do that (minus the ***'s):

<***center><***a href="http://topblogsbycrafters.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/Topblogsbycraftersblogbutton125x125-1.jpg" /><***/a>
<***strong><***span style=***"font-family:Arial Black;font-size:180%;color:maroon;">COME JOIN<***/span><***/strong>Top Blogs By Crafters<***/center>

and that would produce this:


COME JOIN Top Bogs By Crafters

Depending upon what software language the website or blog is using (IE: CSS, Javascript, HTML, etc.) sometimes the size is coded as size=+1 or size=+2, etc. and sometimes it is coded as size="+1" or size="+2". It can also be coded as size=100% or size="100%", etc. or even as size='+0', etc.

Also, depending upon what software language the website or blog is using the span style string can be coded as follows (minus the ***s): <***font color='navy' face='arial' size='+0'><***/font>or even as the following (minus the ***'s): <***font color=navy size=+0 style="font-family:arial black;"><***/font>.

Unfortunately it can be a little bit of trial and error to code it. If you stick to always previewing before saving then you'll be fine.

I hope this helps you with how to change the font type, size, and color.


Posted by Linda Walsh Originals- "Doll Patterns for Grown-up Girls!"