{} Changing Font Color / Size {} Basic HTML for beginners

Changing the Size of your Font:

 

- So you've got basic text on your website but its JUST not what you want. Why not change the size of your font. It can both attract and reject viewers so becareful how you use it. This tutorial will show you how to do that in very easy, basic steps!

 

Getting Started..

 

- Changing the size of your font is quite easy. It requires TWO tags. These two tags require the <> Brackets and ending brackets (tags) </>. If you do not put the ending tag, the font size will effect your entire website, changing it to that font size. Below is what the code should look like:

 

<font size=""> font size </font>

 

- As you can see the two "" are empty. That is where you will place the number ( 1, 2, 3, 4, 5 etc) inside those two quotations. So the code should look like this with the numbers inserted:

 

<font size="1"> font size 1 </font> <font size="2"> font size 2 </font>

- The Numbers increase as you can see 1 being tiny sized font all the way up to any higher number like 10 for an extremley large font.

 

* TIPS *

 

* DON'T Over use the font size. No one likes extremely large font, you can catch the attention of your viewers easily without increasing the font size to 200. Keep it consistant!

 

* DON'T overly lower the size of your font, meaning dont make it so small we need a magnifying glass just to read your website, again keep with consistancy!

 

* IF you want to make something more attractive, try using a header 1 or 2 sizes bigger then the size of your average text on your website!

 

- Ok, now onto how to change the color of your text!

 

 

Changing the Color of your Text:

 

- Changing the color of your text can have its benefits and drawbacks. Changing the color of your text can give your website more Jazz and 'color' to a plain website. Below is a small, simple tutorial to help you get started!

 

Getting Started..

 

- Changing the color of your font is the same as chaning the size except the codes is a little different. You DO need the two tags/brackets <> and </> otherwise it will effect your entire page if there is no end tag. Instead of putting size in the parameters, it will be color. Below is what the code will look like:

 

<font color=""> color </font>

 

- Simple yes? Now in the quotations is where you will be putting the NAME of the desired color you want your text to be. Like blue, yellow, green etc. Below is the code and what it should look like with the parameters filled in:

 

<font color="blue"> color blue </font>

- See simple! The color of your font will be blue. There are FAR more colors you can choose by putting in the numbers generated by a color code generator and that tutorial will come later!

 

* TIPS *

 

* DONT over use the color, yes we all like to jazz up our websites with color, but dont over use it.

 

