Css

To create a web page with all types of cascading style sheets.
Cascading Style Sheets (CSS) have been seriously underated. Maybe it's because web designers
think it's harder than what it is. The truth is, CSS is incredibly easy!
With CSS, you can define all your common styles in an external Style Sheet. This way, if you
want to change every occurence of a style throughout your site, you only need to update one
place.
HTML has its limitations when it comes to layout. Sure, you have 6 different levels of headings
and 6 different sizes of fonts. You also have tables, and you have control over alignment etc.
These are good enough to get a reasonable looking document that shows the true structure of
information. However, it's a far cry from some of the excellent layout & design that we see in
magazines and printed brochures etc.
CSS helps us achieve such layouts.
With CSS, you have much better control over the layout of your web pages. You can specify
exactly how big a font will be, exactly where an element will be on a page, what the page will
look like when printed, and much more.
CSS can also save you a lot of time, particularly when maintaining a large site. Also, the World
Wide Web Consortium (W3C) recommends that web developers use CSS tags instead of HTML
tags wherever possible. The W3C are gradually phasing out quite a few of these HTML tags.
Advantages of CSS
CSS saves time

When most of us first learn HTML, we get taught to set the font face, size, colour, style
etc every time it occurs on a page. This means we find ourselves typing (or copying &
pasting) the same thing over and over again. With CSS, you only have to specify these
details once for any element. CSS will automatically apply the specified styles whenever
that element occurs.
Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element, you only have to make an edit in one place.
Superior styles to HTML

CSS has a much wider array of attributes than HTML.
Disadvantages of CSS
Browser compatibility
Browsers have varying levels of compliance with Style Sheets. This means that some
Style Sheet features are supported and some aren't. To confuse things more, some
browser manufacturers decide to come up with their own proprietary tags.
Fortunately, browser compatibility is becoming less of an issue as the latest browser
versions are much more standards-compliant than their earlier counterparts.
Internal CSS
Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover
internal and external, as they are the only flavors a designer should utilize. In this lesson, we
cover the basics of the easier type, internal. When using internal CSS, you must add a new tag,
<style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage.
CSS Code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
This doesn't actually do anything visually. The code style tag just tells the browser that we will
be defining some CSS to be used on this page.
Creating Internal CSS Code

CSS code is not written the same way as HTML code is. This makes sense because CSS is not
HTML, but rather a way of manipulating existing HTML. Below is an example of some simple,
yet fully functional, CSS code.
CSS Code:
<html>
<head>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Display:
White text on a black background!
You probably noticed that in our CSS code we were altering the <body> and <p> HTML tags.
The great thing about CSS is that it is an intuitive language. Once you understand the general
format for CSS code, you are pretty much set.
General CSS Format:
"HTML tag" { "CSS Property" : "Value" ; }
Back in our code example, we manipulated <p> and <body>, both well known HTML tags. To
clarify, here is a step-by-step process of what is going on in that first line of CSS code where we
played around with "p".
We chose the HTML element we wanted to manipulate. - p{ : ; }

Then we chose the CSS attribute color. - p { color: ; }
Next we choose the font color to be white. - p { color: white; }
Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code
that altered the <body>'s background:
We choose the HTML element Body - body { : ; }

Then we chose the CSS attribute. - body { background-color: ; }
Next we chose the background color to be black. - body { background-color:

black; }
Until you become accustomed to using CSS code, you will probably find your CSS code not
working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might
be that you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you
ever have issues with the correct format for CSS.
<html>
<head>
<style>
body { background-color: blue; }
p { color: white; }
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the style tag we are able to modify
the appearance of HTML elements.</p>
</body>
</html>
External CSS
When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a
separate file allows the web designer to completely differentiate between content (HTML) and
design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file
extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. If
you're confused, don't worry. We are going to walk you through the whole process
ile Creation
Let us get started by making that external CSS file. Open up notepad.exe, or any other plain text
editor and type the following CSS code.
CSS Code:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as
notepad likes to do by default. Name the file "test.css" (without the quotes). Now create a new
HTML file and fill it with the following code.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because

we changed it with CSS! </p>
</body>
</html>
Then save this file as "index.html" (without the quotes) in the same directory as your CSS file.
Now open your HTML file in your web browser and it should look something like this..
Display:
A White Header
This paragraph has a blue font. The background color of this page is gray because we changed it
with CSS!
Congratulations! You just made your first website that uses External CSS! Now, let us move on
to the fun stuff.
Why Use External CSS?
It keeps your website design and content separate.

It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a
single CSS file.
Inline CSS has the highest priority out of external, internal, and inline CSS. This means
that you can override styles that are defined in external or internal by using inline CSS.
However, inline CSS detracts from the true purpose of CSS, so use it sparingly.
CSS Inline - An HTML Attribute
Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an
HTML element all you have to do is specify the desired CSS properties with the style
HTML attribute. Let's add some style to a paragraph tag.
CSS Code:
<p style="background: blue; color: white;">A new background and

font color with inline CSS</p>
Display:
A new background and font color with inline CSS
If you have read through the beginning of this CSS tutorial, you probably have a good
idea of what is going on. Below is the general form for setting inline CSS in any HTML
element.
Pseudo Code:
<htmltag style="cssproperty1: value; cssproperty2: value;"> </htmltag>
The normal rules of CSS apply inside the style attribute. Each CSS statement must be
separated with a semicolon ";" and colons appear between the CSS property and its value.
Common Inline CSS Mistakes
When using CSS inline you must be sure not to use quotations within your inline CSS. If
you use quotations the browser will interpret this as the end of your style value. Instead,
copy our form as we have displayed below.
CSS Code:
<p style="background: url("yellow_rock.gif");">

This is broken</p>
<p style="background: url(yellow_rock.gif);">
This is workin'</p>
Display:
This is broken
This is workin'
<html>
<head>
<style>
</style>
</head>
<body>
<p style="background: blue; color: white;">A new background and font color with
inline CSS</p>
<p style="background: url("http://www.tizag.com/cssT/yellow_rock.gif");">

This is broken</p>
<p style="background: url(http://www.tizag.com/cssT/yellow_rock.gif);">

This is workin'</p>
</body>
</html>
Cascading Style Sheets

CSS is the acronym for: Cascading Style Sheets. CSS is an extension to basic HTML that
allows you to style your web pages.
An example of a style change would be to make words bold. In standard HTML you would use
the <b> tag like so:
<b>make me bold</b>
This works fine, and there is nothing wrong with it per se, except that now if you wanted to say
change all your text that you initially made bold to underlined, you would have to go to every
spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold,
make the font style Verdana and change its color to red, you would need a lot of code wrapped
around the text:
<font color="#FF0000" face="Verdana, Arial,
<strong>This is text</strong></font>
Helvetica, sans-serif">
This is verbose and contributes to making your HTML messy. With CSS, you can create a
custom style elsewhere and set all its properties, give it a unique name and then tag your
HTML to apply these stylistic properties:
<p>My CSS styled
text</p>
And in between the tags at the top of your web page you would insert this CSS code that defines
the style we just applied:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
</style>
In the above example we embed the css code directly into the page itself. This is fine for smaller
projects or in situations where the styles youre defining will only be used in a single page. There
are many times when you will be applying your styles to many pages and it would be a hassle to
have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your pages with the same CSS code, you also find
yourself having to edit each of these pages if you want to make a style change. Like with
JavaScript, you can define/create your CSS styles in a separate file and then link it to the page
you want to apply the code to:
<link href="myFirstStyleSheet.css" rel="stylesheet"
type="text/css">
The above line of code links your external style sheet called myFirstStyleSheet.css to the
HTML document. You place this code in between the <head> </head> tags in your web page.
How to create a linked external stylesheet

