First of all, why would anyone want to use HTML coding? The answer is simple. Have you ever wanted to design a webpage/website, or anything to that effect, but couldn't for the life of you figure out how?

A website's content is mainly derived from HTML coding. From text to fonts to hyperlinks, all of it can be done with HTML. So without further ado, here is a quick tutorial.

Tip: When you happen to see tips like this one, read them carefully. If you don't it might not be very easy to understand.

IMPORTANT!!: Since using a code with brackets >, and < actually does something in this document, I'll use these: {, and}. In this Tutorial, please replace all { and } characters with > and < in your HTML documents.

HyperLinks: links anchored in a certain word or selection that when clicked take you to another webpage or site. An example, and the code used is: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"}Stuff{/a} The link here would appear as: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"}Stuff{/a}

If you happen to want the link to take them to the webpage/site on another window, as to leave yours up, use the target command, target="_blank" With the target=blank command, the HTML code should look similar to this: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"target="_blank"}Stuff{/a} There are two different types of URLs you can use to link to various pages, absolute and relative.

Absolute URLs

Absolute URLs include the complete path to the file’s location, including the names of all the directories and subdirectories.

Let’s say you have a folder inside your web site's root directory called "music" and you want to link to a page inside the "music" folder called brahms.html. The absolute URL is:{a href="http://www.yoursite.com/music/brahms.html"}Brahms{/a}

Relative URLs

If you don’t want to ever have to worry about going back and editing your hyperlinks if your site structure changes then relative URLs are the way to go. Relative URLs are more or less like shorthand that tells the browser to go backward one or more directories to find the file.

Let's say you're on the page we referenced above, brahms.html (located in the "music" folder) and you want to link back to the home page: (http://www.yoursite.com/index.html) Using a relative URL, you would tell the browser to go back 1 directory by using the dot-slash method. {a href="../index.html"}Home{/a}

The two dots followed by a slash instructs the browser to go up 1 more level to get to the main (root) directory.

Changing the Hyperlink Colors

The default color for hyperlinks on an HTML page is blue, but you can change it to whatever color you'd like by using the link code inside the {body} tag. Here's an example: {body link="green" vlink="yellow" alink="purple"}

In the above example, hyperlinks will be green, links that have already been visited will be yellow and active links will be purple. (An active link is one that has just been clicked, so for a split second the link will change colors as the mouse activates it).

Creating Email Links

Creating email links are just as simple. All you need is the "mailto" function to get this to work properly: {a href="mailto:youraddress@email.com"}Email Me{/a}

Anchor Links

If you want to create a link that will take the visitor to another section of the same page (rather than a new page or site), then you can create an anchor link. There are two steps to this process:

1) First, go to the place in your HTML code where you want the anchor to go. This is the spot on the page that the browser will move to when a person clicks on the link. Insert the code {a name="name1"}This is the Text Where the Anchor Will Land{/a} "name1" is just the name of the anchor I chose. You can all it anything you want.

2) Now to link to that section of the page, use the hyperlink code: {a href="#name1"}click here{/a}

And that's it for Hyperlinking!

First of all, why would anyone want to use HTML coding? The answer is simple. Have you ever wanted to design a webpage/website, or anything to that effect, but couldn't for the life of you figure out how?

A website's content is mainly derived from HTML coding. From text to fonts to hyperlinks, all of it can be done with HTML. So without further ado, here is a quick tutorial.

TIP: When you happen to see tips like this one, read them carefully. If you don't it might not be very easy to understand.

IMPORTANT!!: Since using a code with brackets >, and < actually does something in this document, I'll use these: {, and}. In this Tutorial, please replace all > and < characters with { and { in your HTML documents.

Basic Structure of an HTML Page:

To start of an HTML webpage, put in the {html} tag. This tells your web browser where the HTML starts. This tag is optional, and it isn't necessary to get your page to show. The second line would be {head}, to start the heading, which includes title, the description (read by some search engines), and the keywords (the main keywords of the page).

The next tag would be the {title} tag. This is the title of the page, and what you'll see at the top of the web browser. The {meta name} information is also somewhat useful for some search engines. They may use whatever is in your "description" tag to describe your site. Others may randomly take an excerpt of the {body} of your page for a description of your site. The keyword tag may also be helpful with your ranking in some engines. Insert three or four of your main keywords or keyword phrases separated by commas here. Then close the head section with {/head}

