Introduction - Free HTML Tutorial

People often think it is extremely difficult to make a website. That is not the case! Everyone can learn how to make a website. And if you read on, you will have made one in just one hour. Others believe - just as mistakenly - that expensive and advanced software is needed to make websites. It is true that there are lots of different programs that claim they can create a website for you. Some come closer than others. But if you want it done right, you must do it yourself. Fortunately, it is simple and free and you already have all the software you need. The aim of this tutorial is to give you an easy, yet thorough and correct introduction to how to make websites. The tutorial starts from scratch and requires absolutely no prior knowledge of programming. The tutorial cannot show you everything. So some engagement and a will to experiment are required. But don't worry - learning how to make websites is a lot of fun and gives a tremendous amount of satisfaction when you get it right. How you choose to use the tutorial is up to you. But we suggest you read only two or three lessons a day and take time to experiment with the new things you learn in each lesson. Okay, enough talk. Let's get started!

Lesson 1: Let's get started
In this first lesson, you will get a brief presentation of the tools you need to make a website.

What is needed?
Most likely you already have everything you need.

You have a "browser". A browser is the program that makes it possible to browse and open websites. Right now you are looking at this page in your browser. It is not important which browser you use. The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used. You might have heard about, or even used, programs such as Microsoft FrontPage, Macromedia Dreamweaver or even Microsoft Word, which can - or claim that they can create websites for you. Forget these programs for now! They are not of any help to you when learning how to code your own website. Instead, you need a simple text editor. If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories:

If you are not using Windows, you can use a similar simple text editor. For example, Pico (Linux) or TextEdit (Mac).

Notepad is a very basic text editing program which is excellent for coding because it does not interfere with what you are typing. It gives you complete control. The problem with many of the programs that claim they can create websites is that they have a lot of standard functions, which you can choose from. The downside is that, everything needs to fit into these standard functions. Thus, this type of programs often cannot create a website exactly as you want it. Or - even more annoyingly - they make changes to your hand-written code. With Notepad or other simple text editors, you only have yourself to thank for your successes and errors. A browser and Notepad (or a similar simple text editor) are all you need to go through this tutorial and make your own websites.

Do I need to be online?
You do not need to be connected to the Internet - neither while reading this tutorial, nor while making your websites. If you want to avoid being online while reading this tutorial, you can either print it out or simply disconnect from the Internet while reading on screen. You can make the website on your computer's hard disk and upload it to the Internet when it is finished.

What's next?
Go to the next lesson and read about HTML before the fun really starts in Lesson 3.

Lesson 2: What is HTML?
This lesson will give you a brief presentation of your new friend, HTML.

What is HTML?
HTML is the "mother tongue" of your browser. To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today. HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".

For the untrained eye, HTML code looks complicated but this tutorial will help you make sense of it all.

What can I use HTML for?
If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. In just two lessons from now you will have learned how to make your first website. HTML is used to make websites. It is as simple as that!

Okay, but what does H-T-M-L stand for?
HTML is an abbreviation of "HyperText Mark-up Language" - which is already more than you need to know at this stage. However, for the sake of good order, let us explain in greater detail.

• • •

Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net. Text is self-explanatory. Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on. Language is what HTML is. It uses many English words.

In this tutorial you will learn so-called XHTML (Extensible HyperText Mark-up Language) which, in short, is a new and more well-structured way of writing HTML. Now you know what HTML (and XHTML) stands for let's get started with what it is all about: making websites.

Lesson 3: Elements and tags
You are now ready to learn the essence of HTML: elements. Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.

"Tags"?
Tags are labels you use to mark up the begining and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. HTML is all about elements. To learn HTML is to learn and use different tags.

Can you show me some examples?
Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".) Example 1:
<em>Emphasised text.</em>

Will look like this in the browser: Emphasised text. The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text. Example 2:
<h1>This is a heading</h1> <h2>This is a subheading</h2>

lower or mixed cases. you merely open different HTML documents. <html> or <HtMl> will normally give the same result. Since you are reading this. Lesson 4: Create your first website With what you learned in the previous lessons. Also. If you continue to the next lesson in 10 minutes you will have made your first website. The only thing you need to do is to open an extra browser window (open the browser one more time) so you can read this tutorial and see your new website at the same time.Will look like this in the browser: This is a heading This is a subheading So. How? In Lesson 1 we looked at what is needed to make a website: a browser and Notepad (or similar text editor). you most likely already have your browser open. So get into the habit of writing your tags in lowercase. open Notepad (in Accessories under Programs in the Start menu): . These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels. the correct way is to type tags in lowercase. there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. Should tags be typed in uppercase or lowercase? Most browsers might not care if you type your tags in upper. <HTML>. for example. When you surf the Web. Where do I put all these tags? You type your tags in an HTML document. A website contains one or more HTML documents. a line break which looks like this: <br />. However. I always need an opening tag and a closing tag? As they say. you are now only minutes away from making your first website.

The browser reads HTML like you read English: from the top down and from left to right. an simple HTML document begins with what should come first and ends with what should come last." Read on and you'll find out how simple it is. Thus. <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. HTML is simple and logical. The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML.Now we are ready! What can I do? Let us start with something simple. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>. As you may recall from the previous lessons. How about a page that says: "Hurrah! This is my first website. So before you do anything else type "<html>" in the first line of your document in Notepad. This is done with the tag <html> (no surprises there). .

In principle. Anything you want to appear on the page is content and must therefore be added between the "body" tags. .e. Your document should now look like this: <html> <head> </head> <body> </body> </html> Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). the head (<head> and </head>) is on top of the body (<body> and </body>). it is strongly recommended that you structure your HTML in a neat way with line breaks and indents. but how do I add content to my website? As you learnt earlier. For example.The next thing your document needs is a "head". you have made your first website . it should be done in the "head" section. Since HTML is nothing if not logical. write the title of the page between the opening tag <title> and the closing tag </title>: <title>My first website</title> Note that this title will not appear on the page itself. I. which is the content of the document. which provides information about your document. But to help you. if you want to give the page a title which will appear in the top bar of the browser. and others reading your coding. while the body contains the information that constitutes the page. to keep an overview. your HTML document has two parts: a head and a body. The element used for a title is title. and a "body". If your document looks like the above example. What you have made will be the basic template for all your future HTML documents. like the above example.a particularly boring website and probably not what you dreamt of when you started this tutorial but still some sort of a website. So far so good. In the head section you write information about the page. it does not matter how you structure your HTML document.

Now save your document as "page1.a text paragraph.. Your HTML document should now look like this: <html> <head> <title>My first website </title> </head> <body> <p>Hurrah! This is my website.</p> The p in <p> is short for "paragraph" which is exactly what it is .html" gives the same result.htm". but you can choose whichever of the two extensions you prefer). we want the page to say "Hurrah! This is my first website. ..</p> </body> </html> Done! You have now made your first real website! Next all you have to do is to save it to your hard drive and then open it in your browser: • • • In Notepad choose "Save as." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section. ".htm" (the ending ". This is very important .as long as you remember where you saved it so you can find it again. type the following: <p>Hurrah! This is my first website.htm" indicates that it is an HTML document." under "File" in the top menu.otherwise. Choose "All Files" in the "Save as type" box.As promised. you save it as a text document and not as an HTML document. I always use ". It doesn't matter where you save the document on your hard drive .

Now go to the browser: • • • In the top menu choose "Open" under "File". Click "Browse" in the box that appears. Now find your HTML document and click "Open". The fun has just begun. Congratulations! If you absolutely want the whole world to see your masterpiece right away. Otherwise. Lesson 5: What have you learned so far? Always start with the basic template we made in the previous lesson: <html> . It now should say "Hurrah! This is my first website. be patient and read on. you can jump to Lesson 13 and learn how to upload your page to the Internet." in your browser.

Notice how the title will be shown in the upper left corner of your browser: The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results. . In the body section. So keep experimenting .</em> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3> Remember. But don't worry. the only way to learn HTML is by trial and error.that is the best way to gain experience. You already know some of the most important elements: <p>Is used for paragraphs.</p> <em>Emphasis text. there is no way you can destroy your computer or the Internet. you write the actual content of the page. always write a title: <title>The title of your page</title>.<head> <title></title> </head> <body> </body> </html> In the head section.

What is that supposed to mean? Nobody becomes a good website creator by learning the examples in this tutorial. you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>. So what's next? Try to create a few pages yourself. maybe not. What you get in this tutorial is simply a basic understanding of the building blocks . text text. Example 1: <strong>Stronger emphasis. For instance.without looking. text</p> <h2>Subhead</h2> <p>text. text text. get out in the deep water and stand on your own two feet. Okay. Lesson 6: A few more elements Did you manage to make a few pages on your own? If not.to become good you must use the building blocks in new and creative ways. text</p> </body> </html> Now what? Now it is time to learn seven new elements. So... But later. But give it a go and experiment with what you have learned. some text. In the same way you emphasise the text by putting it between the openning tag <em> and the closing tag </em>.</strong> . see if you can do it on your own . here is an example: <html> <head> <title>My website</title> </head> <body> <h1>A Heading</h1> <p>text. It is perfectly okay to look in the tutorial while you make your first pages. a heading. make a page with a title. a subhead and some more text.

Likewise. we closed the tag we first opened last.Will look like this in the browser: Stronger emphasis. This is best illustrated by an example: Example 3: If you want to emphasise small text. This way we avoid confusing both ourselves and the browser. An example of such a tag is <br /> which creates a forced line break: Example 4: .</small> Will look like this in the browser: This should be in small. Can I use several elements at the same time? You can easily use several elements at the same time as long as you avoid overlapping elements. it must be done like this: <em><small>Emphasised small text</small></em> And NOT like this: <em><small>Emphasise small text</em></small> The difference is that in the first example. you can make your text smaller using small: Example 2: <small>This should be in small. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels. More elements! As mentioned in Lesson 3 there are elements which are opened and closed in the same tag.

ol and li.Some text<br /> and some more text in a new line Will look like this in the browser: Some text and some more text in a new line Notice that the tag is written as a contraction of an opening and closing tag with an empty space and a forward slash at the end: <br />. ol is short for "ordered list" and numbers each list item. To make items in the list use the li tag ("list item"). is short for "unordered list" and inserts bullets for each list item. Confused? See the examples: ul Example 7: <ul> <li>A list item</li> <li>Another list item</li> </ul> will look like this in the browser: • • A list item Another list item Example 8: . These elements are used when you want to make lists. Another element that is opened and closed in the same tag is <hr /> which is used to draw a horizontal line ("hr" stands for "horizontal rule"): Example 5: <hr /> Will look like this in the browser: Examples of elements that needs both an opening tag and a closing tag .as most elements do .is ul.

Example 1: <h2 style="background-color:#ff0000. Second list item Phew! Is that all? That is all for now.<ol> <li>First list item</li> <li>Second list item</li> </ol> will look like this in the browser: 1. In some elements you can add more information. Such additional information is called an attribute.">My friendship with HTML</h2> Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. <br /> informs the browser to make a line break). experiment and make your own pages using some of the seven new elements you learned in this lesson: <strong>Stronger emphasis</strong> <small>Small text</small> <br /> Line shift <hr /> Horizontal line <ul>List</ul> <ol>Ordered list</ol> <li>List item</li> Lesson 7: Attributes You can add attributes to a number of elements. Again. First list item 2. . elements give structure to a HTML document and tells the browser how you want your website to be presented (for example. What is an attribute? As you probably remember. We will get back to that later. The semicolon after the attribute is for separating different style commands.

we asked for the background colour with the code "#ff0000". green and yellow). It is important that you are careful to use the same spelling as we use in the examples in this tutorial . Each colour has its own hexadecimal number. You can also use the English name for the most common colours (white. color instead of colour."> </body> </html> will show a completely red page in the browser .e. Note that some tags and attributes use US spelling i. red. How did the page become red? In the above example. With the style attribute you can add layout to your website. Also. We will explain in greater detail how the colour system works in a few moments. The first one you will learn is style.go ahead and see for yourself. To make it easier we have made a chart of the 216 most commonly used colours: 216 Web Safe Colour Chart. For instance a background colour: Example 2: <html> <head> </head> <body style="background-color:#ff0000. Here are some examples: White: #ffffff Black: #000000 (zeros) Red: #ff0000 Blue: #0000ff Green: #00ff00 Yellow: #ffff00 A hexadecimal colour code consists of # and six digits or letters. blue. There are more than 1000 HEX codes and it is not easy to figure out which HEX code is tied to a specific colour. browsers will not be able to understand your codes. don't forget to always close the inverted commas (quotation marks) after an attribute.otherwise.What is the catch? There are many different attributes. . This is the colour code for red using so called hexadecimal numbers (HEX). black.

"> Enough about colours. And vice versa: some elements can only contain one kind of attribute while others can contain many. See the illustration below. You will often use attributes in tags such as the body tag while you will rarely use attributes in. a br tag since a line break normally is a line break without any parameters to adjust. Lesson 8: Links In this lesson. Which elements can use attributes? Different attributes can be applied to most elements.Example 3: <body style="background-color: red. Some attributes are tailor made for one particular element while others can be used for many different element. Just as there are many different elements. so there are many different attributes. Exactly what parts does an element consist of? Generally an elements consist of a start tag with or without one or more attributes. This tutorial will introduce you to the most important attributes. Let's get back to the attributes. It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide. . for example. you will learn how to make links between pages. some content and an end tag. Simple as that.

net The element a stands for "anchor".htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. you do not need to spell out the entire address (URL) for the document. For example. The sentence "Here is a link to HTML. In the above example the attribute href has the value "http://www.net and is called a URL (Uniform Resource Locator). which is the full address of HTML. Remember to close the element with an </a>. if you have made two pages (let us call them page1.htm">Click here to go to page 2</a> If page 2 were placed in a subfolder (named "subfolder"). Under such circumstances a link from page1.typically an address on the internet or a file name. a link from page 2 (in the subfolder) to page 1 would look like this: . you use what you always use when coding HTML: an element.html.net" is the text that is shown in the browser as the link. What about links between my own pages? If you want to make a link between pages on the same website. the link could look like this: Example 3: <a href="subfolder/page2.net</a> Would look like this in the browser: Here is a link to HTML.net".htm">Click here to go to page 2</a> The other way around. which specifies where the link leads to .net could look like: Example 1: <a href="http://www.What do I need to make a link? To make links. And the attribute href is short for "hypertext reference".htm and page2.net/">Here is a link to HTML.html. Note that "http://" must always be included in URLs.htm to page2. Here is an example of what a link to HTML. A simple element with one attribute and you will be able to link to anything and everything.htm could look like this: Example 2: <a href="page2.

For example: <h1 id="heading1">heading 1</h1> You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example: <a href="#heading1">Link to heading 1</a> All will become clear with an example: Example 5: <html> <head> </head> <body> <p><a href="#heading1">Link to heading 1</a></p> <p><a href="#heading2">Link to heading 2</a></p> <h1 id="heading1">heading 1</h1> <p>Text text text text</p> <h1 id="heading2">heading 2</h1> <p>Text text text text</p> .Example 4: <a href=". Use the id attribute to mark the element to which you want to link./.. Did you understand the system? Alternatively.htm">A link to page 1</a> ". you can always type the complete address for the file (URL). you can also point two (or more) folders up by writing ".for example a table of contents at the top with links to each chapter below.. What about internal links within a page? You can also create internal links within a page ../". All you need to use is a very useful attribute called id (identification) and the symbol "#". Following the same system./" points to the folder one level up from position of the file from which the link is made../page1.

Please note that this function will only work if there is an e-mail program installed on your computer. the default e-mail program opens with a new blank message addressed to the specified e-mail address. It is done in almost the same way as when you link to a document: Example 6: <a href="mailto:nobody@html. When the link is clicked. you type mailto: followed by an e-mail address.net">Send an e-mail to nobody at HTML.</body> </html> will look like this in the browser (click on the two links): Link to heading 1 Link to heading 2 Heading 1 Text text text text Heading 2 Text text text text (Note: An id attribut must start with a letter) Can I link to anything else? You can also make a link to an e-mail address.net</a> will look like this in the browser: Send an e-mail to nobody at HTML. Give it a try! .net The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document.

Lesson 9: Images Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page? That sounds like a bit of a challenge. you can also put a title on your link: Example 7: <a href="http://www. it is not tied to a piece of text.jpg" is the file type of the image. Just like the extension ".net and learn HTML">HTML.Are there any other attributes I should know of? To create a link.net and learn HTML" appears.jpg" is the name of the image file you want to insert in your page. In addition.html.net The title attribute is used to type a short description of the link. ". .net/" title="Visit HTML.. you will see the text "Visit HTML.without clicking place the cursor over the link. If you . you always have to use the href attribute. short for "source").. Like the <br /> tag.net</a> Would look like this in the browser: HTML. Do you get the picture? Notice how the img element is opened and closed using the same tag.jpg" alt="David" /> would look like this in the browser: All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src. Maybe. "david.htm" shows that a file is an HTML document. All you need is an element: Example 1: <img src="david. but in fact it is pretty easy to do.

However. PhotoShop or Macromedia Fireworks. Traditionally. An image editing program is one of the most essential tools you need to create beautiful websites. But please be careful not to violate copyrights when downloading pictures. while JPEG images comprise of millions of colours and second.. Or you can just borrow images from other sites by downloading them. which are three of the best image editing programs currently on the market. you need an image editing program. it's useful to know how to download pictures. Right-click on an image on any image on the Internet. 3. unnecessarily 'heavy' pages can be extremely annoying for the user. For now.png): . Thus." in the menu that appears.. than the JPEG format which is optimized for more complex images. GIF images only consist of 256 colours. the faster your page will load. the smaller the size of the image file. Choose "Save picture as. no good image editing programs comes with Windows or other operating systems. This is for two reasons: first. while JPEG images are usually better for photographs. it will not be necessary to buy expensive programs to complete this tutorial. the GIF and JPEG formats have been the two dominant image types. 2. Where do I get my images from? To make your own images. There are three different types of image file types you can insert into your pages: • • • GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) GIF images are usually best for graphics and drawings. Choose a location for the image on your computer and press "Save". as we said before. (Notice that the logo is saved as a PNG file: logo. Unfortunately. The better the compression. you might consider investing in either Paint Shop Pro. but lately. Still. As you probably know from your own experience.jpg" tells the browser that a file is a picture. The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing. so here's how you do it: 1.". you can download the excellent image editing program IrfanView which is so-called freeware and therefore costs nothing. the GIF format is better at compressing simple images. the PNG format has become more and more popular (primarily at the expense of the GIF format). Do this with the image below and save it on your computer at the same location as your HTML documents.

which tells the browser where the image is located.html. Try it yourself. the image is not shown for the user. Besides that.net"> <img src="logo. The alt attribute is used to give an alternate description of an image if. Is that all I need to know about images? There are a few more things you should know about images. This is especially important for users with impaired vision.net/logo. Therefore. or even pictures that are located on other websites: Example 2: <img src="images/logo. images can be links: Example 4: <a href="http://www. First.html.png" /></a> will look like this in the browser (try clicking on the image): Are there any other attributes I should know about? You always need to use the attribute src.png" /> Example 3: <img src="http://www. there are a number of other attributes which can be useful when inserting images.Now you can insert the image into one of your own pages. always use the alt attribute: . or if the page is loaded very slowly. for some reason. you can easily insert pictures located in other folders.png" /> Second.

net logo" /> Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. without clicking.gif" title="Learn HTML from HTML.5 centimetres on the screen. place the cursor over the image. you will see the text "Learn HTML from HTML. while the same 25 pixel in a low screen resolution may correspond to 1. The value that is used to set the width and height is pixels. Two other important attributes are width and height: Example 7: <img src="logo.net" appear as a pop-up box. Unlike centimetres. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is. pixels are relative units of measurement which depend on the resolution of the screen.png" width="141px" height="32px" /> will look like this in the browser: The width and height attributes can be used to set the height and width of an image. (The most common screen resolution is 1024x768 pixels).Example 5: <img src="logo. Please note that when using the alt attribute. To a user with a high screen resolution. the aim is to provide an alternative description of the picture. The title attribute can be used to add information to the image: Example 6: <img src="logo.net" /> Will look like this in the browser: If you. Pixels are the units of measurement used to measure the resolution of screens.gif" alt="HTML. 25 pixels may correspond to 1 centimetre. .

it is actually strictly logical .If you do not set the width and height.gif" width="32px" height="32px" /> will look like this in the browser: However.e. you should always resize your images in an image editing program to make your pages lighter and faster. That's enough about David Hasselhoff and images for now. Lesson 10: Tables Tables are used when you need to show "tabular data" i. Example 1: <table> <tr> <td>Cell 1</td> <td>Cell 2</td> . But with width and height you can manipulate the size: Example 8: <img src="logo. This allows your browser to set up the page nicely in a quicker way. Is it difficult? Building tables in HTML may at first seem complicated but if you keep cool and watch your step. That said. it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before. Instead. Therefore. it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. the image will be inserted in its actual size.just like everything else in HTML. information that is logically presented in rows and columns. you should never decrease the image size by using the width and height attributes. even though it appears smaller on the screen.

which indicates the beginning of a new row. All simple and logical. Logical. <td> is short for "table data". This tag starts and ends each cell in the rows of your table. In the above example. a table can have an unlimited number of rows and columns. <tr> stands for "table row" and starts and ends horizontal rows. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. followed by a <tr>. The new row also contains two cells. However. Cell 1 and Cell 3 form a column. The table is closed with </table>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. Still logical. the table has two rows and two columns. this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags: 3 different elements are used to insert tables: • • • The opening tag <table> and the closing tag </table> starts and ends the table. Here is what happens in Example 1: the table starts with a <table>. Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells: Cell 1 Cell 2 Cell 3 Cell 4 Cell 1 and Cell 2 form a row.</tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 What's the difference between <tr> and <td>? As you will see from the above example. Example 2: <table> .

For example. the border attribute is used to specify the thickness of the border around your table: Example 3: <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 .<tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> </table> 1</td> 2</td> 3</td> 4</td> 5</td> 6</td> 7</td> 8</td> 9</td> 10</td> 11</td> 12</td> Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 Are there any attributes? Of course there are attributes.

a few years ago . left. This should keep you busy for hours. valign: specifies the vertical alignment of the content in a cell. center or right. with different attributes and content. you can insert anything in tables: text.e. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). For example. Lesson 11: More about tables . in a row or in a single cell. But more about that later.. middle or bottom. Here are two more: • • align: specifies the horizontal alignment of the content in the entire table. top.tables were often used as a layout tool.The thickness of the border is specified in pixels (See lesson 9) As with images. BUT tables are meant for presenting tabular data (i.i.or alternatively in percentage of the screen: Example 4: <table border="1" width="30%"> This example will be displayed in the browser as a table with the width of 30% of the screen. Example 5: <td align="right" valign="top">Cell 1</td> What can I insert in my tables? Theoretically. put what you just learned to practice and design a number of tables in different sizes. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other. you can also set the width of a table in pixels . For example. In the old days on the Internet . Try it yourself. Now. More attributes? There are lots of attributes for tables. links and images..e.

the cell in the first row spans three columns.The title "More about tables" may sound a bit boring. If we instead had set colspan to "2". when you master tables. Colspan is used in the <td> tag to specify how many columns the cell should span: Colspan Example 1: <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 By setting colspan to "3". But look at the positive side. is short for "column span". What is left then? The two attributes colspan and rowspan are used when you want to create fancy tables. Example 2: <table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table> . there is absolutely nothing about HTML that will knock you out. the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.

Confused? Well. while Cell 3 and Cell 4 form two independent rows.Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 What about rowspan? As you might already have guessed. Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own. Therefore. it is not uncomplicated and it is easy to lose track. Cell 1 and Cell 2 are thereby in the same row. it might be a good idea to draw the table on a piece of paper before you begin with the HTML. rowspan specifies how many rows a cell should span over: Example 3: <table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table> Will look like this in the browser: Cell 2 Cell 1 Cell 3 Cell 4 In the example above rowspan is set to "3" in Cell 1. Lesson 12: Layout (CSS) Wouldn't be great if you could give your pages the layout they deserve? . This specifies that the cell must span over 3 rows (its own row plus an additional two).

As shown in Lesson 7. you can set the font type and size on a paragraph: Example 1: <p style="font-size:20px. In this lesson you will get a short introduction to CSS. CSS can be added with the style attribute. For example. Notice how in the last paragraph we set both the font type and size with a separating semicolon. And in coding.">This is typed in Courier</p> <p style="font-size:20px. But later you can learn all about CSS from scratch in our CSS tutorial. CSS is the better half of HTML. while CSS gives it a nice touch (layout). So please consider this lesson only as an appetizer.">This is typed in Courier size 20px</p> Will look like this in the browser: This is typed in size 20px This is typed in Courier This is typed in Courier size 20px In the example above we use the style attribute to specify the type of font to be used (with the command font-family) and the font size (with the command font-size). there is no equality of status: HTML takes care of the rough stuff (the structure). you can tell the browser once how it must layout all the text on the page: Example 2: <html> <head> <title>My first CSS page</title> .Sure. but how? To give your website layout use Cascading Style Sheets (CSS).">This is typed in size 20px</p> <p style="font-family:courier. Instead of using the style attribute in each tag. It seems like a lot of work? One of the smart features of CSS is the possibility to manage your layout centrally. font-family:courier.

} h2 {font-size: 15px. And all text in normal paragraphs will be in Times New Roman size 8. All subheads will in Courier size 15. just use the tag <style type="text/css"> which tells the browser that you are typing CSS. With a separate CSS document you can manage the layout of many pages all at once. Another option is to type the CSS in a separate document. Here are some examples for you to experiment with: <p style="color:green.">Heading on blue background</h1> <body style="background-image: url('http://www. font-family: arial. We won't go into that now but you can learn it later in our CSS tutorial. In the example all headings on the page will be in Arial in size 30px. What else can I do with CSS? CSS can be used for much more than specifying font types and sizes. font-family: courier. For example.<style type="text/css"> h1 {font-size: 30px.} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html> • Show example In the example above CSS has been inserted in the head section and therefore applies to the entire page.net/logo. To do this."> Try inserting the examples in some of your pages . you can add colours and backgrounds.png').html. .both as shown above and also as CSS inserted in the head section.">Green text</p> <h1 style="background-color: blue. Pretty smart if you want to change the font type or size on a large website with hundreds or thousands of pages. font-family: "times new roman".} p {font-size: 8px.

Example 3: <p style="padding:25px. height etc. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. alignment. Ut wisi enim ad minim veniam... consectetuer adipiscing elit. font types etc. width. quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.. By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.).border:1px solid red. consectetuer adipiscing elit.">I love CSS</p> Will look like this in the browser: I love CSS With the property float an element can either be floated to the right or to the left." /> <p>Lorem ipsum dolor sit amet. .Is CSS nothing but colours and font types? Besides adding layout such as colors... CSS can also be used to control the page setup and presentation (margins. float.</p> Will look like this in the browser: Lorem ipsum dolor sit amet. Ut wisi enim ad minim veniam. quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. The following example illustrates the principle: Example 4: <img src="bill.jpg" alt="Bill Gates" style= "float:left.

you can place an element exactly where you want it in your page: Example 5: <img src="bill." /> . With the property position.In the example.right:10px.bottom:50px. one element (the image) floats to the left and the other element (the text) fills the hole.jpg" alt="Bill Gates" style="position:absolute.

Which software do I need? Please avoid using software such as FrontPage. . It is usually located in Accessories in the start menu under Programs. your successes and errors can only be attributed to yourself . Learning CSS is fun. A browser and a simple text editor is all you need. It can save you a lot of time and it enables you to design websites in a completely new way. For example. Pico for Linux or Simple Text for Macintosh.Introduction . All you need is a free and simple text editor.not the software.g. As you go along through the tutorial. Microsoft Windows comes with a program called Notepad. A simple text editor is ideal for learning HTML and CSS because it doesn't affect or change the codes you type. please start with our HTML tutorial before moving on to CSS. CSS is a must for anyone working with web design. remember to take enough time to properly experiment with what you learn in each lesson. you can use a similar text editor e. This tutorial will get you started with CSS in just a few hours. You can use any browser with this tutorial. It is easy to understand and it will teach you all the sophisticated techniques. That way. We encourage you to always keep your browser updated and use the latest version.Free CSS Tutorial Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. Using CSS requires basic experience with HTML. DreamWeaver or Word with this tutorial. it will limit you and slow down your learning curve significantly. Instead. Advanced software will not help you learn CSS. If you are not familiar with HTML. Alternatively.

background images. As the Web gained popularity. Okay. What can I do with CSS? CSS is a style language that defines layout of HTML documents. CSS is an acronym for Cascading Style Sheets. CSS is supported by all browsers today. lines. After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look. . colours. But CSS offers more options and is more accurate and sophisticated. For example. the language HTML was only used to add structure to text. What is the difference between CSS and HTML? HTML is used to structure content. It will all make sense to you soon. height.and not structure. the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout . Just wait and see! HTML can be (mis-)used to add layout to websites. advanced positions and many other things. Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web. "You need browser X to view this page" became a common disclaimer on web sites. This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. it sounds a bit technical and confusing. CSS is used for formatting structured content. CSS covers fonts. To meet this demand.Let's get started! Lesson 1: What is CSS? Maybe you already heard about CSS without really knowing what it is. width. designers started looking for possibilities to add layout to online documents. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1> and <p>. margins. But please continue reading. Many new layout tags such as <blink> were only supported by one type of browser. In this lesson you will learn more about what CSS is and what it can do for you.

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. In the next lesson we take a closer look at how CSS actually works and how you get started. you will most likely recognize many of the codes. numerous advanced and sophisticated techniques. Which benefits will CSS give me? CSS was a revolution in the world of web design. The concrete benefits of CSS include: • • • • control layout of many documents from one single style sheet. Thus. At the same time. Let us look at a concrete example. if you are used to use HTML for layout. makes site maintenance a lot easier. more precise control of layout. separation of the presentation style of documents from the content of documents. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using HTML we could have done it like this: <body bgcolor="#FF0000"> With CSS the same result can be achieved like this: body {background-color: #FF0000.CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. apply different layout to different media-types (screen. print. etc. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML.} . You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.).

Building on the above example with the red background color. We recommend that you focus on the third method i."> <p>This is a red page</p> </body> </html> Method 2: Internal (the tag style) Another way is to include the CSS codes using the HTML tag <style>. The above example also shows you the fundamental CSS model: But where do you put the CSS code? This is exactly what we will go over now. These methods are all outlined below. Applying CSS to an HTML document There are three ways you can apply CSS to an HTML document. Method 1: In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute style.} </style> </head> <body> <p>This is a red page</p> . external. the codes are more or less identical for HTML and CSS. For example like this: <html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000.As you will note. it can be applied like this: <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000.e.

between the <head> and </head> tags.css and is located in a folder named style. The really smart thing is that several HTML documents can be linked to the same style sheet.htm) to the style sheet (style. Like any other file.. Throughout this tutorial we will use this method in all our examples. you can place the style sheet on your web server or hard disk. An external style sheet is simply a text file with the extension .css" /> Notice how the path to our style sheet is indicated using the attribute href. let's say that your style sheet is named style. The line of code must be inserted in the header section of the HTML code i. The situation can be illustrated like this: The trick is to create a link from the HTML document (default.e. Like this: <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style. Such link can be created with one line of HTML code: <link rel="stylesheet" type="text/css" href="style/style.. In other words. one CSS file can be used to control the layout of many HTML documents.css).css. . For example. This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.</body> </html> Method 3: External (link to a style sheet) The recommended method is to link to a so-called external style sheet.css" /> </head> <body> .

Using CSS. If you. would like to change the background color of a website with 100 pages. for example.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html> style.with the following contents: default.an HTML file and a CSS file . Remember to save the files with the right extensions (respectively ". Try it yourself Open Notepad (or whatever text editor you use) and create two files . the change can be made in a few seconds just by changing one code in the central style sheet. } Now place the two files in the same folder.This technique can save you a lot of work.css body { background-color: #FF0000. Let's put what we just learned into practice.css") .htm" and ". a style sheet can save you from having to manually change all 100 HTML documents.htm <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.

0.0)). imagine that we want all headlines in a document to be dark red. or you can use the names of the colors ("red") or rgb-values (rgb(255.Open default. The headlines are all marked with the HTML element <h1>. We will also look at advanced methods to position and control background images. The element <body> contains all the content of an HTML document. The following CSS properties will be explained: • • • • • • • color background-color background-image background-repeat background-attachment background-position background Foreground color: the 'color' property The color property describes the foreground color of an element. to change the background color of an entire page. Thus. the background-color property should be applied to the <body> element. For example. Lesson 3: Colors and backgrounds In this lesson you will learn how to apply colors and background colors to your websites. The 'background-color' property The background-color property describes the background color of elements. • Show example Colors can be entered as hexadecimal values as in the example above (#ff0000). Congratulations! You have made your first style sheet! Hurry on to the next lesson where we will take a look at some of the properties in CSS. . h1 { } color: #ff0000.htm with your browser and see how the page has a red background. The code below sets the color of <h1> elements to red.

body { background-color: #FFCC66. different background colors are applied to <body> and <h1> elements. • Show example Notice that we applied two properties to <h1> by dividing them by a semicolon. Background images [background-image] The CSS property background-image is used to insert a background image. In the example below. } background-color: #FFCC66. body { } h1 { color: #990000. You can download the image so you can use it on your own computer (right click the image and choose "save image as"). . or you can use another image as you see fit. As an example of a background image. background-color: #FC9804. simply apply the background-image property to <body> and specify the location of the image. To insert the image of the butterfly as a background image for a web page. we use the butterfly below.You can also apply background colors to other elements including headlines and text.

} h1 { color: #990000./images/butterfly. color: #990000. background-image: url("butterfly.gif").} h1 { background-image: url("butterfly. Value background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: norepeat Description The image is repeated horizontally The image is repeated vertically Example Show example Show example The image is repeated both horizontally and Show example vertically The image is not repeated Show example For example.gif"). did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour.gif") or even on the Internet indicating the full address of the file: url("http://www. background-repeat: no-repeat.. } .net/butterfly. You can also refer to images in other folders using url(". This means that the image is located in the same folder as the style sheet.html. Repeat background image [background-repeat] In the example above.gif"). The table below outlines the four different values for background-repeat. background-color: #FC9804. to avoid repetition of a background image the code should look like this: body { background-color: #FFCC66. background-color: #FC9804. } • Show example NB: Notice how we specified the location of the image as url("butterfly.gif").

• Show example Place background image [background-position] By default. The table below outlines the two different values for background-attachment. The property background-position allows you to change this default and position the background image anywhere you like on the screen. body { background-color: #FFCC66. Value Background-attachment: scroll Background-attachment: fixed Description The image scrolls with the page unlocked The image is locked Example Show example Show example For example. background-image: url("butterfly.gif"). the code below will fix the background image. the value '100px 200px' . whereas an unlocked background image will scroll along with the text of the web page. A fixed background image will not move with the text when a reader is scrolling the page. For example. all of them are formatted as a set of coordinates.• Show example Lock background image [background-attachment] The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. } h1 { } color: #990000. There are numerous ways to set the values of background-position. a background image will be positioned in the top left corner of the screen. background-attachment: fixed. background-repeat: no-repeat. background-color: #FC9804. However. Click on the examples to see the difference between scroll and fixed.

left and right. background-repeat: no-repeat. The model below illustrates the system: The table below gives some examples.positions the background image 100px from the left side and 200px from the top of the browser window. etc. background-image: url("butterfly. Value background-position: 2cm 2cm background-position: 50% 25% background-position: top right Description The image is positioned 2 cm from the left and 2 cm down the page The image is centrally positioned and one fourth down the page The image is positioned in the top-right corner of the page Example Show example Show example Show example The code example below positions the background image in the bottom right corner: body { background-color: #FFCC66. .) or you can use the words top. center. The coordinates can be indicated as percentages of the browser window. centimetres. fixed units (pixels. bottom.gif").

• Show example Compiling [background] The property background is a short hand for all the background properties listed in this lesson. Using background the same result can be achieved in just one line of code: background: #FFCC66 url("butterfly. background-attachment: fixed.gif") no-repeat fixed right bottom. . For example. background-position: right bottom. background-repeat: no-repeat. For example. The list of order is as follows: [background-color] | [background-image] | [background-repeat] | [backgroundattachment] | [background-position] If a property is left out. if background-attachment and background-position are taken out of the example: background: #FFCC66 url("butterfly.gif") no-repeat. it will automatically be set to its default value. look at these five lines: background-color: #FFCC66.gif"). background-image: url("butterfly. These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.background-attachment: fixed. } h1 { } color: #990000. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read. background-color: #FC9804. background-position: right bottom.

Generic family Generic families can best be described as groups of family-names with uniformed appearances.Summary In this lesson. which is a collection of fonts without "feet". The difference can also be illustrated like this: . The following CSS properties will be described: • • • • • • font-family font-style font-variant font-weight font-size font Font family [font-family] The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. be "Arial". Family-name Examples of a family-name (often known as "font") can e. "Times New Roman" or "Tahoma".g. the next font on the list will be tried until a suitable font is found. The fun continues in the next lesson which examines the broad range of possibilities when using CSS to describe fonts. If the first font on the list is not installed on the computer used to access the site. The two terms are explained below. you have already learned new techniques that would not be possible using HTML. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. Lesson 4: Fonts In this lesson you will learn about fonts and how they are applied using CSS. An example is sans-serif. There are two types of names used to categorize fonts: family-names and generic families.

serif. It is recommended to complete the list with a generic font family. "Verdana" will be used instead.} • Show example Headlines marked with <h1> will be displayed using the font "Arial". you naturally start with the most preferred font followed by some alternative fonts. That way at least the page will be shown using a font of the same family if none of the specified fonts are available. a font from the sans-serif family will be used to show the headlines. verdana. all headlines marked with <h2> will be shown in italics. An example of a prioritized list of fonts could look like this: h1 {font-family: arial. italic or oblique. In the example below. sans-serif. If both these fonts are unavailable. Font style [font-style] The property font-style defines the chosen font either in normal.When you list fonts for your web site. Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks. . If this font is not installed on the user's computer.} h2 {font-family: "Times New Roman".

g.} td {font-family: arial. Confused? Take a look at these examples: If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead.} h2 {font-variant: normal. verdana. font-style: italic. verdana. font-weight: bold.} • Show example Font size [font-size] The size of a font is set by the property font-size.} • Show example Font variant [font-variant] The property font-variant is used to choose between normal or small-caps variants of a font. sans-serif. h1 {font-variant: small-caps. serif. verdana. A font can either be normal or bold.} • Show example Font weight [font-weight] The property font-weight describes how bold or "heavy" a font should be presented. pixels and percentages) to choose from to describe font sizes.h1 {font-family: arial. In this tutorial we will focus on the most common and appropriate units.} h2 {font-family: "Times New Roman". sans-serif. There are many different units (e. p {font-family: arial. sans-serif. Examples include: . Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

elderly or simply suffer from poor vision or a monitor of bad quality. don't you think? .} h2 {font-size: 12pt.} • Show example There is one key difference between the four units above. you should use adjustable units such as '%' or 'em'.h1 {font-size: 30px.} p {font-size: 1em. Many users are disabled. The units 'px' and 'pt' make the font size absolute.} h3 {font-size: 120%. Try it yourself .neat feature. To make your website accessible for everybody. Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet Explorer. while '%' and 'em' allow the user to adjust the font size as he/she see fit.

For example.Compiling [font] Using the font short hand property it is possible to cover all the different font properties in one single property. font-weight: bold. . font-size: 30px. font-family: arial. imagine these four lines of code used to describe font-properties for <p>: p { font-style: italic. sans-serif.

In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. In the next lesson we will look at text. The following properties will be described: • • • • • text-indent text-align text-decoration letter-spacing text-transform Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. • Show example . you can change font on an entire website in just a few minutes. the code can be simplified: p { } font: italic bold 30px arial. Remember that one of the major advantages of using CSS to specify fonts is that at any given time.} Using the short hand property. sans-serif. CSS saves time and makes your life easier. The order of values for font is: font-style | font-variant | font-weight | font-size | font-family Summary You have now learned about some of the possibilities related to fonts. In the example below a 30px is applied to all text paragraphs marked with <p>: p { } text-indent: 30px. Lesson 5: Text Formatting and adding style to text is a key issue for any web designer.

In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred. you can underline the text. text-decoration: underline. text-decoration: overline. Text can either be aligned to the left. h1 { } h2 { } h3 { } text-decoration: line-through. normal text paragraphs are justified: th { } td { } p { } text-align: justify. text-align: right. etc. <h1> are underlined headlines. You know this layout from for example newspapers and magazines.Text alignment [text-align] The CSS property text-align corresponds to the attribute align used in old versions of HTML. In addition to this. For example. In the following example. text-align: center. <h2> are headlines with a line above the text and <h3> are headlines with a line though the text. • Show example Text decoration [text-decoration] The property text-decoration makes it is possible to add different "decorations" or "effects" to text. • Show example . to the right or centred. the value justify will stretch each line so that both the right and left margins are straight. In addition. have a line through or above the text.

For example. There are four possible values for text-transform: capitalize Capitalizes the first letter of each word. none No transformations . For example: "john doe" will be "JOHN DOE". For example: "john doe" will be "John Doe". The value of the property is simply the desired width. As an example. letter-spacing: 6px.the text is presented as it appears in the HTML code. uppercase Converts all letters to uppercase. You can choose to capitalize. • Show example Text transformation [text-transform] The text-transform property controls the capitalization of a text.Letter space [letter-spacing] The spacing between text characters can be specified using the property letterspacing. . lowercase Converts all letters to lowercase. Let's say that we want names to be capitalized and headlines to be presented in uppercase letters. For example: "JOHN DOE" will be "john doe". we will use a list of names. h1 { } p { } letter-spacing: 3px. use uppercase or lowercase regardless of how the original text is looks in the HTML code. h1 { text-transform: uppercase. An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase. if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used. The names are all marked with <li> (listitem).

} li { } text-transform: capitalize. but there is much more to CSS. . In the next lesson we will take a look at links. • Show example Summary In the last three lessons you have already learned several CSS properties.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer: Get 4 months of Scribd and The New York Times for just $1.87 per week!

Master Your Semester with a Special Offer from Scribd & The New York Times