To create an external style sheet all you need to do is create a simple text document (on windows
you simply right-click and select new -> text document) and then change the file from type .txt to
.css.
You can change the file type by just changing the files extension. The files extension on
windows tells the computer what kind of file it is and allows the computer to determine how to
handle the file when for example you try to open it.
You probably guessed it; CSS files are just specially formatted text files, and much in the same
way HTML pages are. There is nothing special or different in the file itself, rather it is the
contents of the file that make an HTML document and a CSS page what they are.
When working with a external CSS document, there are a couple of points to remember:
1. You dont add these tags in the CSS page itself as you would if you embedded the CSS code in
your HTML:
<style type="text/css"></style>
Since the CSS link in your web page says that you are linking to a CSS page, you dont need to
declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above
tags do. Instead you would just add your CSS code directly to the page like so:
.myNewStyle {
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
In the above example I have created a series CSS classes that can be applied to any HTML tag
like so:
<p>My CSS styled
text</p>
or
<h2 class=my3rdNewStyle>My CSS styled
text</h2>
You will notice that in the above example I applied a CSS style to a <h2> tag. Normally this tag
sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels).
When you apply a CSS class to it, the CSS code overrides the default size that you would
normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see
that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then apply them to
various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to
look a certain way:
h1 { font-family: Garamond, "Times New Roman",
serif; font-size: 200%; }
What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you
dont have to apply a CSS class as we did before to any <h1> tags since they are automatically
all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very
powerful:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
The above CSS code sets that any <div></div> tag will now have a background color of
rgb(204,204,255) and have a padding of 0.5em and a thin 1 pixel border that is solid black.
A few things to explain about the above:
Color in CSS can be expressed in a few ways:
1. In Hex -> for example: #000000 this is black and this: #FF0000 is red.
2. In rgb -> rgb(204,204,255) is a light purple blue color.
3. With named colors like: red or blue
I typically use hex color since I am familiar with them or I just use named colors. So the last
example can be rewritten like so:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
So instead of rgb(204,204,255) , I just specified green.

By using RGB (RGB is the acronym for: Red Green Blue) and Hex color, you can really get
the exact color you want easily when you know your codes. Luckily many programs (like
Dreamweaver) provide easy to use color pickers for you so you dont need to know the values
for the code.
In this last example I will show you the super cool CSS code that allows you to create link rollover affects without images:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }
The above CSS will cause your links to change color when someone hovers their mouse pointer
over it, instant rollovers with no images! One important note with the above code, is that it is
important that the style declarations be in the right order:
link-visited-hover-active,
otherwise it may break in some browsers.
CSS is very powerful and allows you to do things that you cant do with standard HTML. It is
supported nicely now in all the modern browsers and is a must learn tool for web designers.
The above examples are just a small sample of what you can do with CSS, but it should be more
than enough for you to start styling your pages nicely.
Like with many technologies CSS has a lot of capability that most people will not need to use
often, if at all. So dont get caught in the trap of thinking that if there is some
functionality/feature available that you have to use it.
css - fonts
This tutorial will teach you how to set fonts of a content available in an HTML element. You can
set following font properties of an element:
The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.
The font-weight property is used to increase or decrease how bold or light a font appears.
The font-size property is used to increase or decrease the size of a font.
The font property is used as shorthand to specify a number of other font properties.
Set the font family:

Following is the example which demonstrates how to set the font family of an element. Possible
value could be any font family name.
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.
</p>
This will produce following result:
This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.
Set the font style:

Following is the example which demonstrates how to set the font style of an element. Possible
values are normal, italic and oblique.
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
This text will be rendered in italic style
Set the font variant:

Following is the example which demonstrates how to set the font variant of an element. Possible
values are normal and small-caps.
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
THIS TEXT WILL BE RENEDERED AS SMALL

CAPS
Set the font weight:

Following is the example which demonstrates how to set the font weight of an element. The fontweight property provides the functionality to specify how bold a font is. Possible values could be
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.

</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>

This font is bold.
This font is bolder.
This font is 900 weight.
Set the font size:

Following is the example which demonstrates how to set the font size of an element. The fontsize property is used to control the size of fonts. Possible values could be xx-small, x-small,
small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
This font size is 20 pixels

This font size is small
This font size is large
Set the font size adjust:

Following is the example which demonstrates how to set the font size adjust of an element. This
property enables you to adjust the x-height to make fonts more legible. Possible value could be
any number.
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
This text is using a font-size-adjust value.
Set the font stretch:

Following is the example which demonstrates how to set the font stretch of an element. This
property relies on the user's computer to have an expanded or condensed version of the font
being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that
your computer doesn't have a condensed or expanded
version of the font being used.
</p>
If this doesn't appear to work, it is likely that your computer doesn't have a condensed or
expanded version of the font being used.
Shorthand property :
You can use the font property to set all the font properties at once. For example:
<p style="font:italic small-caps bold 15px georgia;">

Applying all the properties on the text at once.
</p>
APPLYING ALL THE PROPERTIES ON THE TEXT AT

ONCE.
css - colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element(i.e., its text) or else for the background of the element. They can also
be used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table tells you all possible
formats:
Format
Syntax
Example
Hex Code
#RRGGBB
p{color:#FF0000;}
Short Hex
Code
#RGB
p{color:#6A7;}
RGB %
rgb(rrr%,ggg%,bbb
%)
p{color:rgb(50%,50%,50
%);}
RGB Absolute
rgb(rrr,ggg,bbb)
p{color:rgb(0,0,255);}
keyword
aqua, black, etc.
p{color:teal;}
These formats are explained in more detail in the following sections:
CSS Colors - Hex Codes:

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are the examples
to use Hexadecimal notation.
Color
Color
HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
CSS Colors - Short Hex Codes:

This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at
an equivalent six-digit value; For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are the examples
to use Hexadecimal notation.
Color
Color
HEX
#000
#F00
#0F0
#0FF
#FF0
#0FF
#F0F
#FFF
CSS Colors - RGB Values:

This color value is specified using the rgb( ) property. This property takes three values, one each
for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
NOTE: All the browsers does not support rgb() property of color so it is recommended not to
use it.
Following is the example to show few colors using RGB values.
Color
Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,19
2)
rgb(255,255,25
5)
Browser Safe Colors:

Here is the list of 216 colors which are supposed to be most safe and computer independent
colors. These colors very from hexa code 000000 to FFFFFF. These color are safe to use because
they ensure that all computers would display the colors correctly when running a 256 color
palette:
000000
000033
000066
000099
0000CC
0000FF
003300
003333
003366
003399
0033CC
0033FF
006600
006633
006666
006699
0066CC
0066FF
009900
009933
009966
009999
0099CC
0099FF
00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
330000
330033
330066
330099
3300CC
3300FF
333300
333333
333366
333399
3333CC
3333FF
336600
336633
336666
336699
3366CC
3366FF
339900
339933
339966
339999
3399CC
3399FF
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
660000
660033
660066
660099
6600CC
6600FF
663300
663333
663366
663399
6633CC
6633FF
666600
666633
666666
666699
6666CC
6666FF
669900
669933
669966
669999
6699CC
6699FF
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
990000
990033
990066
990099
9900CC
9900FF
993300
993333
993366
993399
9933CC
9933FF
996600
996633
996666
996699
9966CC
9966FF
999900
999933
999966
999999
9999CC
9999FF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF
CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF
FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF
css - syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts:
Selector: A selector is an HTML tag at which style will be applied. This could be any tag
like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color or border etc.
Value: Values are assigned to properties. For example color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:

selector { property: value }
Example: You can define a table border as follows:

table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.
You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.
The Type Selectors:

This is the same selector we have seen above. Again one more example to give a color to all
level 1 headings :
h1 {
color: #36CFFF;
}
The Universal Selectors:

Rather than selecting elements of a specific type, the universal selector quite simply matches the
name of any element type :
* {
color: #000000;
}
This rule renders the content of every element in our document in black.
The Descendant Selectors:

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element. As given in the following example, style rule will apply to <em> element only when it
lies inside <ul> tag.
ul em {
color: #000000;
}
The Class Selectors:

You can define style rules based on the class attribute of the elements. All the elements having
that class will be formatted according to the defined rule.
.black {
color: #000000;
}
This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular. For example:
h1.black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to given element. Consider the following example :
<p class="center bold">
This para will be styled by the classes center and bold.
</p>
The ID Selectors:
You can define style rules based on the id attribute of the elements. All the elements having that
id will be formatted according to the defined rule.
#black {
color: #000000;
}
This rule renders the content in black for every element with id attribute set to black in our
document. You can make it a bit more particular. For example:
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendant selectors,
For example:
#black h2 {
color: #000000;
}
In this example all level 2 headings will be displayed in black color only when those headings
will lie with in tags having id attribute set to black.
The Child Selectors:

You have seen descendant selectors. There is one more type of selectors which is very similar to
descendants but have different functionality. Consider the following example:
body > p {
color: #000000;
}
This rule will render all the paragraphs in black if they are direct child of <body> element. Other
paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this
rule.
The Attribute Selectors:

You can also apply styles to HTML elements with particular attributes. The style rule below will
match all input elements that has a type attribute with a value of text:
input[type="text"]{
color: #000000;
}
The advantage to this method is that the <input type="submit" /> element is unaffected, and the
color applied only to the desired text fields.
There are following rules applied to attribute selector.
p[lang] - Selects all paragraph elements with a lang attribute.

p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly
"fr".
p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word
"fr".
p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that
are exactly "en", or begin with "en-".
Multiple Style Rules:

You may need to define multiple style rules for a single element. You can define these rules to
combine multiple properties and corresponding values into a single block as defined in the
following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semi colon (;). You can keep them in a
ingle line or multiple lines. For better readability we keep them into separate lines.
For a while don't bother about the properties mentioned in the above block. These properties will
be explained in coming chapters and you can find complete detail about properties in CSS
References.
Grouping Selectors:
You can apply a style to many selectors if you like. Just separate the selectors with a comma as
given in the following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is
irrelevant. All the elements in the selector will have the corresponding declarations applied to
them.
You can combine various class selectors together as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
CSS Inline
It is possible to place CSS in the your HTML code and this method of CSS usage is referred to as
inline css.
Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you
can override style rules that are defined in external or internal by using inline CSS.
CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you
have to do is specify the desired CSS properties with the style HTML attribute
Sample
Code:
Result:
Inline CSS Sample
Internal CSS
When using internal CSS, you must add a new tag, style, inside the tag. The HTML code below
contains an example of <style>'s usage
Internal Style Sheet