* DONT make the color of your text the same color or close to the same color as your background make it considerably different. (some of you might be going 'duh' but i've seen it and no one likes to have to highlight a page to read it!)

 

* DONT use extremley horrific bright colors you want to just stab your eye out with a dull spoon. Keep the colors in good balance and your viewers will appreciate it!

Great beginners tutorial. Just a couple of things to add though.

 

Font Sizes

System sized fonts (1-10, as mentioned above) vary slightly in size across browsers.

Because of this, it is often better to use either a pixel specific size font or a cross-browser em font size. EM font and PX sizes are talked about in much detail in THIS TOPIC

Colour

You can also use HEX values to change you colour. It is stated in the W3C that it is better to use WEB-SAFE COLOUR VALUES, that way colours should render exactly the same across different Hardware profiles at the screen resolution at that time.

 

HEX Values look like:

 

#000000

The above value would give you a black.

 

#FFFFFF

The above value would give you a white.

 

Simply by changing the values (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), you are able to create any colour in the spectrum (that you can with 6 figures).

 

HEX is only for those that are one step further than this tutorial though.

yes, hex is much more versatile.does anyone know a good way to sort of "memorize" hex colors?there are thousands...maybe some little jpeg or something that serves as a guide.

Hex colors are actually quite simple.

The first two hex digits (hexits) represent how much red is in an image. The second two hexits represent the amount of green, and the third two hexits represent the amount of blue. Green and blue combine to form cyan, red and green combine to form yellow, and blue and red combine to form magenta. Then you can mix colors the same way you would mix two paints.

Using the <font> tag is all well and good, but it is preferable to use CSS either in external stylesheets or internal stylesheets with the <style> tag. For example of an internal stylesheet:

<style type="text/css"> p.RedLarge { color: #ff0000;			 font-size: 20pt;		   }</style>

The color attribute sets the color in the same manner as the <font color=""> tag and the font-size attribute changes the size in the same manner as the <font size=""> tag. It is a good idea to use pt for specifying font size as that is the same method used in most applications such as word, so it provides consistent translation. By specifying attributes for p.RedLarge, I have declared a class only for the <p> tag that can accessed easily and repeatedly throughout the document via <p class="RedLarge">.

~Viz

I feel #FF00000, #00FF00 and #0000FF are strong colours that should not be used in a major way. Usually dulling them out or fading them makes them more pleasing.

 

Possibly #FF6666, #009966 and #6666FF would be suitable to use in a major way, had to alter green even more because it would have been a bright lime color..

 

Though it's entirely up to you. You can test out many colors on here if you like using BBCode's color tag and using either hexidecimal representation, common web color names or rgb representation (I think).

 

The replacement for <font size="1" color="blue"> is <span style="font-size: ?; color: blue"> because I don't believe it is a block level element. Now I left out the font-size because the sizing is based on your font preference but using something like 1.1em; might be close to what you are wanting. If you've set it so you have 12pt, then it's 12pt + 1 font increment which could mean the next size is 14pt, who knows I never liked the usage of font.

 

Avoid using the font tag, it's known to increase your document size ridiculously and is deprecated since HTML 4.0. CSS can handle it far efficiently now.

 

Cheers,

 

MC

Does the setting of 12pt meaning 12pt + 1 font increment apply to CSS as well, or just the <font> tag? And if it applies to CSS as well, why does setting font-size to 12pt work like 12pt + 1 font increment?~Viz

Does the setting of 12pt meaning 12pt + 1 font increment apply to CSS as well, or just the <font> tag? And if it applies to CSS as well, why does setting font-size to 12pt work like 12pt + 1 font increment?
~Viz

No the +1 only applies to the font tag. Which gets it's initial size from the browser, then the size="1' means to +1 on it. The values are from -6 to +6, where you do not need to prefix the positive numbers, this is relative sizing for the browser, absolute sizing is also accepted by the size attribute so you can specify size="12pt" in the font tag.

It's hard figuring out the exact (inc|dec)remental sizes used in the font tag but you have 13 alterations available to you, which either increases/decreases the browser's set font size, being proprietary and not suitable for international use, it's probably best not trying to understand it and just make do with what we do have in CSS and how we can use it to achieve our needed results.

Depending on what browsers are capable of, I believe <font> was introduced by Netscape while some of the attributes were introduced by Microsoft. Their intended use was possibly not well thought out and caused a lot of confusion. I'm not sure whether all browsers understand it properly which may suggest why a browser set at 12pt font-size using <font size="1"> may actually ignore the size attribute or misinterpret it's meaning leaving it still represent ing the browsers default of only 12pt, which when styling with CSS will make it appear as 12pt without looking any different to the <font> tag.

I could run my own tests on the actual behaviour for it, but I don't want to increase people's awareness of this tag, rather let it die it's deprecated life and start standardising.

Cheers,

MC

I'm just beginning to use CSS and come to find out that many things are different when it comes to setting things up on a page. It's like starting all over again. When I first went to do CSS, I started typing it out, set out the font color for text and links, background and all that jazz. Come to find out it didn't work, because everthing had to be written differently. Boy, I've got alot to learn!

But on most browsers I know (older versions) I could change the fonts and sizes of <font size=""> numbers from -5 to 5, I could set my own sizes in px. I still can do that on IBrowse and AWeb. Now, as I see I can't change that, only the H1 to H6 and some more stuff. But this is good in my opinion, the font tag is deprecated and it is better to avid using it, unless you want to create a version for old browsers which doesn't fully support CSS or doesn't support it at all or even for browsers which has CSS disabled for don't know what kind of reasons.But changing font sizes on your browsers settings was a good idea, because some people were browsing with low resolutions some with high and making one standard would be stupid if you couldn't change anything in the preferences.

No the +1 only applies to the font tag. Which gets it's initial size from the browser, then the size="1' means to +1 on it. The values are from -6 to +6, where you do not need to prefix the positive numbers, this is relative sizing for the browser, absolute sizing is also accepted by the size attribute so you can specify size="12pt" in the font tag.

Good to know. I've stopped using the <font> tag and as far as I can tell deprecated tags since I've been comfining all my html coding to XHTML 1.0 Strict, and I'm know making the switch to XHTML 1.1. So I've been using CSS. I was just worried that CSS would act the same way and cause me problems.

Spekaing of CSS, what's the status update on CSS 3. I know that 2.1 is the current working draft, but I thought I saw a CSS 3 module made working draft. Anyone know where I can find the roadmap for CSS 3 as all I can find is the roadmap for 2.1.

~Viz

With HTML you have limited control over the size of your font. In the most browsers you really only can go from size 1 to 7. I really needed a size between 1 and 2, maybe a size nine on your Microsoft Word. I found the solution in CSS. Not only can you control and change the format of your all your webpages with CSS, you can also control the size of your font more accurately with pts or pc (picas). All you have to do is insert a code in your header section of the html code. Here is a great reference website for learning CSS - http://www.w3schools.com/

 

As for font color I found a great color guide online. Just bookmark it and use it whenever you need - http://forums.xisto.com/no_longer_exists/

I don't know if anyone has replied to the 'shortening of Hex values' yet, but there is an easy way.For values that are first place repetitive (e.g. #ffffff), then simply put the first 3 values (#fff).If you miss a value from the 6 figure, then it will automatically be given 0.

I don't know if anyone has replied to the 'shortening of Hex values' yet, but there is an easy way.
For values that are first place repetitive (e.g. #ffffff), then simply put the first 3 values (#fff).

If you miss a value from the 6 figure, then it will automatically be given 0.

Yeah, knew about this, but I prefer to change all the #fff to #ffffff, because it is much better for me or maybe even other people to edit or check the colour, I don't know if graphics software like Gimp accepts #fff but it can of course easily be changed.. Besides, you have a much less colours to choose from.. but using #fff and #ffffff together you can save some bytes.

Very nice tutorial for those beginning, but may I point out something? The web is becoming more and more CSS based. It would be nice to see some more CSS tutorials as CSS is more flexible than the font tags.Back when I was starting, this tutorial would have come in handy! I learned from a book for kids and this girl, Elila or something like that, was building her own website. Hehehe... wow have times changed. The thing should be archived as like HTML 1.0 Guide... well, actually, I have no idea how old the book is. I think I got it in 3rd grade and didn't do anything with it until the summer of my 8th grade year because I was bored! lol[N]F

Using <font> is not proper HTML 4.01/XHTML 1!
<font> is HTML 3.2, which is quite old.

Use

<span style="color:aqua">Aqua text here</span>

for compatibility with most browsers and standards compliancy.

A whole list of CSS can be found at W3Schools and Web Development Lessons.