Next comes {body}. This should include the main body of your page. After typing your main body, close it with {/body> Then close the HTML with {/html}.

Here’s what it should look like when complete:

{html}

{head}

{title} Title that is displayed at the top of your web browser and also used as the title by many search engines{/title}

{meta name="description" content="10-15 word description of your site read by some search engines">

{/head}

{body}

{p align="left"}

Website body paragraph text, you write stuff here. {a href="http://www.yourwebsite.com/the/rest/of/your/link.php{/a}.

{/p}

{/body}

{/html}

This may be a little sparse, but there's more in the next tutorial.

*Tutorial III will cover Basic Hyperlinking*

A website's content is mainly derived from HTML coding. From text to fonts to hyperlinks, all of it can be done with HTML. So without further ado, here is a quick tutorial.

TIP: When you happen to see tips like this one, read them carefully. If you don't it might not be very easy to understand.

IMPORTANT!!: Since using a code with brackets >, and < actually does something in this document, I'll use these: {, and}. In this Tutorial, please replace all { and } characters with > and < in your HTML documents.

HTML Basics

Before I get started, you should know that HTML code almost always uses beginning and ending tags. These tags surround the text that will be affected by the code. A beginning tag is almost always surrounded by brackets, ex. {B} A closure tag is surrounded by brackets, but has a forward slash right after the beginning bracket, ex. {/B} A beginning tag, as the name suggests, goes before the selection you wish to apply the command to. The closure bracket, therefore, goes at the end of the selection.

An example would be: Say you want to bold a section of a sentence, you'd use for the beginning tag, and for the ending tag. Let's say you want to bold the words Good day! in the sentence below. You're HTML code would be: {B}Good day!{/B} My name is Greg! The result would be: Good day! My name is Greg! Only the word "Hello!" is bolded because the tags surround that word. If you wanted to bold the entire sentence, then you would have put the closure tag, , after the word “Greg”. Be sure to always include your closing tag because if you forget, your entire page will be affected by the tag.

You can apply this same idea to many other HTML codes. Here are some of the basics...

Basic Font Tags

Bold: {B} and {/B}

Underline: {u} and {/u}

Italics: {i} and {/i}

Change text color: {font color="red"} The ending for any font tag is {/font}

If you want more colors, you can also use hex codes.

Basic Alignment Tags

Left aligning text: {p align="left"} Just use {/p} for the closing tag

Right aligning text: {p align="right"} Just use {/p} for the closing tag

Indentation: To indent your text about an inch to the right, simply use the open and closing {blockquote} tag around the text you want to indent. 

{blockquote} -Indented text- {/blockquote}

TIP: In another attempt to have the tutorial come out in a comprehendable manner, please replace all * in the chart below with & in your own HTML documents.

Special Tags

 *The next Tutorial will cover the Basic Structure of an HTML Page*

The information superhighway

My first computer was a VIC-20, by Commodore. This was maybe in 1983? It was just a clunky keyboard that interfaced with my mom's floor model television via a formidable-looking "alligator clip" that visually was more suited for automotive jumper cables.

When attached to the two screws on the back of the television set marked “VHF”, my computer occasionally had a "color monitor" of just 16 colors.

Despite her initial protestations and concerns of this hybrid set up "…possibly damaging the television", I got fare time with the device. I was quite satisfied with my so-called computer. I could not envision much beyond the mystery of this machine and the language it spoke. I could play pre-packaged games that came as a small square "cassettes" that plugged into the back of the keyboard.

A game called Battle Chess was my all-time favorite, especially when I added a "joystick" to enhance my ability to interact with the Chess characters. I usually lost the game, but it was fun anyway

I learned a bit of B.A.S.I.C. language in which I could make a small ASCII "stick-man" character on-screen do jumping jack exercises. Faster or slower this character would jump, based upon the number of times I coded the "For/Next" loop to execute before the next "If/Then' statement. This was about the extent of my "programming abilities"

In the very early 90's I attended a brief (10-week long?) one-night-per-week Adult Education Course for Programming in BASIC. I did okay with it, I sort-of "got it". I passed the class near the top. But I could only see one thing for the future...-yeah, I'd need a better computer.

Say, isn't that one of those new-fangled MOS 6510 processors?

I next bought a used Commodore_64 computer, which was okay for about a year. I knew of a few "bulletin boards" and something called "telnet, and could possibly have connected to and send/read messages.

In 1985 or "86maybe, I "upgraded" to a new ATARI 130XE but without a modem I still could not access anything beyond pre-canned programs on mini-cassette. I wanted to exchange a few e-notes with friends met at science fiction conventions whom spoke of this "telnet" thing, but my system without peripheral upgrades would not support it. I did however, very much enjoy a "game" called “The Halley Project ” and while I never attained the end of the game and subsequently found the hidden so-called "Easter Egg" Extended Game Play that was said to exist, I much enjoyed this game.

The "IBM-PC" was the golden standard, so next came my first "real" computer, a TANDY 1000 RLX computer by Radio Shack.

-Yeah, -mistakes come in threes I'm afraid…*grin*. Enough said!

While I was doing this, the Internet as we know it was quite ready to be born. There might have been quite a few telnet bulletin boards out there by now, linking together, encompassing larger areas of lay-users. The emergence of "backbone" companies such as America Online and CompuServe brought "internet" to the masses. Physical landlines were being strung by companies like Sprint, which were to be integral to the Internet boom about to emerge. From what had begun as a Professionals-users-only Old-boys club, emerged something the World had never expected, The World Wide Web. A "critical mass" of would-be users had been achieved, the ribbon was unceremoniously cut and a Information Superhighway we call "The Internet" exploded forth as many thousands of users joined in that first year alone with exponentially more every year since.

I had joined the emerging "internet" circa early 1994 with a program called PC_LINK" (not to be confused with a business that was later created in the late 1990s with the same name) on my new computer with a "i186" and 14.4kbs modem. I found a way to tweak this from the bench-tester's 14.4-baud speed to 19.2-baud. This was still quite slow, really.

An aftermarket modem upgrade to a 28.8-kbs helped. A few years later, I had to upgrade yet again, to a COMPAQ Presario with "i586" with the optimum dial-up standard, the 56-kbs modem. And still, the Internet demanded more and more of computers. Today I use a used-to-be-HP with AMD-K6, tricked-out with added-on peripherals, and can barely keep up with the changes!

Still, my biggest personal pet peeve was that Personal Web-Pages take so long to load on dial-up! Why? I learned that there are "tricks" a conscientious Web-page programmer can do to assist users of "slower" computers. -Better coding.

Road signs to Guide You

Codified thought... I wanted to learn even just a little bit of how to write HTML. How to change the color of my text posted upon a Forum, or how to use a different font or emphasis... -That would do. But learning how to write Web Pages seemed impossible! On "forums" I would edit my replies to include little things gleaned like colored text, altered text sizes, and other styles of font. I wrote down what worked, what it does. I needed the skills to write my own pages.

So, how about writing your own code?

It was about seven years ago I began to learn through online resources and later, signed up via Internet classes with Distance Education Course and made it through several courses on "Introduction to HTML" and "Web-Page Design w/ multi-Media". It was difficult as all new things are. I learned some basic HTML, tried it and quickly saw how sometimes what I wrote was skewed on one or the other of the two main browsers, Internet Explorer and Netscape! This is terrible! What did I do incorrectly? Was there someplace I could "test" my code for accuracy and compatibility? (YES! W3C Validator) -These course helped me to create web-pages... but I did not learn right away of resources like this, or where to look for pre-written (FREE would be preferred!) things such as ready-to-use code snippets, libraries of open-source images such as *GIFs, sound files, plug-ins and upgrades etc., to add value and appeal to my pages.

I learned about the history of the Internet, it's intricacies, some potential dangers too. The direction it is heading, how "netizens" are using it today and, more importantly for me, how to do intelligent searches that lead to meaningful finds. As a future Web Page Designer seeking to increase his personal web-presence, this resource alone was worth the time invested in these courses.

I have looked for and found "code validator" sites, which allows web-coders to paste their live URL's (or actual code into) to be validated for errors and/or warnings. You get a nearly immediate line-by-line review of your tested code, cited are any errors, conflicts, deprecated (discontinued/unsupported) tags, missing or improperly closed tags, bad/incorrect syntax and any other "unrecognized" errors.

Using this course, I have found other useful, fun sources of code, games, freebie utilities, plug-ins and archived knowledge that I *knew* must have existed, somewhere. Resources such as StrangeBanana that programmatically generates a new, unique X-HTML sheet for you, right before your eyes! You can "renew" the image with one click, to get one that you like! Free for you to take, follow their included instructions, and make it your own. And I located a slick collection of links to "opt out of site cookies", like (website no longer exists). Most sites do let you "opt out" of receiving their cookies. -But they usually do not advertise this openly, so most people don't even know this. This opt-out site has collected a listing of the most prolific cookie-givers, and shows you where to "opt-out" of those ads/tracking networks, by "blocking" future cookies from them with a "stale cookie", one that the visited site cannot "overwrite" or otherwise replace.

I feel more confident in searching for resources since having undertaken this introductory course those years ago. A course that I could have availed myself of years sooner had I know they existed and was aware of the benefits they bring. This could have saved myself many hours of fruitless searches with non-relevant returns. In earlier courses and in my own reading I have learned how to make my Web-page code degrade and still be fairly compatible and forward-looking with most current generation browsers. Recommended reading is Elizabeth Castro's HTML For the World Wide Web. I started with the “Fourth Edition” of her excellent book. The "Fifth Edition" of this title is highly recommended. -Adding X-HTML and CSS (“Cascading Style Sheets”.) the Fifth Edition cited above is an indispensable desk side reference manual that no Web Page Builder should be without

The ten CSS tricks that you may not know but should know are quite simple to learn.

1. The first trick is the CSS font shorthand rule. Instead of using lines after lines of text commands you can use the CSS font shorthand rule to get the exact same results. Simply write font: lem/1.5em bold italic small-caps verdana, serif.
2. The second CSS trick is using tow classes together. You can actually use two or as many classes as you want together when writing CSS.
3. The third trick is to use CSS border default value. When writing a border rule you do not have to specify the color, style, width, and other details in order. You can simply write the border for a quick easy result.
4. The fourth clever CSS trick is to use the important command. Using !important after a command will instantly make the command take precedence over other commands.
5. The fifth CSS trick is to use the replace image technique.
6. The sixth CSS trick is to use a CSS box model hack alternative. This is used to eliminate any problem in pre-IE 6 browsers in which padding and border is involved in the width of an element.
7. The seventh CSS trick is to center aligning using a block element. You can use a specific CSS command to fix width layout of any design.
8. The eighth trick is to vertically align with CSS. The trick involves defining the line height to be the same as the height of the box in the CSS.
9. The ninth CSS trick is using CSS positoning within a container. It is possible to position an object within a container for a cool design effect.
10. The tenth CSS trick that you may not know is background color running to the screen bottom. You can assign the column color to the appropriate CSS rule to give a desired effect.
    

Display

• Removes from page and moves everything up
• Can't grab it after deletion
• Easier To Type

Visibility

• Removes from page but keeps everything in the same place
• Can still grab it's values and such after deletion
• More Characters to type and people who can't spell may get it wrong

</p> <p>.display {</p> <p>display: none;</p> <p>}</p> <p>.visibility {</p> <p>visibility: hidden;</p> <p>}</p> <p>

In this article, we will first see how we can define and describe a layout by using CSS instead of tables, before we take a look on the modern way to implement dropdown menus with almost no JavaScript what so ever.

Sketch

First of all, you need to know how the layout of the page will be. Draw it down on paper. A rough sketch is more than sufficient. This sketch must be clear on what the different sections of the page is. For example, a common layout can consist of header, navigation, main content, a small column for ads or list content, and footer.

In my sketch I've chosen a static width, centered layout with the mentioned sections where I have a misc content column on the right and a horizontal navigation bar. It’s nothing fancy, but clean and clear.

Structure

Let’s see how we structure the above layout with (X)HTML.

<html>
(…)
<body>

<div id="page_wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="right_column"></div>
<div id="border_wrapper">
<div id="content"></div>
</div>
<div id="footer"></div>
</div>

</body>
</html>

Notice how simple the html is for this layout. This is the power of using CSS to define layout, versus tables which would require either nesting or some colspan logic.

All the visual-specific stuff will now be separated from the code that specifies the sections, and this enables us to easily modify the look of a page without even touching the html (which on static sites could involve updating dozens of html-files).

You might wonder what the border wrapper is for, but we’ll get to that later.

Style

Now, for the CSS, we begin with some of the general attributes:

body {
margin: 10px;

font-family: arial, verdana;
font-size: 10pt;

color: #666;
background-color: white;
}
h1, h2, h3, h4, h5, h6 {
color: #69c;

margin: 0;
padding: .5em 15px;
}
p {
margin: 0;
padding: 0 15px 1em;
}

There’s nothing special here. I just set the standard for how large the text should be (which affects the em-unit that I use to define font size later), the default font, and a softer text color. I set the default header color to a nice blue, and force the margin for both headers and paragraphs to zero and top/bottom padding to be defined by the font size. I set all these explicitly as different browsers tend to have different defaults for these values, and I want to achieve a consistent look as is possible.

Layout

Now for the actual layout, we start with the page wrapper:

#page_wrapper {
margin: 0 auto;
width: 760px;

border: 1px solid #ccc;
}

The left and right margins are set to auto. This is the correct way of centering a block, but for this to work in all browsers you must remember to specify the doctype-tag correctly. I currently use XHTML 1.0 Transitional, as it seems to be both flexible and widely supported. The tag for XHTML 1.0 Transitional looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I set the width of the page to 760 pixels (always define the unit (e.g. px), unless the value is 0), as this will display correctly on 800x600-screens, and it makes the paragraphs suitably wide for reading.

Note: The design of this page is static width. If you prefer dynamic width just remove the width-attribute from #page_wrapper. The rest of the design will not be broken. You can also specify max-width and min-width to keep some control in the browsers that support these attributes (IE6 does not).

#header {
width: auto;

letter-spacing: .6em;
text-align: center;
padding: 2px 0;

background-color: white;
}
#header h1 {
font-size: 2.2em;
}

This defines the whole look of the header. It gets the blue color from the other headers, and I added some extra letter spacing for a more important feel. Notice that I plan to use the h1-tag for the header text, as this tells both non-visual browsers and search engines that this text is important. You can also define styles for the h2-tag this way, if you want to have a subtitle in the header.

#nav {
width: auto;
height: 22px;

border: 1px solid #ccc;
border-width: 2px 1px;

background-color: #8ac;
}

This defines the look of the navigation bar. We will get back to how we define the dropdown menus later.

#border_wrapper {
border-right: 300px solid #eee;
}

A right border of 300 pixels? Now that seems a bit much. This is the trick I use to set the background of the right column, without having to use images. This, combined with the right column style, ensures that the background of the right column always covers from top to bottom, which makes it really look like a column, and not a box in the top-right corner.

#right_column {
width: 300px;
background-color: #eee;
padding: 15px 0;
float: right;
}
#right_column h1, #right_column h2, #right_column h3, #right_column h4, #right_column h5, #right_column h6 {
color: #999;
}

As you see, I have set float to right. This positions the right column exactly over the border of border wrapper. I also set the background color to the same as the 300 pixel border, or the illusion of a right column from top to bottom would be broken.

#content {
width: auto;
padding: 15px 0;
}

Because of the 300 pixel border, the content will not flow in below the right column content, and we can all be happy.

#footer {
clear: both;
width: auto;
padding: 3px;
text-align: center;

border: 1px solid #ccc;
border-top-width: 2px;

background-color: #8ac;
color: white;
}

This is all just to match the look with the look of the navigation bar.

Dropdown Menu Structure

Now, for the dropdown menu, let us write some code to define the menu structure:

<div id="nav">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a>
<ul>
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
</ul>
</li>
</ul>
</div>

This defines a menu with two links, where link 2 has two sub links. Tip: If you experience that the menu items is spaced wider apart in some browsers than others, try to remove the whitespace between the list elements, as this can add extra padding sometimes (usually this is avoided if you specify the doctype-tag correctly).

Making the Dropdown Menu Functional

Firstly, we will just assume that all browsers support the :hover pseudo-class for all elements. Utilizing this and the parent-child feature of CSS, we can design a clever dropdown menu with no advanced or confusing JavaScript involved. Here is the CSS with some explaining comments, and some warnings about things you might think will work, but won’t (on all browsers):

/* Affecting all ul and li elements under navigation */
#nav ul {
margin: 0;
padding: 0;

list-style: none;
}
#nav li {
margin: 0;
padding: 0;

float: left;

border-right: 2px solid #ccc;
}
/* Affecting only ul and li elements in sub menus */
#nav li ul li {
border-right: none;
border-top: 2px solid #ccc;
}
#nav li ul {
width: 100px;

position: absolute;
/*
* Trick that keeps the sub menus that shouldn’t be visible, invisible.
* Don’t try and use display: none; instead, as this may not result in
* the desired effect in all browsers.
*/
left: -999em;
top: 0; /* Don’t set to auto, it will break in some browsers. */
}
/* This automatically places the sub menu where it should be; below the parent menu item */
#nav li:hover ul {
left: auto;
top: auto;
}

That was a decent amount of CSS, but not nearly as much as the JavaScript equivalent would be. I will not go more into detail about what this code does, other than that it does show the sub menus when the user hovers the mouse over the parent element. This code is sufficient for one level of sub menus only. More levels can be added by simply extending this CSS-code.

Designing the Links

Defining the look of the links is done by the following CSS:

#nav a:link, #nav a:visited, #nav a:active {
display: block;

width: 100px;
margin: 0;
padding: 3px 10px;

text-decoration: none;

background-color: #58c;
color: white;
}
#nav a:hover {
background-color: #69d;
}

This makes the menu items nice buttons that changes color when hovered. Also, the whole button is clickable, not just the text, which is a nice feature.

The Suckerfish Solution

Now, as some of you might have noticed, the dropdown menus will not work in IE6 (and all other browsers that doesn’t support :hover). Luckily, this problem has been solved already. All you need is a tiny JavaScript and a small addition in the CSS, and we’re good to go. The JavaScript is known as Suckerfish, and the one I prefer can be found at HTML Dog. The required changes to the CSS is an addition to all the :hover elements, as follows:

#nav li:hover ul {
…is changed to…
#nav li:hover ul, #nav li.sfhover ul {

…and that’s it! If you include the Suckerfish-script, the dropdown menus should now work on IE6 as well (and even some older versions of IE).

Conclusion

There it is. You should now have a good idea of how to start creating your own table-less layout with dropdown menus. You will probably face some of the many oddities of browsers that makes your site display differently on different browsers, but don’t give up (or turn mad, as many do), it is usually possible to work around them, or at least get an acceptable result.

Integrating CSS in HTML

To integrate CSS in html, you use CSS information is given. It is recommended you put the CSS info within the HEAD tags.

Basics of CSS

CSS is quite simple. It is quite English-like and easy to learn. CSS can do a lot of things, and most professional web designs use CSS.

The format of CSS is:

tag.class {

property: value(s);

}

class is optional, and is quite advanced. There are also IDs, but that's also quite advanced.

Anyways, using this format, you can format any html tag you wish (as long as it is a valid, not made up html tag). For now, we'll be formatting the body. Therefore tag will be body. CSS is not case sensitive.

body {

}

Fonts

Now finally onto the fonts. OK, so, within the tag we would put the properties concerning fonts and their values.

Changing Colour

To change the colour of a font, the property is: color: ; The value can either be a colours name (that is supported by the browser), or a "hex" colour ( #rrggbb ). I will put a colour name and hex chart on here soon. So if we wanted red, we could say: color: red; or color: #ff0000;

So far..

So here's what we have so far (entire html)

Hello!

Changing the face

The face of the font is the font's image. e.g. Arial, Comic Sans etc. Please note that it is best to use common fonts, like Arial rather than rarer fonts, like Architext. The value can have different fonts, seperated by commas. This works like this: "If I cant find the first font, ill use the second, etc". You can also use font styles. These are: sans-serif, serif, monospace, cursive and fantasy. These are also known as "generic fonts". So, if we wanted a monospace font we could use Courier New and Monospace. The property for this is: font-family: ; So: font-family: "Courier New", Monospace; Please note that CSS values that have spaces, must be surround by quotes " or ".

Font Size

The size is simple. The property is: font-size: ; size can be measured in different units. The main one is: pt, for point. This is the one you would use in most office programs. This text is 12pt. You don"t have to put the measurement at the end, but it may vary the size depending on the browser's default unit. For 15 pt text: font-size: 15pt; Simple.

The final example...

Ok, so here it is, all you have learnt from this tutorial, I hope you understood it! Please post any comments in the "Social Forum".

HELLO!

The next tutorial will discuss more font styles, including bold, italic and underline.