Scribd
Upload
23 views60 pages

HTML Basics: A Beginner's Guide

This document is a tutorial on HTML, covering the basics of HTML files, tags, elements, and attributes. It provides step-by-step instructions for creating a simple HTML page, along with explanations of common HTML elements and formatting options. Additionally, it includes tips for best practices and troubleshooting common issues when working with HTML.

Uploaded by

nadermahmoud618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views60 pages

HTML Basics: A Beginner's Guide

This document is a tutorial on HTML, covering the basics of HTML files, tags, elements, and attributes. It provides step-by-step instructions for creating a simple HTML page, along with explanations of common HTML elements and formatting options. Additionally, it includes tips for best practices and troubleshooting common issues when working with HTML.

Uploaded by

nadermahmoud618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Front-end Tutorial

1 [Link] Elsheikh
Introduction to HTML

What is an HTML File?


• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad.


If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain
text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select
"Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change
the preferences above!

Type in the following text:

<html>

<head>

<title>Title of page</title></head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

Save the file as "[Link]".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box
will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "[Link]" -
select it and click "Open". Now you should see an address in the dialog box, for example "C:\
MyDocuments\[Link]". Click OK, and the browser will display the page.

2 [Link] Elsheikh
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML
document. The last tag in your document is </html>. This tag tells your browser that this is the end of the
HTML document.
The text between the <head> tag and the </head> tag is header information. Header information is not
displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your browser's
caption.
The text between the <body> tags is the text that will be displayed in your browser. The text between the
<b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?


When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our
examples. It might be a bad habit inherited from the past when some of the commonly used software only
allowed three letter extensions.
With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:


You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or
Dreamweaver, instead of writing your markup tags in a plain text file.
However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text
editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why?
A: Make sure that you have saved the file with a proper name and extension like "c:\[Link]". Also
make sure that you use the same name when you open the file in your browser.
Q: I have edited an HTML file, but the changes don't show in the browser. Why?
A: A browser caches pages so it doesn't have to read the same page twice. When you have modified a
page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to
reload the page.
Q: What browser should I use?

3 [Link] Elsheikh
A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox, Netscape,
or Opera. However, some of the examples in our advanced classes require the latest versions of browsers.

HTML Elements

HTML documents are text files made up of HTML elements.


HTML elements are defined using HTML tags.

HTML Tags

• HTML tags are used to mark-up HTML elements


• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>

HTML Elements

Remember the HTML example from the previous page:

<html>

<head>

<title>Title of page</title></head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b>


The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold. This is also an
HTML element:
<body>
This is my first homepage. <b>This text is bold</b>
</body>

4 [Link] Elsheikh
This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.

Why do We Use Lowercase Tags?


We have just said that HTML tags are not case sensitive: <B> means the same as <b>. If you surf the Web,
you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use
lowercase tags. Why?

If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web
Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next
generation HTML) demands lowercase tags.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.
The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you.
With this editor, you can edit the HTML source code if you like, and click on a test button to view the
result.

Try it Yourself - Examples


A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how
the text inside a body element is displayed in the browser.
<html><body>The content of the body element is displayed in your browser.</body></html>

Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.
<html><body><p>This is a paragraph.</p><p>This is a paragraph.</p>
<p>This is a paragraph.</p><p>Paragraph elements are defined by the p tag.</p>
</body></html>

5 [Link] Elsheikh
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the
smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Don't Forget the Closing Tag


You might have noticed that paragraphs can be written without end tags </p>:

<p>This is a paragraph
<p>This is another paragraph

The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow
you to skip ANY end tags.
Closing all HTML elements with an end tag is a future-proof way of writing HTML. It also makes the code
easier to understand (read and browse) when you mark both where an element starts and where it ends.

Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag
forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn't make any sense.

6 [Link] Elsheikh
<br> or <br />
More and more often you will see the <br> tag written like this: <br />
Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML-
based XHTML), namely that all elements must be closed.
Writing it like <br /> is a future-proof way of closing (or ending) the tag inside the opening tag, accepted by
both HTML and XML.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the
browser. You can use comments to explain your code, which can help you when you edit the source code at
a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Recap on HTML Elements


• Each HTML element has an element name (body, h1, p, br)
• The start tag is the name surrounded by angle brackets: <h1>
• The end tag is a slash and the name surrounded by angle brackets </h1>
• The element content occurs between the start tag and the end tag
• Some HTML elements have no content
• Some HTML elements have no end tag

Basic Notes - Useful Tips


When you write HTML text, you can never be sure how the text is displayed in another browser. Some
people have large computer displays, some have small. The text will be reformatted every time the user
resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In
HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use
the <br> tag to create lists. Wait until you have learned about HTML lists.)
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

7 [Link] Elsheikh
HTML Attributes
Attributes provide additional information to an HTML element.

HTML Tag Attributes


HTML tags can have attributes. Attributes provide additional information to an HTML element. Attributes
always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.

Attributes Example 1:
<h1> defines the start of a heading.
<h1 align="center"> has additional information about the alignment.
<html><body><h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of
this page. The heading above is aligned to the center of this page.</p>
</body></html>

Attributes Example 2:
<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background color.
<html><body bgcolor="yellow"><h2>Look: Colored Background!</h2></body></html>

Use Lowercase Attributes


Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands
lowercase attributes/attribute values.

Always Quote Attribute Values


Attribute values should always be enclosed in quotes. Double style quotes are the most common, but
single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single
quotes:
name='John "ShotGun" Nelson'

8 [Link] Elsheikh
HTML Text Formatting
HTML defines a lot of elements for formatting output, like bold or italic text.
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

How to View HTML Source


Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will
open a window that shows you the HTML code of the page.

HTML Character Entities


Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in
the text.
To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an
HTML tag. If we want the browser to actually display these characters we must insert character entities in
the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and
finally a semicolon (;).

To display a less than sign in an HTML document we must write: &lt; or &#60;

9 [Link] Elsheikh
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.
Note that the entities are case sensitive.
<html><body><p>Character entities</p><p>&X;</p><p>Substitute the "X" with an entity number like
"#174" or an entity name like "pound" to see the result. </p></body></html>

Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of
them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Characters Entities :


Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;

Some Other Commonly Used Characters Entities :


Result Description Entity Name Entity Number
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;

HTML Links

10 [Link] Elsheikh
HTML uses a hyperlink to link to another document on the Web.

Examples
Create hyperlinks
This example demonstrates how to create links in an HTML document.

<html><body><p><a href="[Link]">This text</a> is a link to a page on this Web site.</p>


<p><a href="[Link] text</a> is a link to a page on the World Wide Web.
</p></body></html>

An image as a link
This example demonstrates how to use an image as a link.

<html><body><p>You can also use an image as a link:<a href="[Link]">


<img border="0" src="[Link]" width="65" height="38"></a></p></body></html>

The Anchor Tag and the Href Attribute


HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to
link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to W3Schools:
<a href="[Link] W3Schools!</a>

The line above will look like this in a browser:

The Target Attribute


With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:

<a href="[Link] target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

11 [Link] Elsheikh
The name attribute is used to create a named anchor. When using named anchors we can create links that
can jump directly into a specific section on a page, instead of letting the user scroll around to find what
he/she is looking for.
Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to
use.
The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="[Link] Jump to the Useful Tips


Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:
<a href="#tips">Jump to the Useful Tips Section</a>

Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this:
href="[Link] you will generate two HTTP requests to the server, because the
server will add a slash to the address and create a new request like this:
href=[Link]
Named anchors are often used to create "table of contents" at the beginning of a large document. Each
chapter within the document is given a named anchor, and links to each of these anchors are put at the top
of the document.
If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No
error occurs.

Link Tags
Tag Description
<a> Defines an anchor

HTML Tables

12 [Link] Elsheikh
With HTML you can create tables.

Examples
Tables
This example demonstrates how to create tables in an HTML document.

<html><body><p>Each table starts with a table tag. Each table row starts with a tr tag. Each table data
starts with a td tag.</p><h4>One column:</h4><table border="1"><tr>
<td>100</td></tr></table><h4>One row and three columns:</h4><table border="1">

<tr><td>100</td><td>200</td><td>300</td></tr></table><h4>Two rows and three columns:</h4><table


border="1"><tr> <td>100</td> <td>200</td><td>300</td></tr><tr>
<td>400</td> <td>500</td> <td>600</td></tr></table></body></html>

Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:


row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

13 [Link] Elsheikh
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can
be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table
Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty Cells in a Table

14 [Link] Elsheikh
Table cells with no content are not displayed very well in most browsers.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:


row 1, cell 1 row 1, cell 2
row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1

Basic Notes - Useful Tips


The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this
to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working
example in our XML tutorial.

Table Tags
Tag Description
<table> Defines a table

15 [Link] Elsheikh
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer

HTML Lists
HTML supports ordered, unordered and definition lists.

Examples
An unordered list
This example demonstrates an unordered list.
<html><body><h4>An Unordered List:</h4><ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
</body></html>
An ordered list
This example demonstrates an ordered list.
<html><body><h4>An Ordered List:</h4><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
</body></html>

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An
unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:


• Coffee
• Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

16 [Link] Elsheikh
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the
<ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:


1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists
A definition list is not a list of items. This is a list of terms and an explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-
list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:


Coffee Black hot drink
Milk White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other
lists, etc.

List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list

17 [Link] Elsheikh
<dt> Defines a definition term
<dd> Defines a definition description

HTML Forms and Input


HTML Forms are used to select different kinds of user input.

Examples
Text fields
This example demonstrates how to create text fields on an HTML page. A user can write text in a text field.
<html><body><form action="">First name:<input type="text" name="firstname"><br> Last name: <input
type="text" name="lastname"></form></body></html>
Password fields
This example demonstrates how to create a password field on an HTML page.
<html><body><form action="">Username: <input type="text" name="user"><br> Password: <input
type="password" name="password"></form>
<p>Note that when you type characters in a password field, the browser displays asterisks or bullets
instead of the characters.</p></body></html>

Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-
down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.

<form>
<input>
<input>
</form>

Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most
commonly used input types are explained below.

18 [Link] Elsheikh
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form> First name:


<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

How it looks in a browser:


First name:
Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20
characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

How it looks in a browser:


o Male
o Female

Note that only one option can be chosen.

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of
choices.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>19 [Link] Elsheikh
I have a car:
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:

The Form's Action Attribute and the Submit Button


When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's
action attribute defines the name of the file to send the content to. The file defined in the action attribute
usually does something with the received input.

<form name="input"
action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

How it looks in a browser:


Username: Submit

If you type some characters in the text field above, and click the "Submit" button, you will send your input
to a page called "html_form_action.asp". That page will show you the received input.

Form Tags
Tag Description
<form> Defines a form for user input

<input> Defines an input field

20 [Link] Elsheikh
<textarea> Defines a text-area (a multi-line text input control)

<label> Defines a label to a control

<fieldset> Defines a fieldset

<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<option> Defines an option in the drop-down box

<button> Defines a push button

HTML Images
With HTML you can display images in a document.

Examples
Insert images
This example demonstrates how to display images in your Web page.
<html><body><p>An image:<img src="[Link]"width="144" height="50"></p>
<p>A moving image:<img src="[Link]"width="48" height="48"></p>
<p>Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p></body></html>

Insert images from different locations


This example demonstrates how to display images from another folder or another server in your Web
page.
<html><body><p>An image from another folder:<img src="/images/[Link]" width="33"
height="32"></p>
<p>An image from W3Schools:<img src="[Link]
</body></html>

The Image Tag and the Src Attribute


In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

21 [Link] Elsheikh
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the
src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. An image named "[Link]" located in the
directory "images" on "[Link]" has the URL: [Link]
The browser puts the image where the image tag occurs in the document. If you put an image tag between
two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute


The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an
author-defined text:

<img src="[Link]" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The
browser will then display the alternate text instead of the image. It is a good practice to include the "alt"
attribute for each image on a page, to improve the display and usefulness of your document for people
who have text-only browsers.

Basic Notes - Useful Tips


If an HTML file contains ten images - eleven files are required to display the page right. Loading images take
time, so my best advice is: Use images carefully.

Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map

HTML Backgrounds
A good background can make a Web site look really great.

Examples

22 [Link] Elsheikh
Good background and text color
An example of a background color and a text color that makes the text on the page easy to read.
<html><body bgcolor="#d0d0d0">
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p>This is another paragraph. This is another paragraph. This is another paragraph. This is another
paragraph. </p></body></html>
Bad background and text color

An example of a background color and a text color that makes the text on the page difficult to read.
<html><body bgcolor="#ffffff" text="yellow">
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p>This is another paragraph. This is another paragraph. This is another paragraph. This is another
paragraph. </p></body></html>

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or
an image.

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a
hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.

Background
The background attribute specifies a background-image for an HTML page. The value of this attribute is the
URL of the image you want to use. If the image is smaller than the browser window, the image will repeat
itself until it fills the entire browser window.

<body background="[Link]">
<body background="[Link]
23 [Link] Elsheikh
The URL can be relative (as in the first line above) or absolute (as in the second line above).
Note: If you want to use a background image, you should keep in mind:
• Will the background image increase the loading time too much?
• Will the background image look good with other images on the page?
• Will the background image look good with the text colors on the page?
• Will the background image look good when it is repeated on the page?
• Will the background image take away the focus from the text?

Basic Notes - Useful Tips

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of
HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from
its recommendations.

Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

CSS Tutorial
Save a lot of work with CSS!
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple
Web pages all at once.

24 [Link] Elsheikh
Introduction to CSS

What You Should Already Know


Before you continue you should have some basic understanding of the following:
 HTML / XHTML

What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say "This
is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The
layout of the document was supposed to be taken care of by the browser, without using any formatting
tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and
attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more
and more difficult to create Web sites where the content of HTML documents was clearly separated from
the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting
consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute
in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in your Web, just by editing one single CSS document!
CSS is a breakthrough in Web design because it allows developers to control the style and layout of
multiple Web pages all at once. As a Web developer you can define a style for each HTML element and

25 [Link] Elsheikh
apply it to as many Web pages as you want. To make a global change, simply change the style, and all
elements in the Web are updated automatically.

CSS Syntax
Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to
change, and each property can take a value. The property and value are separated by a colon, and
surrounded by curly braces:
body {color: black}

Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon.
The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-
align:
center;
color:
black;
font-family: arial
}

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all
the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{

color: green
}

26 [Link] Elsheikh
The class Selector
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph,
and one center-aligned paragraph. Here is how you can do it with styles:

[Link] {text-align: right}


[Link] {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

Note: To apply more than one class per given element, the syntax is:
<p class="center bold"> This is a paragraph.</p>

The paragraph above will be styled by the class "center" AND the class "bold".
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that
have a certain class. In the example below, all HTML elements with class="center" will be center- aligned:

.center {text-align: center}


In the code below both the h1 element and the p element have class="center". This means that both
elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center"> This paragraph will also be center-aligned. </p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

Add Styles to Elements with Particular Attributes


You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of "text":

input[type="text"] {background-color: blue}

The id Selector

27 [Link] Elsheikh
You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style
rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":

p#para1
{
text-
align:
center;
color: red
}

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date.
A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a
comment */ p
{

text-align: center;
/* This is another
comment */ color: black;
font-family: arial
}

How to Insert a Style Sheet


When a browser reads a style sheet, it will format the document according to it. There are three ways of
inserting a style sheet:

External Style Sheet

28 [Link] Elsheikh
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet using
the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

The browser will read the style definitions from the file [Link], and format the document according to
it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of
"margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

Internal Style Sheet


An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section by using the <style> tag, like this:

<head>
<style type="text/css"> hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}
</style>
</head>

The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support
styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is
possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}
-->

</style>
</head>

29 [Link] Elsheikh
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this
method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: sienna; margin-left:


20px"> This is a paragraph
</p>

Multiple Style Sheets


If some properties have been set for the same selector in different style sheets, the values will be inherited
from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:

h3
{

color: red;
text-align: left; font-size: 8pt
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align: right; font-size: 20pt
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color: red;
text-align: right; font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by
the internal style sheet.

30 [Link] Elsheikh
CSS Background
The CSS background properties define the background effects of an element.

Examples

Set the background color


This example demonstrates how to set the background color for an element.

<html> <head>
<style type="text/css">
body {background-color: yellow} h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style> </head> <body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body> </html>

Set an image as the background

This example demonstrates how to set an image as the background.

<html><head><style type="text/css">body
{ background-image:url('[Link]')}
</style></head><body></body></html>

How to repeat a background image

This example demonstrates how to repeat a background image.


<html><head><style type="text/css">body
{ background-image: url('[Link]');background-repeat: repeat}</style>
</head><body></body></html>

31 [Link] Elsheikh
How to repeat a background image only vertically

This example demonstrates how to repeat a background image only vertically.


<html><head><style type="text/css">body
{ background-image: url('[Link]');background-repeat: repeat-y}
</style></head><body></body></html>

How to repeat a background image only horizontally

This example demonstrates how to repeat a background image only horizontally.


<html><head><style type="text/css">body
{ background-image: url('[Link]');background-repeat: repeat-x}
</style></head><body></body></html>

How to display a background image only one time

This example demonstrates how to display a background image only one time
<html><head><style type="text/css">body
{ background-image: url('[Link]');background-repeat: no-repeat}
</style></head><body></body></html>

How to place the background image

This example demonstrates how to place the image on the page.

<html><head><style type="text/css">body
{ background-image:url('[Link]');background-repeat:no-repeat;background-attachment:fixed;
background-position:center; }

32 [Link] Elsheikh
</style></head><body>
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to
"fixed".</p></body></html>

CSS Background Properties


The CSS background properties allow you to control the background color of an element, set an image as
the background, repeat a background image vertically or horizontally, and position an image on a page.
Property Description Values
background A shorthand property for background-color
setting all background background-image
properties in one declaration background-repeat
background-attachment
background-position
background-attachment Sets whether a background scroll
image is fixed or scrolls with fixed
the rest of the page
background-color Sets the background color of color-rgb
an element color-hex
color-name
transparent
background-image Sets an image as the url(URL)
background none
background-position Sets the starting position of a top left
background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Sets if/how a background repeat
image will be repeated repeat-x
repeat-y
no-repeat

CSS Text
The CSS text properties define the appearance of text.

Examples

33 [Link] Elsheikh
Set the color of the text

This example demonstrates how to set the color of the text.

<html><head><style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd}


p {color: rgb(0,0,255)}</style></head>
<body><h1>This is header 1</h1><h2>This is header 2</h2><p>This is a paragraph</p>
</body></html>

Set the background-color of the text

This example demonstrates how to set the background-color of a part of the text.

<html><head><style type="text/css">[Link]
{background-color:yellow}</style></head>
<body><p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is
a text. This is a text. This is a text. This is a text. <span class="highlight">This is a
text.</span></p></body></html>

Specify the space between characters

This example demonstrates how to increase or decrease the space between characters.

<html><head><style type="text/css">h1 {letter-spacing: -3px}h4 {letter-spacing: 0.5cm}


</style></head><body><h1>This is header 1</h1><h4>This is header 4</h4></body>
</html>

Specify the space between lines

This example demonstrates how to specify the space between the lines in a paragraph.<html>

<head><style type="text/css">[Link] {line-height: 90%}[Link] {line-height: 200%}</style>


</head><body><p>This is a paragraph with a standard line-height. The default line height in most browsers
is about 110% to 120%.

34 [Link] Elsheikh
This is a paragraph with a standard [Link] is a paragraph with a standard line-height.
</p><p class="small">
This is a paragraph with a smaller [Link] is a paragraph with a smaller line-height.
This is a paragraph with a smaller [Link] is a paragraph with a smaller line-height.</p>
<p class="big">
This is a paragraph with a bigger [Link] is a paragraph with a bigger line-height.
This is a paragraph with a bigger [Link] is a paragraph with a bigger line-height.</p>
</body></html>

Align the text

This example demonstrates how to align the text.

<html><head><style type="text/css">h1 {text-align: center}h2 {text-align: left} h3 {text-align:


right}</style></head>
<body><h1>This is header 1</h1><h2>This is header 2</h2><h3>This is header 3</h3></body>
</html>

Decorate the text

This example demonstrates how to add decoration to text.

<html><head><style type="text/css">h1 {text-decoration: overline}


h2 {text-decoration: line-through}h3 {text-decoration: underline}a {text-decoration: none}</style>
</head>
<body><h1>This is header 1</h1><h2>This is header 2</h2><h3>This is header 3</h3>
<p><a href="[Link] is a link</a></p></body></html>

Indent text

This example demonstrates how to indent the first line of a paragraph.

<html><head><style type="text/css">p {text-indent: 1cm}</style></head>


<body><p>This is some text in a paragraph This is some text in a paragraph

35 [Link] Elsheikh
This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is
some text in a paragraph </p></body></html>

Control the letters in a text

This example demonstrates how to control the letters in a text.

<html><head><style type="text/css">
[Link] {text-transform: uppercase}
[Link] {text-transform: lowercase}
[Link] {text-transform: capitalize}</style></head>
<body><p class="uppercase">This is some text in a paragraph</p>
<p class="lowercase">This is some text in a paragraph</p>
<p class="capitalize">This is some text in a paragraph</p></body></html>

Set the text direction of an element

This example demonstrates how to change the text direction of an element.

<html><head><style type="text/css">[Link]
{direction: rtl} [Link]
{direction: ltr} </style></head>
<body>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div></body></html>

Increase the white space between words

This example demonstrates how to increase the white space between words in a paragraph.

<html><head><style type="text/css">p
{ word-spacing: 30px}</style></head>

36 [Link] Elsheikh
<body>
<p>This is some text. This is some text.</p>
</body></html>

Disable text wrapping inside an element

This example demonstrates how to disable text wrapping inside an element.

<html><head><style type="text/css">p
{white-space: nowrap}
</style></head><body>
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some
text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p></body></html>

CSS Text Properties


The CSS text properties allow you to control the appearance of text. It is possible to change the color of a
text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the
first line in a text, and more.

Property Description Values


color Sets the color of a text color
direction Sets the text direction ltr
rtl
line-height Sets the distance between normal
lines number
length
%
letter-spacing Increase or decrease the normal
space between characters length
text-align Aligns the text in an element left
right
center
justify
text-decoration Adds decoration to text none
underline
overline
line-through
blink

37 [Link] Elsheikh
text-indent Indents the first line of text in length
an element %
text-shadow none
color
length
text-transform Controls the letters in an none
element capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Sets how white space inside normal
an element is handled pre
nowrap
word-spacing Increase or decrease the normal
space between words length

CSS Font

The CSS font properties define the font in text.

Examples

Set the font of a text

This example demonstrates how to set a font of a text.

<html><head><style type="text/css">h3 {font-family: times}p {font-family: courier}


[Link] {font-family: sans-serif}</style></head>
<body><h3>This is header 3</h3><p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p></body></html>
Set a paragraph font using the "caption" value

This example demonstrates how to set a paragraph font using the "caption" value.

<html><body><p>This is a normal paragraph</p>


<p style="font: caption">This is a paragraph with a "caption" font</p></body></html>

38 [Link] Elsheikh
Set the size of the font

This example demonstrates how to set the size of a font.

<html><head><style type="text/css">h1 {font-size: 150%}h2 {font-size: 130%}


p {font-size: 100%}</style></head>
<body><h1>This is header 1</h1><h2>This is header 2</h2><p>This is a paragraph</p></body>
</html>

Set the size of the font using font-size-adjust

This example demonstrates how to set the size of a font using font-size-adjust.

<html><head><style type="text/css">h1 {font-size-adjust: 0.50}h2 {font-size-adjust: 0.40}


p {font-size-adjust: 0.60}</style></head><body><h1>This is header 1</h1>
<h2>This is header 2</h2><p>This is a paragraph</p></body></html>

Set the style of the font

This example demonstrates how to set the style of a font.

<html><head><style type="text/css">h1 {font-style: italic}h2 {font-style: normal}


p {font-style: oblique}</style></head>
<body><h1>This is header 1</h1><h2>This is header 2</h2><p>This is a paragraph</p></body>
</html>

Set the variant of the font

This example demonstrates how to set the variant of a font.

<html><head><style type="text/css">[Link] {font-variant: normal}


[Link] {font-variant: small-caps}</style></head>
<body><p class="normal">This is a paragraph</p><p class="small">This is a paragraph</p>

39 [Link] Elsheikh
</body></html>

Set the boldness of the font

This example demonstrates how to set the boldness of a font.

<html><head><style type="text/css">[Link] {font-weight: normal}


[Link] {font-weight: bold}[Link] {font-weight: 900}</style></head>
<body><p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p><p class="thicker">This is a paragraph</p></body>
</html>

All the font properties in one declaration

This example demonstrates how to use the shorthand property for setting all of the font properties in one
declaration.

<html><head><style type="text/css">p
{font: italic small-caps 900 12px arial}</style></head>
<body><p>This is a paragraph</p></body></html>

CSS Font Properties


The CSS font properties allow you to change the font family, boldness, size, and the style of a text.

Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will
use a default font.

Property Description Values


font A shorthand property for setting all font-style font-
of the properties for a font in one variant font-
declaration weight
font-size/line-height font-
family
caption icon
menu
message-box
small-caption
status-bar

40 [Link] Elsheikh
font-family A prioritized list of font family names family-name
and/or generic family names for an generic-family
element
font-size Sets the size of a font xx-small
x-small small medium large
x-large xx-large smaller larger
length
%
font-size-adjust Specifies an aspect value for an none
element that will preserve the x- number
height of the first-choice font

font-stretch Condenses or expands the current normal wider


font-family narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

font-style Sets the style of the font normal italic


oblique

font-variant Displays text in a small-caps font or normal small-


a normal font caps

font-weight Sets the weight of a font normal bold


bolder
lighter 100
200
300
400
500
600
700
800
900

CSS Border

The CSS border properties define the borders around an element.

41 [Link] Elsheikh
Examples

All the border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the four borders in
one declaration, can have from one to three values.

<html><head><style type="text/css">p
{border: medium double rgb(250,0,255)}</style></head>
<body><p>Some text</p></body></html>

Set different borders on each side

This example demonstrates how to set different borders on each side of the element.

<html><head><style type="text/css">
[Link] {border-style: solid double}
[Link] {border-style: double solid}
[Link] {border-style: groove double}
[Link] {border-style: solid double groove}</style></head>
<body><p class="soliddouble">Some text</p><p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p><p class="three">Some text</p></body></html>

All the top border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the top border in one
declaration.

<html><head><style type="text/css">p
{border-top: medium solid #ff0000}</style></head>
<body><p>Some text.</p></body></html>

All the bottom border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the bottom border in
one declaration.

<html><head><style type="text/css">p

42 [Link] Elsheikh
{border-bottom: medium solid #ff0000}</style></head>
<body><p>Some text.</p></body></html>

All the left border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the left border in one
declaration.

<html><head><style type="text/css">p
{border-left: medium solid #ff0000}</style></head>
<body><p>Some text.</p></body></html>

All the right border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the right border in one
declaration.

<html><head><style type="text/css">p
{border-right: medium solid #ff0000}</style></head>
<body><p>Some text.</p></body></html>

Set the style of the four borders

This example demonstrates how to set the style of the four borders.

<html><head><style type="text/css">[Link] {border-style: dotted}


[Link] {border-style: dashed}
[Link] {border-style: solid}
[Link] {border-style: double}
[Link] {border-style: groove}
[Link] {border-style: ridge}
[Link] {border-style: inset}
[Link] {border-style: outset} </style></head>
<body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p>
<p class="solid">A solid border</p> <p class="double">A double border</p>
<p class="groove">A groove border</p> <p class="ridge">A ridge border</p>

43 [Link] Elsheikh
<p class="inset">An inset border</p> <p class="outset">An outset border</p> </body></html>

Set the style of the top border

This example demonstrates how to set the style of the top border.

<html><head><style type="text/css">
[Link] {border-top-style: dotted}
[Link] {border-top-style: dashed}
[Link] {border-top-style: solid}
[Link] {border-top-style: double}
[Link] {border-top-style: groove}
[Link] {border-top-style: ridge}
[Link] {border-top-style: inset}
[Link] {border-top-style: outset} </style></head>
<body><p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p>
<p class="solid">A solid border</p> <p class="double">A double border</p>
<p class="groove">A groove border</p> <p class="ridge">A ridge border</p>
<p class="inset">An inset border</p> <p class="outset">An outset border</p></body></html>

Set the style of the bottom border

This example demonstrates how to set the style of the bottom border.

<html><head><style type="text/css">
[Link] {border-bottom-style: dotted}
[Link] {border-bottom-style: dashed}
[Link] {border-bottom-style: solid}
[Link] {border-bottom-style: double}
[Link] {border-bottom-style: groove}
[Link] {border-bottom-style: ridge}
[Link] {border-bottom-style: inset}
[Link] {border-bottom-style: outset} </style></head>

44 [Link] Elsheikh
<body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p>
<p class="solid">A solid border</p> <p class="double">A double border</p>
<p class="groove">A groove border</p> <p class="ridge">A ridge border</p>
<p class="inset">An inset border</p> <p class="outset">An outset border</p></body></html>

Set the style of the left border

This example demonstrates how to set the style of the left border.

<html><head><style type="text/css">
[Link] {border-left-style: dotted}
[Link] {border-left-style: dashed}
[Link] {border-left-style: solid}
[Link] {border-left-style: double}
[Link] {border-left-style: groove}
[Link] {border-left-style: ridge}
[Link] {border-left-style: inset}
[Link] {border-left-style: outset} </style></head>
<body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p>
<p class="solid">A solid border</p> <p class="double">A double border</p>
<p class="groove">A groove border</p> <p class="ridge">A ridge border</p>
<p class="inset">An inset border</p> <p class="outset">An outset border</p></body></html>

Set the style of the right border

This example demonstrates how to set the style of the right border.

<html><head><style type="text/css">
[Link] {border-right-style: dotted}

45 [Link] Elsheikh
[Link] {border-right-style: dashed}
[Link] {border-right-style: solid}
[Link] {border-right-style: double}
[Link] {border-right-style: groove}
[Link] {border-right-style: ridge}
[Link] {border-right-style: inset}
[Link] {border-right-style: outset} </style> </head>
<body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p>
<p class="solid">A solid border</p> <p class="double">A double border</p>
<p class="groove">A groove border</p> <p class="ridge">A ridge border</p>
<p class="inset">An inset border</p> <p class="outset">An outset border</p></body></html>

All the width of the border properties in one declaration

This example demonstrates a shorthand property for setting the width of the four borders in one
declaration, can have from one to four values.

<html><head><style type="text/css">
[Link] {border-style: solid;border-width: 5px}
[Link] {border-style: solid;border-width: thick}
[Link] {border-style: solid;border-width: 5px 10px}
[Link] {border-style: solid;border-width: 5px 10px 1px}
[Link] {border-style: solid;border-width: 5px 10px 1px medium}</style></head>
<body><p class="one">Some text</p> <p class="two">Some text</p>
<p class="three">Some text</p> <p class="four">Some text</p>
<p class="five">Some text</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border- style"
property to set the borders first.</p></body></html>
Set the width of the top border

This example demonstrates how to set the width of the top border.

<html><head><style type="text/css">
[Link] {border-style: solid;border-top-width: 15px}

46 [Link] Elsheikh
[Link] {border-style: solid;border-top-width: thin}</style></head><body>
<p class="one"><b>Note:</b> The "border-top-width" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p></body></html>

Set the width of the bottom border

This example demonstrates how to set the width of the bottom border.

<html><head><style type="text/css">
[Link] {border-style: solid;border-bottom-width: 15px}
[Link] {border-style: solid;border-bottom-width: thin}</style></head><body>
<p class="one"><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use
the "border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p></body></html>

Set the width of the left border

This example demonstrates how to set the width of the left border.

<html><head><style type="text/css">
[Link] {border-style: solid;border-left-width: 15px}
[Link] {border-style: solid;border-left-width: thin}
</style></head><body>
<p class="one"><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p></body></html>

Set the width of the right border

This example demonstrates how to set the width of the right border.

<html><head><style type="text/css">
[Link] {border-style: solid;border-right-width: 15px}

47 [Link] Elsheikh
[Link] {border-style: solid;border-right-width: thin}
</style></head><body>
<p class="one"><b>Note:</b> The "border-right-width" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p></body></html>

Set the color of the four borders

This example demonstrates how to set the color of the four borders. It can have from one to four colors.

<html><head><style type="text/css">
[Link] {border-style: solid;border-color: #0000ff}
[Link] {border-style: solid;border-color: #ff0000 #0000ff}
[Link] {border-style: solid;border-color: #ff0000 #00ff00 #0000ff}
[Link] {border-style: solid;border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)}</style></head>
<body><p class="one">One-colored border!</p> <p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border- style"
property to set the borders first.</p></body></html>

Set the color of the top border

This example demonstrates how to set the color of the top border.

<html><head><style type="text/css">
p {border-style: solid;border-top-color: #ff0000}</style></head>
<body><p>Some text.</p></body></html>

Set the color of the bottom border

This example demonstrates how to set the color of the bottom border.

<html><head><style type="text/css">
p {border-style: solid;border-bottom-color: #ff0000}</style></head>

48 [Link] Elsheikh
<body><p>Some text.</p></body></html>

Set the color of the left border

This example demonstrates how to set the color of the left border.

<html><head><style type="text/css">
P {border-style: solid;border-left-color: #ff0000}</style></head>
<body><p>Some text.</p></body></html>

Set the color of the right border

This example demonstrates how to set the color of the right border.

<html><head><style type="text/css">
p {border-style: solid;border-right-color: #ff0000}</style></head>
<body><p>Some text.</p></body></html>

CSS Border Properties


The CSS border properties allow you to specify the style and color of an element's border. In HTML we use
tables to create borders around a text, but with the CSS border properties we can create borders with nice
effects, and it can be applied to any element.
Property Description Values
border A shorthand property for setting border-width
all of the properties for the four border-style
borders in one declaration border-color

border-bottom A shorthand property for setting border-bottom-width


all of the properties for the bottom border-style
border in one declaration border-color

border-bottom-color Sets the color of the bottom border-color


border
border-bottom-style Sets the style of the bottom border border-style

border-bottom-width Sets the width of the bottom thin


border medium
thick
length
border-color Sets the color of the four borders, color
can have from one to four colors

49 [Link] Elsheikh
border-left A shorthand property for setting border-left-width
all of the properties for the left border-style border-
border in one declaration color

border-left-color Sets the color of the left border border-color

border-left-style Sets the style of the left border border-style

border-left-width Sets the width of the left border thin


medium
thick
length
border-right A shorthand property for border-right-width
setting all of the properties for the border-style border-color
right border in one declaration
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border thin medium thick length
border-style Sets the style of the four borders, none hidden dotted dashed
can have from one to four styles solid double groove ridge
inset outset
border-top A shorthand property for setting border-top-width border-
all of the properties for the top style border-color
border in one declaration
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thin medium thick length
border-width A shorthand property for setting thin medium thick length
the width of the four borders in
one declaration, can have from
one to four values

CSS Outlines

The CSS outline properties is used to draw a line around an element, outside the border edge.

Examples

Draw a line around an element (outline) (does not work in IE)

50 [Link] Elsheikh
This example demonstrates how to draw a line around an element, outside the border edge.

<html><head><style type="text/css">
p {border: red solid thin;outline: green dotted thick}</style></head><body>
<p>Some text.</p></body></html>

Set the style of an outline (does not work in IE)

This example demonstrates how to set the style of an outline.

<html><head><style type="text/css">
p {border: red solid thin;}
[Link] {outline-style: dotted}
[Link] {outline-style: dashed}
[Link] {outline-style: solid}
[Link] {outline-style: double}
[Link] {outline-style: groove}
[Link] {outline-style: ridge}
[Link] {outline-style: inset}
[Link] {outline-style: outset}</style>
</head>
<body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p> <p class="double">A double outline</p>
<p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p> <p class="outset">An outset outline</p></body></html>

Set the color of an outline (does not work in IE)

This example demonstrates how to set the color of an outline.

<html><head><style type="text/css">
p {border: red solid thin;outline-style: solid;outline-color: #00ff00}</style></head><body>
<p>Some text.</p></body></html>

51 [Link] Elsheikh
Set the width of an outline (does not work in IE)

This example demonstrates how to set the width of an outline.

<html><head><style type="text/css">
[Link] {border: red solid thin;outline-style: solid;outline-width: thick}
[Link] {border: red solid thin;outline-style: solid;outline-width: 2px}</style></head>
<body> <p class="one">Some text.</p> <p class="two">Some text.</p></body></html>

CSS Outline Properties


An outline is a line that is drawn around elements, outside the border edge, to make the element "stand
out".
The CSS outline properties sets the outlines around elements. You can specify the style, color, and width of
the outline.
Note: Outlines do not take up space, and they do not have to be rectangular.
Property Description Values
outline A shorthand property for setting outline-color
all the outline properties in one outline-style
declaration outline-width
outline-color Sets the color of the outline color
around an element invert
outline-style Sets the style of the outline none
around an element dotted
dashed
solid
double
groove
ridge inset
outset

outline-width Sets the width of the outline thin


around an element medium
thick
length

CSS Margin

The CSS margin properties define the space around elements.

Examples

All the margin properties in one declaration

52 [Link] Elsheikh
This example demonstrates how to set a shorthand property for setting all of the margin properties in one
declaration.

<html><head><style type="text/css">[Link] {margin: 2cm 4cm 3cm 4cm}</style></head>


<body><p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p></body></html>

Set the top margin of a text using a cm value

This example demonstrates how to set the top margin of a text using a cm value.

<html><head><style type="text/css">[Link] {margin-top: 5cm}</style></head>


<body><p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p></body></html>

Set the top margin of a text using a percent value

This example demonstrates how to set the top margin of a text using a percent value.

<html><head><style type="text/css">
[Link] {margin-top: 25%}</style></head><body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p></body></html>

Set the bottom margin of a text using a cm value

This example demonstrates how to set the bottom margin of a text using a cm value.

<html><head><style type="text/css">
[Link] {margin-bottom: 2cm}</style></head>
<body><p>This is a paragraph with no margin specified</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin</p>

53 [Link] Elsheikh
<p>This is a paragraph with no margin specified</p></body></html>

Set the bottom margin of a text using a percent value

This example demonstrates how to set the bottom margin of a text using a percent value.

<html><head><style type="text/css">
[Link] {margin-bottom: 25%}</style></head>
<body><p>This is a paragraph with no margin specified</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified</p></body></html>

Set the left margin of a text using a cm value

This example demonstrates how to set the left margin of a text using a cm value.

<html><head><style type="text/css">[Link] {margin-left: 2cm}</style></head>


<body><p>This is a paragraph with no margin specified</p>
<p class="leftmargin">This is a paragraph with a specified left margin</p></body></html>

Set the left margin of a text using a percent value

This example demonstrates how to set the left margin of a text using a percent value.

<html><head><style type="text/css">
[Link] {margin-left: 25%}</style></head>
<body><p>This is a paragraph with no margin specified</p>
<p class="leftmargin">This is a paragraph with a specified left margin</p></body></html>

Set the right margin of a text using a cm value

This example demonstrates how to set the right margin of a text using a cm value.

<html><head><style type="text/css">[Link] {margin-right: 5cm}</style></head>


<body>
<p style="text-align:right">This is a right aligned paragraph with no margin specified</p>

54 [Link] Elsheikh
<p class="rightmargin" style="text-align:right">This is a right aligned paragraph with a specified right
margin</p></body></html>

Set the right margin of a text using a percent value

This example demonstrates how to set the right margin of a text using a percent value.

<html><head><style type="text/css">
[Link] {margin-right:25%}</style></head>
<body><p style="text-align:right">This is a right aligned paragraph with no margin specified</p>
<p class="rightmargin" style="text-align:right">This is a right aligned paragraph with a specified right
margin</p></body></html>

CSS Margin Properties


The CSS margin properties define the space around elements. It is possible to use negative values to
overlap content. The top, right, bottom, and left margin can be changed independently using separate
properties. A shorthand margin property can also be used to change all of the margins at once.

Property Description Values


margin A shorthand property for setting the margin-top margin-
margin properties in one declaration right margin-bottom
margin-left
margin-bottom Sets the bottom margin of an auto
element length
%
margin-left Sets the left margin of an element auto
length
%
margin-right Sets the right margin of an element auto
length
%
margin-top Sets the top margin of an element auto
length
%

CSS Padding

The CSS padding properties define the space between the element border and the element content.

Examples

55 [Link] Elsheikh
All the padding properties in one declaration

This example demonstrates a shorthand property for setting all of the padding properties in one
declaration, can have from one to four values.

<html><head><style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style></head>
<body><table border="1"><tr><td class="test1"> This is a tablecell with equal padding on each side.
</td></tr></table><br /><table border="1"><tr><td class="test2">
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.
</td></tr></table></body></html>

Set the top padding using a cm value

This example demonstrates how to set the top padding of a table cell using a cm value.

<html><head><style type="text/css">
td {padding-top: 2cm}</style></head>
<body><table border="1"><tr><td>This is a tablecell with a top padding</td></tr>
</table></body></html>

Set the top padding using a percent value

This example demonstrates how to set the top padding of a table cell using a percent value.

<html><head><style type="text/css"> td
{padding-top: 10%}</style></head>
<body><table border="1"><tr><td>This is a tablecell with a top padding</td></tr>
</table></body></html>
Set the bottom padding using a cm value

This example demonstrates how to set the bottom padding of a table cell using a cm value.

<html><head><style type="text/css">
td {padding-bottom: 2cm}</style></head>

56 [Link] Elsheikh
<body><table border="1"><tr><td>This is a tablecell with a bottom padding</td></tr>
</table></body></html>

Set the bottom padding using a percent value

This example demonstrates how to set the bottom padding of a table cell using a percent value.

<html><head><style type="text/css">
Td {padding-bottom: 10%}</style></head>
<body><table border="1"><tr><td>This is a tablecell with a bottom padding</td></tr>
</table></body></html>

Set the left padding using a cm value

This example demonstrates how to set the left padding of a table cell using a cm value.

<html><head><style type="text/css">
td {padding-left: 2cm}</style></head>
<body><table border="1"><tr><td>
This is a tablecell with a left padding. This is a tablecell with a left padding.</td></tr></table>
</body></html>

Set the left padding using a percent value

This example demonstrates how to set the left padding of a table cell using a percent value.

<html><head><style type="text/css">
td {padding-left: 10%}</style></head>
<body><table border="1"><tr><td>This is a tablecell with a left padding</td></tr>
</table></body></html>

Set the right padding using a cm value

This example demonstrates how to set the right padding of a table cell using a cm value.

<html><head><style type="text/css">
td {padding-right: 5cm}</style></head>

57 [Link] Elsheikh
<body><table border="1"><tr><td>This is a tablecell with a right padding. This is a tablecell with a right
padding.</td></tr></table></body></html>

Set the right padding using a percent value

This example demonstrates how to set the right padding of a table cell using a percent value.

<html><head><style type="text/css">
td{padding-right: 10%}</style></head>
<body><table border="1"><tr><td>This is a tablecell with a right padding</td></tr>
</table></body></html>

CSS Padding Properties


The CSS padding properties define the space between the element border and the element content.
Negative values are not allowed. The top, right, bottom, and left padding can be changed independently
using separate properties. A shorthand padding property is also created to control multiple sides at once.
Property Description Values
padding A shorthand property for setting all of the padding padding-top padding-right
properties in one declaration padding-bottom padding-left
padding-bottom Sets the bottom padding of an element length
%
padding-left Sets the left padding of an element length
%
padding-right Sets the right padding of an element length
%
padding-top Sets the top padding of an element length
%

CSS Summary
This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites
at once.
You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify
padding and margins of elements.

58 [Link] Elsheikh
59 [Link] Elsheikh
60 [Link] Elsheikh

You might also like