Article ID: KB101408
An internal style sheet is a section on an HTML page that contains style definitions. Internal
style sheets are defined by using the <style> tag within the <head> area of the document. Here
is an example of an internal style sheet:
<html>
<head>
<title>Internal Style Sheet Example</title>
<style>
<!-body { background: #C9F1C5 }
h1 { color: #54B24B; font: bold 14px Verdana, Arial, Helvetica }
p { font: 12px Verdana, Arial, Helvetica }
-->
</style>
</head>
<body>
<h1>Page With an Internal Style Sheet</h1>
<p>This page contains style definitions at the top of the HTML code.</p>
</body>
</html>
Internal style sheets allow a designer to define styles for an

HTML page.
<html>
<head>
hr {color:sienna;}
p {margin-left:20px;}
body {background-color:#99CCCC;}
</style>
</head>
<body>
THIS IS INTERNAL CSS EXAMPLE<hr>
<p>This is a pragraph</p>
</body>
</html>
External
style sheets
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>THIS IS THE EXAMPLE OF CSS</h1>
<h2>Hi this is h2 css example.</h2>
<p class="gbg">This is bg1 css class
</p>
<p id="p"> This the id ccs example</p>
</body>
</html>
"style.css"
body{ font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px; color:#666666; margin:0; padding:0;
background-color:#b0c4de;}
h1{margin:0px; font-size:16px; font-weight:900;}
h2{margin:0px; font-size:12px;}
.bg1{background-color:#666666;}
.gbg{background-color:#333333;}
#p{text-align:left;color:red;}
CSS - images
Images are very important part of any Web Page. Though it is not recommended to include lot of
images but it is still important to use good images wherever it is required.
CSS plays a good role to control image display. You can set following image properties using
CSS.
The border property is used to set the width of an image border.

The height property is used to set the height of an image.
The width property is used to set the width of an image.
The -moz-opacity property is used to set the opacity of an image.
The image border Property:

The border property of an image is used to set the width of an image border. This property can
have a value in length or in %.
A width of zero pixels means no border.
Here is the example:
<img style="border:0px;" src="images/logo.gif" />

<br />
<img style="border:3px dashed red;" src="images/logo.gif" />
The image height Property:

The height property of an image is used to set the height of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in which an
image is available.
Here is the example:
<img style="border:1px solid red; height:100px;"
src="images/logo.gif" />
<br />
<img style="border:1px solid red; height:50%;"
src="images/logo.gif" />
Inline Style Sheets

Sample Embedded Styles Code
<html>
<head>
<link rel="stylesheet" href="link_1.css" type="text/css">
<style text/css>
<!-p{
font-family: Monotype Corsiva;
font-size: 40 pt;
color: "#990000";
}
table {
border-color: "#009900";
background: url(images/cream_dots.gif);
}
td {
font-size: 20 pt;
color: "#009900";
}
-->
</style>
<h3>The Pet Company</h3>
<title>Embedded Styles</title>
</head>
<body>
<table width=100%>
<tr>
<td>
<p align="center">
Welcome to the Pet Company!
</p>
</td>
</tr>
<tr>
<td>
<h2><strong>This page has embedded styles.</strong>
</h2>
</td>
</tr>
</table>
<table bgcolor="#FFFFFF" border="2" cellpadding="6"
cellspacing="2">
<tr>
<td>
Open
</td>
<td>
Close
</td>
<td>
</td>
</tr>
<tr>
<td>
9:00 am
</td>
<td>
7:00 pm
</td>
<td>
closed weekends
</td>
</tr>
</table>
<ul>
<li><a href="index.html">Return to our Home Page</a></li>
<li><a href="hours.html">Hours open</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="embed.html">Embedded or internal Style Sheet
Example</a></li>
</ul>
</body>
</html>
CSS Cascading Style Sheets
Cascading Style Sheets allow you to separate the formatting of your html document from the content of
the page. They allow you to control the appearance of paragraphs, headings, lists, etc. in a single
document and also allow you to specify font colour, size and weight more specifically. You can also link to
a style sheet document and therefore apply the same formatting to multiple pages.
More: http://www.w3schools.com/css/css_intro.asp
EMBEDDED STYLE SHEETS

Embedded style sheets are styles that are added to a the <head> of a single html document, just after the
</title>.
To embed a style you use the style tag in combination with other elements that define the styles for
various tags.
<html>
<head>
<title>embedding style sheets</title>
<style type=text/css>
<!-h1 {font-size: 18; color: blue; background: orange; font-weight: bold; text-decoration: none}
h2 {font-size: 14; color: red}
p {font-size: 12}
body { background-image: url(stars.gif); background-color: #000000}
a:link {color: #cc9933;}
a:visited {color: #ccff66; }
a:hover { color: #996633; }
a:active { color: #000000; }
-->
</style>
For a comprehensive CSS properties guide see:

http://www.htmlhelp.com/reference/css/properties.html
http://www.w3schools.com/css/css_reference.asp
http://www.blooberry.com/indexdot/css/propindex/all.htm
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp
INLINE STYLES
You can also use styles within the actual body of your html document.
e.g.
<html>
<head>
<title>inline style sheets</title>
</head>
<body>
<h1 style= font-size: 18; font-weight: bold, text-decoration:underline> using inline syles</h1>
<p style= font-size: 12; color: yellow; background: black>this paragraph will have the properties
listed in the style attribute applied to it.</p>
</body>
</html>
You can use both EMBEDDED and INLINE styles in the same document.
CLASS
You can also create classes within style sheets. A class is simply a style definition that modifies or
replaces a previous style definition for the same type of tag.
e.g.
<! -p {font-size: 12; background: yellow; text-align:right; font-style:italic}
p.red {font-size: 14; background: blue; text-align:center; font-family: "any font", arial}
-->
</style>
When used in the document:
<p>This paragraph would have the attributes for the regular paragraph applied to it</p>
<p class=red>This paragraph would have the properties of the p.red class applied to it</p>
LINKED SYTLE SHEETS
You can also create a separate style sheet for your entire site and simply link all your documents to it.
This can often save a lot of time and effort in marking up your html code.
First you would need to create a separate Notepad document in which you list your styles. You do not
need a style tag. All you do is list the tag and properties you would like to apply to it.
e.g.
body { background-color: #000000; font-family: Tahoma, Verdana, Arial; font-size: 12; color:
#6B9798;}
h1 {font-size: 18; color: blue; background: orange; font-weight: bold;}
p {font-size: 12}
a:link {color: #CC9933;}
a:visited {color: #CCFF66; }
You must save this document as a plain text file with the extension .css.
To link your html document to this file add the <LINK> tag to the <HEAD> of your document, just after the
title.
<html>
<head>
<title>linked style sheets</title>

<link rel=stylesheet type=text/css href=url/locationoffile.css>
</head>
BASIC HTML
XHTML COMPADIBILITY
XHTML (EXtensible HyperText Markup Language) is similar to HTML 4.01. It is designed to replace
HTML as it is seen as a stricter and cleaner version of HTML 1.
To ensure your documents are XHTML compatible you must:
Type all elements and attributes in lowercase.

Enclose all attributes in quotation marks
Never minimise attributes
Nest all elements correctly
Close all elements (even empty ones)
Ensure all tags are contained within opening and closing <html> elements.
Include the Doctype (and xhtml) declaration.
Also note for later reference that the id attribute replaces the name attribute previously used in HTML. To
accommodate both older and newer browsers you can however use both name and id attributes.
1
W3Schools, 2006, Introduction To XHTML, http://www.w3schools.com/xhtml/xhtml_intro.asp (8/2006)
A basic XHTML document consists of the following tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Defines the document type and
whether the document is Strict (for strict xhtml markup and use with CSS), Transitional (for use of
xtml and html features) and Frameset (for use with html frames)
<html xmlns="http://www.w3.org/1999/xhtml">
Specifies the XML namespace.
XML namespaces provide a simple method for qualifying element and attribute names used in
Extensible Markup Language documents by associating them with namespaces identified by URI
references.2
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
For Writing for the Web, you will not be required to always include these elements, but you will notice they
will automatically be included when we use Dreamweaver.
You will however be expected to use lowercase tags, full attributes and correct nesting as well as close all
of your elements.
The most basic html document consists of the following elements:
<html> Begins and ends an html document.
<head> Contains all the header information. (i.e. the information relevant to your document that you dont
want displayed in the browser window.)
2
World Wide Web Conservatorium, 2006, Namespaces in XML 1.0 (Second Edition) http://www.w3.org/TR/REC-xml-names/,
(8/2006)
<title> The title will be displayed in the title bar of the browser window </title>
</head>
<body> All the information you wish to appear in the browser window goes between the
body tags.
</body>
</html>
Note:
An html document always only has one set of html, head, title and body tags.
When saving your documents in notepad always save with an .html extension.
More about the <body>:
There are different attributes of the body tag, that allow you change the text and background colours, and
allow you to have an image as your background.
bgcolor - changes the colour of the document background

text- changes the colour of the text.
e.g. <body bgolor= red text=blue>
There are other attributes for the body tag which we will discuss later.
Note:
All the attributes you need always go inside the one body tag.
You never include attributes in closing tags.
Adding colour:
As discussed during the lecture when youre adding a colour to your web page with html, you can
sometimes just type the colour you wish to use- red, green, blue, yellow, orange, cyan, purple etc.
Usually, however, you will require a hexadecimal colour code.
The codes are called a triplet as they are a group of three hex numbers indicating values for how much
red, green and blue.
Hex info:
http://www.compworks.freeserve.co.uk/html/colour.html
There are many sites that list hex colour values including:
http://www.w3schools.com/html/html_colors.asp
http://www.colourprep.com/hexColorsName.html
http://cloford.com/resources/colours/500col.htm
You can also use the colour picker in Photoshop to find or match hex colours for your site.
Hex Value
Colour
Picker
If you tick the Only Web Colors option, you can find web safe (or non-dithering) colour values.
Lists:
Ordered lists<ol></ol>
Ordered lists are simply lists with a numerical order.
The basic code for an ordered list is:
<ol> ordered list

<lh> list heading - optional</lh>
<li> list item</li>
<li> list item</li>

<li> list item</li>
</ol> end of ordered list
The default setting for ordered lists is numerical 1, 2, 3 etc. you can change the setting to different types:
a, b, c uppercase abc
a, b, c lowercase abc
i, ii, iiik, lowercase roman
i, ii, iii uppercase roman
To change the type you use the type attribute of the <ol> tag.
e.g. <ol type=i>
You can change the starting position for a list using the start attribute of the <ol> tag.
e.g. <ol type=a start=3>
or
Individually for a specific list item by inserting the value attribute of the <li> tag.
e.g. <li value=3>
Unordered lists<ul></ul>
Unordered lists are bulleted lists.
The basic code for an ordered list is pretty much the same as for an ordered list:
<ul> ordered list

<lh> list heading - optional</lh>
<li> list item</li>
<li> list item</li>
<li> list item</li>
</ul> end of ordered list
The default setting for unordered lists is a black circle known as a disc. you change the type of bullet to a
square or circle using the type attribute of both the <ul> and <li> tag.
If you use the <ul type=circle> the entire list will have circle bullets.
By using the <li type=circle> you can alternate the type of bullets used, as only the one list item will
have a circle bullet. The other list items will be displayed in the default setting.
Definition lists<dl></dl>
The basic code for definition lists is:
<dl> definition list

<dh> definition header - optional</dh>
<dt> definition term</dt>
<dd> definition of term</dd>
<dt> definition term</dt>
<dd>definition of term</dd>
</dl> end definition list
Some tags are self contained i.e. it has no data to be contained within an opening and closing tag. These
tags do not require closing tags but must include a forward slash following the element.
e.g:
Horizontal rule <hr />

This tag is generally used for separating sections of text. there are various attributes that can be used to
change the appearance of the <hr>.
<hr noshade=noshade /> creates an hr with no shade.
<hr width=10% /> creates an hr with a width of 10% of the browser window.
<hr size=10 /> creates an hr with a thickness of 10 pixels.
<hr align=left/right/center /> aligns the hr.
<hr color=blue /> makes the hr blue. this generally only works in internet explorer, not in netscape.
Break <br />
This tag breaks the text down to the next line.
Common tags:
Heading tag <h1> </h1>
There are six different heading levels. <h1> is the biggest; <h6> is the smallest.
You can align headings paragraphs to the right, left and centre of your document using the align attribute.
e.g. <h1 align=left> large text</h1>
<h6 align=left> small text</h6>
Paragraph <p></p>
The paragraph tag organizes text into paragraphs.
You can align paragraphs to the right, left and centre of your document using the same align attribute.
e.g. <p align=center>This is a paragraph</p>
Divider <div></div>
This element defines a particular section of a document. It can be used in conjunction with the align
attribute to align elements on the page (but this attribute has been depreciated).
e.g. <div align= center>This will be centred. </div>
Dividers can be used with styles to define how a particular section will be formatted.
<div style="color:blue;">
<h1>This is a large heading in a div section. It will be displayed in blue.</h1>
</div>
Block quote <blockquote></blockquote>

Indents and separates the selected text.
Centre <center></center>
This tag is useful for centring images and bits of text, but has been depreciated.
Comment tags <!comments go here-->

the text written between the comment tags will not be displayed in the browser window. this tag is useful
to remind you which sections must be updated, or where you are planning to insert more images or text.
e.g. 
Note:
This tag is an empty container. It does not require any closing tags or an end slash.
Logical style tags:
Logical style tags offer more flexibility and will display your text differently according to the browser in
which it is viewed.
Emphasis <em></em>
this tag usually displays text in italics.
Strong <strong></strong>
Usually displays text bold.
Citation <cite></cite>
Usually displays text in italics
Computer code <code></code>

Text is displayed in fixed width font.
Forced (physical) style tags:
These tags are also commonly used to format text, however, unlike logical style tags they help enforce
consistency in your documents.
Italics <i></i>
Bold <b></b>
Underline <u></u> - depreciated
Typewriter text <tt></tt>
Subscript <sub></sub>
Superscript <sup></sup>
Strike-through <strike></strike> - depreciated
Pre-formatted text <pre></pre>- depreciated

This tag allows you to retain the spacing between your text. (usually a browser ignores additional space
between words, blank lines etc.)
Another way to add space between text and images etc. is using
You will need one for every space.
Font <font> </font>
The font tag has been depreciated in favour of CSS. This means that the tag has been outdated and will
become obsolete. However, most browsers will most likely continue to support depreciated tags to allow
older web pages to display correctly.
The attributes of the <font> tag allows you to change the size, colour and font of your text.
face changes the font of the text i.e. arial, tahoma, impact, comicsansmc, etc.
color changes the colour
size changes the size of the text from 7 (smallest) to +7(largest).
e.g <font face=impact color=blue size=+7>TEXT</font>
Additional tags:
Marquee <marquee></marquee>
The marquee tag allows you to have text scrolling across your page.
There are numerous attributes you can add to the <marquee> tag:
behavior=sets the behaviour from slide of page or alternate side to side
e.g. <marquee behavior=alternate>TEXT, IMAGE, TABLE etc. </marquee>
direction= sets scroll direction, right or left
e.g. <marquee direction=right> TEXT, IMAGE, TABLE etc. </marquee>
loop=sets the number of times to cycle, or continuous/infinite
e.g. <marquee loop=infinite> TEXT, IMAGE, TABLE etc. </marquee>
scrollamount = sets the number of pixels to move each time
e.g. <marquee loop=1 scrollamount=10> TEXT, IMAGE, TABLE etc. </marquee> etc.
scrolldelay = sets the milliseconds of delay between each movement. Fastest speed is
60.
bgcolor=
This allows you to change the background color of the area the text is scrolling over.
width=
this lets you control the width of the marquee. you can use the number of pixels, or a percentage of the
screen.
The marquee does not work on Netscape browsers
<blink></blink>
Any text written between the opening <blink> and closing </blink> tags will blink. Netscape only.
Additional information
How to set the default font for the entire page:
The <basefont> tag allows you to set the default font face and size fore entire document. This element
can be used inside the head or the body of the document. When used in the head it sets the values for
the entire document and does not require a closing tag. When used in the body it may be used multiple
times to affect the text following the element, closing tags should be used in this instance. The attributes
that can be used in conjunction with this tag include:
face
size
color
e.g. <basefont face=Arial />
additonal format tags:
small <small></small> change the font size by -1
big <big></big> change the font size by +2
TABLES:
Table Elements
Description
Element
<table> ...
</table>
Defines a table in HTML. This tag specifies where the table begins and ends.
All tables must have starting and finishing <table> tags. By default tables do not
display a border. You must add the border attribute is present for your browser
to display the table with a border.
Specifies a table row within a table.

<tr> ... </tr>
Defines a table data cell. By default the text in this cell is aligned left and
centered vertically.
<td> ... </td>
Table data cells and table rows may contain other attributes to determine the
characteristics of the cell and its contents which we will discuss shortly.
Optional
<caption> ...
</caption>
Defines the caption for the title of the table. The default position of the title is
centered at the top of the table. Caption tags must be used inside a table but
must not be placed inside table rows or cells.
The attribute align=bottom can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption such as font tags etc.
<th> ... </th>
Defines a table header cell. Table header tags simply substitute for the usual
table data tags.
By default the text in this cell is bold and centered.
Table Attributes
NOTE: Attributes defined within <th> ... </th> or <td> ... </td> cells override the default alignment
set in a <tr> ... </tr>.
Attribute
Description
border
Displays the table with a border.

<table border=2>
bordercolor
Sets the border colour of the table

<table bordercolor=blue>
bgcolor
Sets the background colour of a table, cell, or table row.

<table bgcolor=red>
<tr bgcolor=green>
<td bgcolor=orange>
Sets the height of a table

height (pixels or %)
<table height=400>
Sets the width of a table

width (pixels of %)
<table width=50%>
Horizontal alignment of a cell or row

align (left, center, right)
<td align=right>
<tr align=left>
Can also be added to the table element to align the table.
<table align=center>
valign (top, middle, bottom)
Vertical alignment of a cell/row

<td valign=top>
colspan=n
The number (n) of columns a cell spans.

<td colspan=3>
rowspan=n
The number (n) of rows a cell spans.

<td rowspan=2>
cellpadding=
Sets the amount of space between a border and cell content.

<table cellpadding=20>
Sets the amount of space between cells

cellspacing=
<table cellspacing=10>
General Table Format

The general format of a table looks like this:
<table>

<caption> caption contents </caption> optional
<tr>

<th> first header cell contents </th> optional
<th> last header cell contents </th>
</tr>

<tr>

<td> first row, first cell contents </td>
<td> first row, last cell contents </td>
</tr>

<tr>

<td> last row, first cell contents </td>
<td> last row, last cell contents </td>
</tr>

</table>

Tables can also be placed within tables simply by placing another table within a table data cell.
CREATING SPACE
This will create a single space. You can use this to shift text a couple of spaces or to create
space between letters of a word. When using empty table cells, be sure to use a space to indicate that the
table cell is filled with space.
The correct way of specifying an empty table cell is to use

<td> </td>
<p> </p> This creates a large space of about 4 lines.
INSERTING IMAGES:
There are three types of image files that can be used for the Web. We will be using GIFs and JPGs as
they are supported by most browsers and have relatively small file sizes.
As stated before GIFs are best suited for simple images without much colour information (e.g logos )
JPGs are best for more complicated images with a lot of colour information (e.g. photos)
To insert an image into your html document you need to use the <img></img> element. This is not much
good however without defining the source/location of your image. To do this you need to include the SRC
attribute of the IMG tag.
e.g. <img src=urlofimage />
The URL of the image is the location of the image. If the image is stored in the same drive and folder as
your document, you simply need the name and extension of the image (e.g .gif, .jpg). You can see if your
image is a gif or a jpg by looking for the file extension in your folder etc.
e.g <img src=me.jpg />
If the image you wish displayed on your site is on the web you would need to define the location on the
web which you can do by right clicking and selecting properties.
e.g <img src= http://ninemsn.com.au/blipimages/home/bulletin.gif />
There are additional attributes you can add to the IMG tag.
height specifies the height of the image in pixels.
width specifies the width of the image in pixels.
Always use pixel values.
e.g. <img src=me.jpg height=150 width=200 />
NOTE: Always try to specify the Height and Width of an image in exact pixels. It will help the content of
your site load slightly faster as the browser will know how much space to leave for your images.
These are used to tell the browser how much space to leave for the images so the HTML page can be
downloaded around the images allowing your reader much earlier access to the material.
Although you can stretch or shrink your image using the height and width attributes it is generally
recommended to use the correct values. Simply reducing the size of an image using height and width will
NOT reduce the file size of an image. You should resize the image in Photoshop or an alternative image
editing program.
border specifies a border around the image in pixels.
e.g. <img src=me.jpg height=150 width=200 border=2 />
The border displayed will always be black.
alt specifies alternative text, which will pop up when the mouse hovers over the image, and appear if the
image is not readable.
e.g. <img src=me.jpg height=150 width=200 alt=this is a picture of me />
align=right/left aligns the image to the right or left.
align=top/center/bottom aligns the text next to the image.
If you want to center your image, use the <CENTER> tag, or place your image in a paragraph or table
aligned to the center.
hspace="pixels"
Sets a horizontal margin to be placed around an image
vspace="pixels"
Sets a vertical margin to be placed around an image
e.g.
<img src=me.jpg height=150 width=200 alt=this is a picture of me hspace=20 / >
Background Graphics
Newer versions of Web browsers can load an image and use it as a background when displaying a page.
Some people like background images and some don't. In general, if you want to include a background,
make sure your text can be read easily when displayed on top of the image.
Background images can be a texture (linen finished paper, for example) or another image.
Background images will be tiled - the browser takes the image and repeats it across and down to fill your
browser window.
The background attribute is included in the <BODY> element as it is applied to the entire document:
e.g. <body background="urlofimage">
You can also add background graphics into a table or individual table cell/row.
e.g. <table background=URLofimage>
LINKING
A stated the chief power of HTML comes from its ability to link text and/or an image to
another document or section of a document.
CREATING HYPERLINKS:
BASIC LINKS:
All links require an opening and closing anchor tag <a></a> used in conjunction with the href (Hypertext
Reference) attribute to define the URL (Uniform Resource Locators are used to specify the
location of files. A URL includes the type of resource being accessed (e.g., Web, gopher, FTP),
the address of the server, and the location of the file.)
e.g. <A HREF= page2.html>text to click on</A>
The text written between the opening and closing anchor tags constitutes the clickable area of the link.
There are 5 basic links:
Internal Links (Intrasite Links) are links to the different pages of your web page, usually they will be in
the same folder and you will simply require the name of your document.
e.g. <a href=part2.html>click</a>
Relative pathways:
You can link to documents in other directories by specifying the relative path from the current document to
the linked document. for example, a link to a file page2.html located in the subdirectory content would be:
<a href="content/page2.html">india</a>.
If your current document is located in a folder but the file you are linking to is outside this folder then you
must use ../ to indicate that to get to file you must go up a directory.
e.g. <a href="../index.html>HOME</a>
These are called relative links because you are specifying the path to the linked file relative to the location
of the current file. You can also use the absolute pathname (the complete url). This may be <a
href="http://www.gu.edu.au">GRIFFITH UNI</a>. You should never use an absolute pathway with drive
destinations.
e.g. <a href="file:///G:/GUGC/LIVE_WIREZ/FINAL_SITE/Site/content/htmllinks.html">LINKS</a>
If you do this your links will not work when you upload your files to the server as this method relies on
the person having the files stored in the specified directory on their computer.
NOTE: Hyperlinks are not restricted to other html documents. You can link to any digital file (Word
documents, PDF files, image and sound files etc.)
Named Links (Intrapage Links) are links usually within one document to specific sections of text etc. To
do this you basically invisibly mark certain sections of a document using the anchor tag in combination
with the name attribute.
<a name= part2>part 2</a>

To link to that particular section you use the <A HREF=URL> where your URL is a hash followed by the
name of the section. The hash symbol is used to tell the browser it is linking to a named section.
For XHTML documents you should include the id attribute.
<a name= part2>part 2</a>
< a href= #part2>click here to go to part two</a>
External Links (Intersite Link) link your page to another separate web site on the Internet.
e.g. <a href= http://www.go.com>click</a>

You will need the full URL including http;// or your link will not work.
You can open a link in a new browser window by adding the attribute target=_blank to your link.
e.g. <a href= http://www.go.com target=_blank>click</a>
E-Mail Links:
<a href= mailto:e-mailadresshere>mail me!</a>
Image Link:
To have an image as the clickable area of the link you simply insert an image between the opening and
closing anchor tags.
e.g. <a href= page3.html><img src= logothree.gif height=50 width=50 alt= go to page
three></a>
Altering LINK COLOUR:
Because you wish the link colour to apply to the entire HTML document you would be adding the
attributes to the <body> element:
link link colour
alink active link colour
vlink visited link colour
e.g. <body link=#336699 alink=#009999 vlink=#663399>
IMAGE MAPS
Image maps allow you to place several links in specific places within the same image. To create an image
map you need the coordinates in pixels of the shape within the image that is to be used as link.
The coordinates required depend on the shape of the area.
For a rectangle you will need the coordinate of the top left corner and the
bottom right corner. e.g. (50, 50, 250, 170)
A circle requires three coordinate points, the centre coordinates and the radius.
For an irregular shape you will require the coordinates f each point on the
polygon.
NOTE: For each point you will generally always need two coordinates, X and Y.
The code for creating an image map is as follows:

<html>
<head><title></title>
</head>
<body>
<img src=url of the image you are using as a map usemap=#menumap>
it is often a good idea to set the border to 0, so as not to confuse your visitor.
<map name=menumap>
<area shape=rect/poly/circle coords=coordinates of all the points
href=url />
<area shape=rect coords=117,55,160,89 href=part1.html />
<area shape=circle coords=50, 50, 25 href=part2.html />
</map>
</body>
</html>
FRAMES
Frames allow you to display more than one Html document on screen at the same time. When creating
frames, you will require a separate HTML document containing all the frame information. The frameset
document does not contain any content as such. It merely contains the HTML code that determines how
the frames are displayed (e.g. in rows/columns) and which document are inserted into each frame.
Frameset documents do not have a body tag.
This is the basic code for a frameset document:
<html>
<head>
<title>
</title>
</head>
<frameset rows/cols=50%, 50%> You can choose ROWS or COLS. 50% refers to
the screen. So, here your frames are divided into two equal portions of
50% each. You can also indicate the width of each frame in pixels, simply by
leaving off the %. You can have different values e.g. OR
<frameset cols=20%, *> Here the frames are divided into two columns, one of 20% and
one of 80%. The asterisk * tells the browser to use the remaining space for the last frame.
<frame src=url> The URL refers to the source of the html document you wish to
display in the frame.
<frame src=url>
</frameset>
<noframes> Only viewers who use older browsers that cannot display frames will
see the text between the <noframes> tags.
<body>
<p>You must have a browser capable of displaying frames to view this
document</p>
</body>
</noframes>
</html>
NOTE:
You can have as many frames as you like, but if you have a lot of content you wish to display it is
probably better if you limit your frames to two or three.
Like most tags frames can be nested.
This is an example of a nested frameset document.
<html>
<head>
<title></title></head>
<frameset rows=50%, 50%>
<frameset cols=50%, 50%>
<frame src= pART1.HTML>
</frameset>
</frameset>
<noframes>
<body>
document</p>
</body>
</noframes>
</html>
Part1
Part 3
Part2
There are a number of attributes you can use within your <FRAME> tags to change the appearance of
your frames.
These include:
1. marginheight=100 - sets the top and the bottom margins of the frame.
2. marginwidth=100 - sets the left and right margins.
3. border=0 - this attribute can be placed within each individual <frame> tag or within
the <frameset> tag.
4. noresize - disallows viewers from changing the size of each frame.
5. bordercolor=#99ccff - gives the border a specific colour.
6. scrolling=no - no scrollbars will appear.
yes - scrollbars will always be displayed
auto - scrollbars will be displayed only when the information contained in
the frame is hidden.
The default setting for scrolling is auto.
LINKS IN FRAMES
One of the most common uses of frames is to create a web page consisting of two frames a menu on
the left with click able links, and the contents displayed on the right.
To do this is fairly simple:
<html>
<head>
<title>title</title>
</head>
<frameset cols=50%, 50%>
<frame src= menu.html name=menuframe> The name attribute is used to
refer to the name of the frame in html.
<frame src= home.html name=contents> </frameset>
<noframes>.
<body>
document</p>
</body>
</noframes>
</html>
To create links you must also change the document containing the links.
In this example you would change Menu.html.
<html>
<head><title>title</title>
</head>
<body>
<h1>menu</h1>
<a href=part1.html target=contents>part 1</a><br> The target attribute
tells the browser the name of the frame in which the Html document should
be opened. If the target attribute is given a value that does not correspond
with a NAME value given in the corresponding frameset document the
browser will respond by opening a separate browser window for the
document.
<a href=part2.html target=contents>part 2</a><br>
<a href=part3.html target=contents>part 3</a>
</body>
</html>
You do not always have to set TARGET values to the corresponding NAME value.
Reserved names can also be used.
These are:
_blank
Always opens a linked document in a new browser window
_parent Opens the linked document in the previous window. If you do not have nested
frames the previous window is generally the window displaying the frameset
document.
_top
Opens the linked document in the main window.
_self Opens the linked document in the same frame as the link.
ADDITIONAL INFORMATION
INLINE FRAMES
Inline Frames are similar to normal frame tags, but display within a page.
<iframe src="url" name="frame_name" width="pixel value" height="pixel value"

frameborder="value">
</iframe>
USING FORMS ADDING MEDIA
ADDING SOUND/MOVIES/FLASH.
There are several ways to place music on a webpage. One of the easiest ways is to simply link to an
audio file, which will give the user a choice.
<a href="midiname.mid">click
here to play music </a>
To have music that plays automatically on page load you can add the
your html document.
<bgsound>
tag to the <head> of
<bgsound src=url of sound.mid loop=indefinite / >
NOTE: This option will not allow your user to turn the music on or off, and this tag is only Internet Explorer
compatible
You can also embed music into your page using the <embed> tag, which will start the music automatically
when someone views your page. This option will allow you to have a small image to turn the music off, as
some viewers find music irritating.
e.g <embed src=url of sound.wav width=45 height=45> </embed>
Instead of the button, you can also have a small console with on and off switches on your page, simply by
changing the height and width attributes.
e.g.
<embed src=url of sound.wav width=140 height=40> </embed>
MUSIC PARAMETERS.
will make the music play automatically.

instead the visitor will have to click on the play button on the console to make it play.
loop="true" or "infinite" means that the music will loop continuously.
autostart="true"
if you use "false"
loop="false"
means that the music will only play once, and then will automatically turn off.
playcount: same as loop

width=
in pixels
height=
in pixels
align=left, right, centre (same results as with images)
ADDING MOVIES
<embed src="yourmovieoraudioclip.mov"></embed>
MOVIE PARAMETERS:
width = in pixels
height= in pixels
controller = true/false show or hide the controller
loop= true/flase
audtoplay= true/false
hidden= true/false
pluginspace= http://quicktime.apple.com
align=left, right, centre (same results as with images)
Quicktime requires a plugin. If your viewer does not have the plugin installed, your audio/video will not
play. For those who do not have the quicktime plugin a link to download the plugin will then appear. an
example of the embed tag with multiple parameters:
<embed src="movie.mov" pluginspage="http://quicktime.apple.com" width=144
height=16 controller=true autoplay=false></embed>
For additional information and options see: http://www.html-reference.com/EMBED.htm
http://www.htmlcodetutorial.com/embeddedobjects/_EMBED.html
ADDING FLASH
e.g. <embed src=url of flashmovie.swf height=300 width=400> </embed>
You should however always try to use this in conjunction with the <object></object> tag.
This is the minimum code you should add to embed your Flash movie.
<object width="550" height="400">

<param name="movie" value="somefilename.swf" />
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
There are however further recommended and optional attributes of the OBJECT and EMBED tags used
to publish Flash movies.
See: Vertical Moon: Embedding Flash Tutorial

See: Macromedia Flash Embed Information
RECOMMENDED:
Here's a good, basic HTML example you can follow and be sure your flash movie will display correctly:
<object>
<param name="movie" value="moviename.swf">
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<embed src="moviename.swf"
width="100" height="100"
play="true" loop="true" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
p1_prod_version=shockwaveflash">
</embed>
</object>
The easiest thing to do is however simply to use the publish command in Flash and Flash will take care of
it all.
SEE: http://www.w3schools.com/flash/flash_inhtml.asp
You can also use the <noembed></noembed> tags for browsers that do not recognize the embed tag.
FORMS
Today we will be briefly looking into forms to enable you to receive feedback for example from your
viewers by creating for example a very simple guestbook using forms. The most common way for simple
sites to receive feedback is again using an e-mail link. So using Malto:e-mail address, but you can also
use a cgi (common gateway interface script which can organise the information people send to you. If
you are using some free hosing servers etc. you may not have a cgi bin or any mail handlers available.
For our purposes we will be using mailto:youremail@name.com in which case the information will be sent
directly to your mail box.
To create a feedback section you must first use the <form></form> tag which is the feedback shell. All
contents need to be placed between the opening and closing form tag.
You will however need to add some attributes in order to receive information
<form method=post action=mailto:yourname@email.com>
METHOD:
Determines how the form data will be sent to the server once it has been submitted by a user.
ACTION:
The action is the location of the form processing script. (Where the information will be sent.) You would
only use a URL if your server has a server-side form handler such as a CGI script. This option is currently
not available on the University server. Therefore to receive feedback you should use the mailto option.
When we create the contents of a form, we usually use the <input> tag with the type attribute.
To create a text field for example for someones name you would use
<input type=text name=surfername value=Type your name here! />
where:
Name is the label of the text filed. It wont appear on the browser, but it will help you when you receive
information from visitors. You should try not to use spaces between words - underscores are better.
Value here determines the default value which will appear in the text field.
Size will allow you to change the width of the input field. It will usually take a bit of experimenting to find
the right size.
Maxlength is another attribute you can add which determines the maximum number of characters, which
is often handy for things like zip codes. Etc.
Other input types include radio and check boxes.
To create a radio button you simply indicate type=radio
<input type=radio name=sex value=male />

<input type=radio name=sex value=female = />
If you add the checked option it will set the default selection when the form appears.
When you use radio buttons users will only be able to select one option. If you would like your users to
have the ability to select more than one option you can use a check box.
To create a checkbox all you need to do is indicate type=checkbox

<input type=checkbox name=.. value= />
You can again add the option of checked, and with checkboxes multiple items can be set as default
checked values.
You can also add drop down boxes using the select tag
<select name=fruit>
<option>apples</option>
<option>pears</option>
<option>oranges</option>
</select>
Instead of using Checked to set the default selected value you now use selected. You can also add the
size attribute which dictates the number of lines in the selection box.
<select name=fruit size=2>

<option>apples</option>
<option>pears</option>
<option>oranges</option>
</select>
To create larger text areas where the user can write additional comments for example you can use the
<textarea> tag
<textarea name=comments rows=5 cols=45>Write any further comments or recommendations

here</textarea>
You will also require submit and reset buttons.
Submit:
<input type=submit value=send />
Value will appear on the button
Reset:
<input type=reset value=reset />
Make sure you end your form tag.</form>
CSS Cascading Style Sheets
Cascading Style Sheets allow you to separate the formatting of your html document from the content of
the page. They allow you to control the appearance of paragraphs, headings, lists, etc. in a single
document and also allow you to specify font colour, size and weight more specifically. You can also link to
a style sheet document and therefore apply the same formatting to multiple pages.
More: http://www.w3schools.com/css/css_intro.asp
EMBEDDED STYLE SHEETS
Embedded style sheets are styles that are added to a the <head> of a single html document, just after the
</title>.
To embed a style you use the style tag in combination with other elements that define the styles for
various tags.
<html>
<head>
<title>embedding style sheets</title>
<!-h1 {font-size: 18; color: blue; background: orange; font-weight: bold; text-decoration: none}
p {font-size: 12}
body { background-image: url(stars.gif); background-color: #000000}
a:link {color: #cc9933;}
a:visited {color: #ccff66; }
-->
</style>
For a comprehensive CSS properties guide see:

http://www.htmlhelp.com/reference/css/properties.html
http://www.w3schools.com/css/css_reference.asp
http://www.blooberry.com/indexdot/css/propindex/all.htm
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp
INLINE STYLES
You can also use styles within the actual body of your html document.
e.g.
<html>
<head>
<title>inline style sheets</title>
</head>
<body>
<h1 style= font-size: 18; font-weight: bold, text-decoration:underline> using inline syles</h1>
<p style= font-size: 12; color: yellow; background: black>this paragraph will have the properties
listed in the style attribute applied to it.</p>
</body>
</html>
You can use both EMBEDDED and INLINE styles in the same document.
CLASS
You can also create classes within style sheets. A class is simply a style definition that modifies or
replaces a previous style definition for the same type of tag.
e.g.
<! -p {font-size: 12; background: yellow; text-align:right; font-style:italic}
p.red {font-size: 14; background: blue; text-align:center; font-family: "any font", arial}
-->
</style>
When used in the document:
<p>This paragraph would have the attributes for the regular paragraph applied to it</p>
<p class=red>This paragraph would have the properties of the p.red class applied to it</p>
LINKED SYTLE SHEETS
You can also create a separate style sheet for your entire site and simply link all your documents to it.
This can often save a lot of time and effort in marking up your html code.
First you would need to create a separate Notepad document in which you list your styles. You do not
need a style tag. All you do is list the tag and properties you would like to apply to it.
e.g.
body { background-color: #000000; font-family: Tahoma, Verdana, Arial; font-size: 12; color:
#6B9798;}
h1 {font-size: 18; color: blue; background: orange; font-weight: bold;}
p {font-size: 12}
a:link {color: #CC9933;}
a:visited {color: #CCFF66; }
You must save this document as a plain text file with the extension .css.
To link your html document to this file add the <LINK> tag to the <HEAD> of your document, just after the
title.
<html>
<head>
<title>linked style sheets</title>
<link rel=stylesheet type=text/css href=url/locationoffile.css>
</head>
META TAGS
Meta tags go between the opening and closing head tags of your html document. They contain
information that is not visible in the window.
There are two types of META tags: HTTP-EQUIV Meta tags and Meta tags with the NAME attribute.
Meta tags do not need to be ended as they do not format text.
HTTP-EQUIV
META HTTP-EQUIV tags contain information that is useful for the web browser to display the particular
document.
NAME
The NAME attribute is used for META types which do not correspond to normal HTTP headers.
Both HTTP_EQUIV and NAME attributes are always used in conjunction with the CONTENT attribute.
The three most common attributes used for HTTP_EQUIV are Expires, Content-Type and Keywords
(although keywords is also sometimes used in conjunction with the name attribute).
content-type Specifies the format of the html document
<meta http_equiv=content-type content=text/html />
EXPIRES Allows you to specify when the content of your page expires
<meta http_equiv=expires content=1/1/3000 />
Some of the most common attributes for the NAME attribure include:
GENERATOR
<meta name=generator content=notepad />
AUTHOR
<meta name=author content=svenja kratz />
DESCRIPTION
<meta name=description content=description of your site />
Sometimes the keyword value is also used with the Name attribute.
META TAGS can also be used to automatically refresh your page after a specific number of seconds has
passed.
<meta http-equiv="refresh" content="3" />
You can also refresh to a different web site
<meta http-equiv="refresh" content="3;url=http://www.gu.edu.au" />
More information available at: http://webdeveloper.com/html/html_metatag_res.html
Using Cascading Style Sheets
There are four types of style sheets.

1.
2.
3.
4.
Linked (external)
Inline
Embedded
Imported
Style sheets are sets of instructions for web pages.
The Cisco curriculum refers to cascading style sheets frequently. They are primarily
a convenience for web designers. The more pages in a site, the more convenient
are the linked style sheets. A small website seldom uses cascading style sheets;
however, a large site can use them on every page.
1. Linked Style Sheets

What are style sheets and how do they cascade?
A linked style sheet is a text file. Frequently, its created using Notepad (Windows)
or SimpleText (Mac).
The style sheet contains coded instructions detailing how certain elements of the
website are to appear. For instance, we may have set up a website for a company
that uses brown and cream colors, but we know that the company will soon be
changing to blue and white. We want to set up the site so that we can make the
change from brown and cream to blue and white almost instantaneously on every
page. To do this, we need style sheets.
First, we would prepare the style sheet to show the brown and cream colors. We
could call the style sheet link_1.css. Then we would make all the pages in the site
link to link_1.css, which contains the instructions for the colors on the web pages..
A month later, the company tells us that we need to change the colors to blue and
white.
We need to change the directions in the link_1.css file so the color changes show
the blue theme. We can do this by setting up a new style sheet. When we have it
ready to go, we simply give it the name link_1.css. Presto! All the pages that link to
this sheet have the new color scheme. Thats convenient when just a few pages are
involved. Its wonderful if the website has several thousand pages that link to file.
When all the pages change at once, they are said to cascade.
Linked Style Sheets Exercise
Step 1
Using Internet Explorer or Netscape, open the index.html

file in the Inline_Practice folder.
Click on the links to view the hours and the contact us pages.
Step 2
Notice how all the pages have similar features.
They all use the same color schemes and backgrounds. (They definitely need
improvement.)
Step 3
View the source of all three pages. Notice how all of them link to the link_1.css file
and the link can be found in the third line of the source code.
Step 4
Open the link_1.css file. (Your file may have a different

icon.)
The link_1.css file is the cascading style sheet that directs all the pages to have the
same background image(s) and the same fonts.
Its time to make some changes.
Step 5
Using the code in the following picture, make the changes to the link_1.css file.
Save your changes.
Step 6
In the web browser, open the index.html file. Click through the links. All of the
pages should have a new background and color scheme. The new scheme has
cascaded into all of the pages.
uses inline styles) hat the text should be

placed on a red background.
the head.
styles because they are used exclusively
Step 7
Print all three pages and submit for credit.
2. Inline Styles
Inline styles may be used anywhere in an HTML document and are placed
immediately next to the tag element that is being styled. They override all other
styles because they are used exclusively for the tag that they modify. It is easy to
view an inline style in the picture below because the word style is placed right next
to the tag it modifies. <h4 style=background: red align=center>.
In the picture below, you can see a sample of inline style that is placed in the head.
Notice that the heading h4 has a style applied to it.
The style tag information indicates that the text (it uses inline styles) should be
placed on a red background. In the window below, you can see the red background.
Inline Styles Activity
Step 1
Open the contact_us.html file and view the source.
Step 3
In the text editor (Notepad or SimpleText), select save as and title it inline.html.
Step 4
Type in these changes to the head of the documents source code:
Step 5
Go to the unordered list <ul> near the end of the document and add the
following style to the list. You may also want to add a few extra links.
Step 6
Save and view your document in the browser. Print it and submit for credit.
3. Embedded Style
Embedded style is placed in the <head> of the document. This style is used if you
want to effect a change on one particular page. In the picture below, you can see
the embedded code in the <head>.
Embedded Style Exercise
Step 1
1. Using Notepad or SimpleText, open the hours.html file.
2. Under the file menu, save the file as embed.html.

3. Add the code that you see in the window above or from the pages that your
instructor gives you.
4. Change the title of the page to Embedded Style.
5. Save and view in the browser.
6. Print the browser page and submit it for credit.

Css

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css

Hochgeladen von

Copyright:

Verfügbare Formate

To create a web page with all types of cascading style sheets.

CSS saves time

Superior styles to HTML

Creating Internal CSS Code

"HTML tag" { "CSS Property" : "Value" ; }

We chose the HTML element we wanted to manipulate. - p{ : ; }

Next we choose the font color to be white. - p { color: white; }

We choose the HTML element Body - body { : ; }

Next we chose the background color to be black. - body { background-color:

The background color of this page is gray because

Why Use External CSS?

It keeps your website design and content separate.

CSS Inline - An HTML Attribute

<p style="background: blue; color: white;">A new background and

A new background and font color with inline CSS

<htmltag style="cssproperty1: value; cssproperty2: value;"> </htmltag>

Common Inline CSS Mistakes

<p style="background: url("yellow_rock.gif");">

<p style="background: url("http://www.tizag.com/cssT/yellow_rock.gif");">

<p style="background: url(http://www.tizag.com/cssT/yellow_rock.gif);">

Cascading Style Sheets

How to create a linked external stylesheet

serif; font-size: 200%; }

So instead of rgb(204,204,255) , I just specified green.

The font-family property is used to change the face of a font.

The font-variant property is used to create a small-caps effect.

The font-size property is used to increase or decrease the size of a font.

Set the font family:

This will produce following result:

This text is rendered in either georgia, garamond, or the default

serif font depending on which font you have at your system.

Set the font style:

This will produce following result:

This text will be rendered in italic style

Set the font variant:

This will produce following result:

THIS TEXT WILL BE RENEDERED AS SMALL

Set the font weight:

This font is bolder.

This will produce following result:

Set the font size:

This will produce following result:

This font size is 20 pixels

This font size is large

Set the font size adjust:

This will produce following result:

This text is using a font-size-adjust value.

Set the font stretch:

This will produce following result:

<p style="font:italic small-caps bold 15px georgia;">

This will produce following result:

APPLYING ALL THE PROPERTIES ON THE TEXT AT

aqua, black, etc.

These formats are explained in more detail in the following sections:

CSS Colors - Hex Codes:

CSS Colors - Short Hex Codes:

CSS Colors - RGB Values:

Browser Safe Colors:

You can put CSS Style Rule Syntax as follows:

Example: You can define a table border as follows:

The Type Selectors:

The Universal Selectors:

The Descendant Selectors:

The Class Selectors: