Web technology unit II

GKMCET
Lecture Plan

Subject Name: Web Technology

Subject Code: IT2353

UNIT II
Style Sheets: CSS
2.1 Introduction to Cascading Style Sheets
Cascading Style Sheets (CSS) is a slightly misleading term, since a website might have
only one
CSS file (style sheet), or the CSS might be embedded within an HTML file. It is better to
think
of CSS as a technology (in the singular). CSS is comprised of statements that control the

/
nr
styling
o.
e.c
of HTML documents. Simply put, an HTML document should convey content. A CSS
ub

document
et

should control the styling of that content.
cs

<div align="center"></div> <img src="this.gif" border="0" alt="" /> <table
://
tp

height="200">... <td width="30"></td>
ht

All these examples can easily be replaced with CSS. Don't worry if you don't understand
these
declarations yet.
div {text-align: center;} img {border: 0 none;} table {height: 200px;} td
{width: 30px;}
An HTML file points to one or more external style sheets (or in some cases a list of
declarations
embedded within the head of the HTML file) which then controls the style of the HTML
document. These style declarations are called CSS rules.
2.2 Features
The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design
easier but it

http://csetube.co.nr/

GKMCET
Lecture Plan



became a hot topic for a while because not all browsers supported it. However, trends
change quickly in
technology and all browser makers currently are implementing complete CSS 3 support.
Making that
process easier for the browser manufacturers is CSS 3's modularized specification, which
allows them to
provide support for modules incrementally without having to perform major refactoring
of the browsers'

/
nr
codebases. The modularization concept not only makes the process of approving
individual CSS 3 o.
e.c
modules easier and faster, but it also makes documenting the spec easier.
ub

Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You
et
cs

should begin
://

making your Web pages compatible with these latest specifications. In this article, I
tp
ht

explore 10 of the
exciting new features in CSS 3, which is going to change the way developers who used
CSS2 build
websites.Some of the features are:
o CSS Text Shadow
o CSS Selectors
o CSS Rounded Corners
o CSS Border Image
3 Core Syntax
2.3.1 At-Rules
As we learned when we studied CSS statements, there are two types of statements. The
most
common is the rule-sets statement, and the other is the at-rules statement. As opposed to
rule


GKMCET
Lecture Plan



sets, at-rules statements consist of three things: the at-keyword, @, an identifier, and a
declaration. This declaration is defined as all content contained within a set of curly
braces, or by
all content up until the next semicolon.
@import
Perhaps the most commonly used of the at-rules, @import, is used to import an external
style
sheet into a document. It can be used to replace the LINK element, and serves the same

/
nr
function,

o.
except that imported style sheets have a lower weight (due to having less proximity) than
e.c
linked
ub

style sheets.
et
cs

<style type="text/css" media="screen"> @import url(imported.css); </style>
://

@import url(addonstyles.css); @import "addonstyles.css";
tp
ht

Relative and absolute URLs are allowed, but only one is allowed per instance of
@import. One
or more comma-separated target media may be used here.
@charset
@charset is used to specify the character encoding of a document, and must appear no
more than
once. It must be the very first declaration in the external style sheet, and cannot appear in
embedded style sheets. @charset is used by XML documents to define a character set.
@charset "utf-8";
@namespace
The @namespace rule allows the declaration of a namespace prefix to be used by
selectors in a
style sheet. If the optional namespace prefix is omitted, then the URL provided becomes
the


GKMCET
Lecture Plan



default namespace. Any @namespace rules in a style sheet must come after all @import
and
@charset at-rules, and come before all CSS rule-sets.
@namespace foo url("http://www.example.com/");
@namespace can be used together with the new CSS3 selectors (see below). It defines
which
XML namespace to use in the CSS. If the XML document doesn't have matching XML
namespace information, the CSS is ignored.

/
nr
@font-face

o.
This was removed from the CSS2.1 specification, but is still used to describe a font face
e.c
for a
ub

document..
et
cs

@font-face { font-family: "Scarborough Light"; src:
://

url("http://www.font.com/scarborough-lt"); } @font-face { font-family:
tp
ht

Santiago; src: local ("Santiago"), url("http://www.font.com/santiago.tt"),
format("truetype"); unicode-range: U+??,U+100-220; font-size: all; fontfamily:
sans-serif; }
@media
This at-rule is used within a style sheet to target specific media. For example, after
defining how
an element is to be displayed (in this example for the screen), the declaration can be
overwritten
for print, in which case we often want to hide navigation.
p {font-size: 0.8em;} /* for the screen */ @media print { p {font-size:
10pt;} #nav, #footer {display: none;} } @media screen, handheld { p {fontsize:
14px; text-align: justify;} }
The media types are as follows.
all


GKMCET
Lecture Plan



aural (for speech synthesizers)
handheld
print
projection
screen
braille
embossed
tty

/
nr
tv
@page o.
e.c
This at-rules declaration is used to define rules for page sizing and orientation rules for
ub

printing.
et
cs

@page {size: 15cm 20cm; margin: 3cm; marks: cross;}
://

You may specify how pages will format if they are first, on the left-hand side, or on the
tp
ht

right.
@page :first {margin-top: 12cm;} @page :left {margin-left: 4.5cm;} @page
:right {margin-right: 7cm;}
@fontdef
This is an old Netscape-specific at-rule which we should ignore.
CSS1 Selectors

Selectors refer to elements in an HTML document tree. Using CSS, they are pattern-
matched in


GKMCET
Lecture Plan



order to apply styles to those elements. A selector consists of one or more elements,
classes, or
IDs, and may also contain pseudo-elements and/or pseudo-classes.
Type Selector
The type selector is the simplest selector of all, and matches all occurrences of an
element. In
this example, all <p> tags throughout the document will have the following style applied,
unless

/
nr
overridden.
p {color: #666;} o.
e.c
Universal Selector
ub

The universal selector, used alone, matches all elements in the document tree, and thus
et
cs

will apply
://

styles to all elements. It is in effect a wildcard.
tp
ht

* {margin: 0; padding: 0;}
In this example, all tags are reset to have no padding or margin. This, by the way, is a
practice to
gain control over all the default padding and margin inherent in the way User Agents
(UAs)
display HTML.
Class Selector
The class selector matches a classname.
.largeFont {font-size: 1.5em;} h3.cartHeader {text-align: center;}
The "largeFont" class will apply to all elements into which it is called. The "cartHeader"
class
will only function as styled if called into an H3 element. This is useful if you have
another


GKMCET
Lecture Plan



"cartHeader" declaration that you wish to override in the context of an H3 element, or if
you
wish to enforce the placement of this class.
ID Selector
The ID selector matches an ID. IDs are identifiers unique to a page. They bear a
resemblance to
classes, but are used a bit differently. IDs will be treated more fully below. The first two
ID

/
nr
examples below refer to sections of a web page, while the last refers to a specific
occurrence of o.
e.c
an item, say, an image in a DHTML menu. IDs have a higher specificity than classes.
ub

#header {height: 100px;} #footer {color: #F00;} #xyz123 {font-size: 9px;}
et
cs

Descendant Selector
://

A selector can itself be a chain of one or more selectors, and is thus sometimes called a
tp
ht

compound selector. The descendant selector is the only compound selector in CSS1, and
consists
of two or more selectors and one or more white space combinators. In the example
below, the
white space between the H1 and EM elements is the descendant combinator. In other
words,
white space conveys a hierarchy. (If a comma were to have intervened instead, it would
mean
that we were styling H1 and EM elements alike.) Selectors using combinators are used
for more
precise drill-down to specific points within the document tree. In this example <em> tags
will
have the color red applied to them if they are within an <h1> tag.
h1 em {color: #F00;}


GKMCET
Lecture Plan



Note that EM elements do not have to be immediately inside an H1 heading, that is, they
do not
have to be children, but merely descendants of their ancestor. The previous style would
apply to
an EM element in either of the following statements.
<h1>This is a <em>main</em> heading</h1> <h1>This is <strong>another
<em>main</em> heading</strong></h1>
In the next example, the color black will be applied to all <span> tags that are

/
nr
descendants

o.
(whether directly or not) of <div> tags which are in turn descendants (whether directly or
e.c
not) of
ub

<p> tags, no matter how deep the <p> tags are in the document tree.
et
cs

div p span {color: #000;}
://

That is to say, this style would apply to SPAN elements inside a P element, even if they
tp
ht

are
many levels below (that is, within) the DIV element, as long as there is an intervening P
element.
The universal selector can be part of a compound selector in tandem with a combinator.
p * span {font-size: 0.6em;}
This would style any SPAN element that is at least a grandchild of a P element. The
SPAN
element could in fact be much deeper, but it will not be styled by this declaration if it is
the child
(direct descendant) of a P element.
Other Selectors
Other combinators convey greater precision. They include the direct adjacent sibling
combinator


GKMCET
Lecture Plan



(+), the indirect adjacent sibling (or general) combinator (~), and the child combinator
(>). These
combinators will be treated below because they are part of the CSS2.1 specification, and
are not
supported in IE6.
EXAMPLE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"

/
nr
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> o.
e.c
<head>
ub

<style type="text/css">
et
cs

div.ex
://

{
tp
ht

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
2.4 STYLE SHEETS AND HTML STYLE RULE
To apply a style, CSS uses the HTML document tree to match an element, attribute, or
value in
an HTML file. For an HTML page to properly use CSS, it should be well-formed and
valid, and
possess a valid doctype. If these conditions are not met the CSS match may not yield the
desired


GKMCET
Lecture Plan



results.There are two types of CSS statements: rule-sets and at-rules. A rule set, also
known
simply as a rule, is the more common statement, and consists of a selector and a
declaration
block, sometimes simply called a block. The selector can be an element, class, or ID, and
may
include combinators, pseudo-elements, or pseudo-classes.
Statement Type 1: Rules Sets (Rules)

/
nr
statement + statement block
X {declaration; declaration;} o.
e.c
X {property; value; property: value;}
ub

div > p {font-size: 1em; color #333;}
et
cs

Statement Type 2: At-Rules
://

at-keyword + identifier + declaration
tp
ht

@import "subs.css";
The declaration block consists of the braces and everything in between. Within the
declaration
block are declarations, which consist of properties and values. Properties are separated
from their
values (also known as styles) by colons, and declarations are delimited by semi-colons.
(Properties are also known as attributes, but that terminology is not used in this document
lest we
confuse CSS properties with HTML attributes.) White space inside a declaration block is
ignored, which facilitates formatting the code in developer-friendly ways. For example,
both of
the following statements are valid and equivalent, though the latter slightly increases
document
weight.


GKMCET
Lecture Plan



h1 {color: blue; margin-top: 1em;} h1 { color: blue; margin-top: 1em; }
Ensure, however, that there is no white space between a value and its unit of
measurement (e.g.
1.2em, not 1.2 em).As opposed to rule sets, at-rules statements consist of the at-keyword
"@", an
identifier, and a declaration. This declaration is defined as all the content contained
within a set
of curly braces, or by all content up until the next semicolon. Note the following two

/
nr
examples.

o.
@media print { p {font-size: 10pt;} tt {font-family: monospace;} } @import
e.c
url(addonstyles.css);
ub

Other examples of at-keywords are media, font-face, and page. At-rules will be treated
et
cs

separately
://

below.
tp
ht

Properties
I have decided not to include a description of all CSS1 and CSS2.1 Properties (such as
font-size,
text-transform, border, margin, and many others) because they are numerous and can be
examined in the Property References section of this site. Moreover, they are used
throughout this
tutorial and can be easily deduced. So we move directly to CSS1 selectors.
1.5 STYLE RULE CASCADING AND INHERITANCE
CSS are probably wondering what exactly cascades about cascading style sheets. In this
section
we look at the idea of cascading, and a related idea, that of inheritance. Both are
important
underlying concepts that you will need to grasp, and understand the difference between,
in order


GKMCET
Lecture Plan



to work properly with style sheets.
Rule Cascade
A single style sheet associated with one or more web pages is valuable, but in quite a
limited
way. For small sites, the single style sheet is sufficient, but for larger sites, especially
sites
managed by more than one person (perhaps several teams who may never communicate)
single

/
nr
style sheets don't provide the ability to share common styles, and extend these styles
where o.
e.c
necessary. This can be a significant limitation.
ub

Cascading style sheets are unlike the style sheets you might have worked with using word
et
cs

processors, because they can be linked together to create a hierarchy of related style
://

sheets.
tp
ht

Managing style at large sites using @import
Imagine how the web site for a large organization, say a corporation, might be structured.
As
sites grow in complexity, individual divisions, departments, and workgroups become
more
responsible for their own section of a site. We can already see a potential problem - how
do we
ensure a consistent look and feel across the whole site?A dedicated web development
team can
ensure that a style guide is adhered to.
Specificity
Get browser support information for specificity in the downloadable version of this guide
or our


GKMCET
Lecture Plan



browser support tables.At this point it might be timely to have a quick discussion of
specificity.
Both inside a single style sheet, and in a cascade of style sheets, it should be clear that
more than
one rule can apply to the same element. What happens when two properties in separate
rules
which both apply to an element contradict one another? Obviously they can't both apply
(the text

/
nr
of an element can't be both red and blue, for example). CSS provides a mechanism for
resolving o.
e.c
these conflicts, called specificity.
ub

Some selectors are more specific than others. For example, the class and ID selectors are
et
cs

more
://

specific than simple HTML element selectors. When two rules select the same element
tp
ht

and the
properties contradict one another, the rule with the more specific selector takes
precedence.
Specificity for selectors is a little involved. Without going into the full detail, most
situations can
be resolved with the following rules.
1. ID selectors are more specific than other selectors
2. Class selectors are more specific than HTML element selectors, and other selectors
such
as contextual, pseudo class and pseudo element selectors.
3. Contextual selectors, and other selectors involving more than one HTML element
selector are more specific than a single element selector (and for two multiple element
selectors, the one with more elements is more specific than the one with fewer.)


GKMCET
Lecture Plan



There are times though when the two rules will have the same specificity. In this case, the
rule
that comes later in the cascade prevails.For example, where one rule is in an imported
style
sheet, and the other in the style sheet itself, the rule in the style sheet which is importing
takes
precedence. When the two rules are in the same style sheet, it is the one furthest from the
top of

/
nr
the style sheet that takes precedence.While these rules seem complicated at first, they are
pretty o.
e.c
much common sense, and it is uncommon that much confusion or difficulty arises for a
ub

developer.
et
cs

Style Inheritance
://

Any HTML page comprises a number of (perhaps a large number of) elements -
tp
ht

headings,
paragraphs, lists, and so on. Often, developers use the term "tag" to refer to an element,
making
reference for example to "the p tag". But the tag is simply the <p></p> part of the
element. The
whole construction of <p>This is the content of the paragraph</p> is in fact the <p>
element (as we refer to it in this guide). What many web developers don't realize (largely
because it wasn't particularly important until style sheets came along) is that every
element is
contained by another element, and may itself contain other elements. The technical term
for this
is the containment hierarchy of a web page.
At the top of the containment hierarchy is the <html> element of the page. Every other
element


GKMCET
Lecture Plan



on a web page is contained within the <html> element, or one of the elements contained
within
it, and so on. Similarly, many elements will be contained in paragraphs, while paragraphs
are
contained in the <body>.
Graphically, we can understand it like this.
figure 4: the HTML containment hierarchy
I said above that style sheets made it important to understand this. Why? Well, with

/
nr
cascading

o.
style sheets, elements often (and with CSS2 can always be forced to) inherit properties
e.c
from the
ub

elements which contain them (otherwise known as their parent elements). This means
et
cs

that if you
://

give the body of the page certain properties (for example font and color) then every
tp
ht

element
within the page will inherit these properties- there is no need to set the font and color
again for
each element, such as list items or paragraphs.
You can always override the inheritance however. By assigning a property to an element,
you
override the inherited property.
2.6 Text t properties
2.6.1 CSS Font Families
CSS font properties define the font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
In CSS, there are two types of font family names:


GKMCET
Lecture Plan



generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif
Times New Roman
Georgia
Serif fonts have small lines at the ends on some

/
nr
characters
Sans-serif o.
e.c
Arial
ub

Verdana
et
cs

"Sans" means without - these fonts do not have the
://

lines at the ends of characters
tp
ht

Monospace
Courier New
Lucida Console
All monospace characters have the same width
Font Family
The font family of a text is set with the font-family property.The font-family property
should
hold several font names as a "fallback" system. If the browser does not support the first
font, it
tries the next font.Start with the font you want, and end with a generic family, to let the
browser
pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks,
like


GKMCET
Lecture Plan



font-family: "Times New Roman".More than one font family is specified in a comma-
separated
list:
Example
p{font-family:"Times New Roman", Times, serif;}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:

/
nr
normal - The text is shown normally
italic - The text is shown in italics o.
e.c
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
ub

Example
et
cs

p.normal {font-style:normal;}
://

p.italic {font-style:italic;}
tp
ht

p.oblique {font-style:oblique;}
Font Size
The font-size property sets the size of the text.Being able to manage the text size is
important in
web design. However, you should not use font size adjustments to make paragraphs look
like
headings, or headings look like paragraphs.Always use the proper HTML tags, like <h1>
- <h6>
for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)


GKMCET
Lecture Plan



Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).
Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:

/
nr
Example
h1 {font-size:40px;} o.
e.c
h2 {font-size:30px;}
ub

p {font-size:14px;}
et
cs

Set Font Size With Em
://

To avoid the resizing problem with Internet Explorer, many developers use em instead of
tp
ht

pixels.The em size unit is recommended by the W3C.1em is equal to the current font size.
The
default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
All CSS Font Properties
The number in the "CSS" column indicates in which CSS version the property is defined
(CSS1
or CSS2).
Property Description Values CSS
font


GKMCET
Lecture Plan



Sets all the font
properties in one
declaration
font-style
font-variant
font-weight
font-size/line-height
font-family

/
nr
caption
icon o.
e.c
menu
ub

message-box
et
cs

small-caption
://

status-bar
tp
ht

1
inherit
font-family
Specifies the font family
for text
family-name
generic-family
inherit
1
font-size
Specifies the font size of
text
xx-small
x-small


GKMCET
Lecture Plan



small
medium
large
x-large
xx-large
smaller
larger
length

/
nr
%
inherit o.
e.c
1
ub

font-style
et
cs

Specifies the font style
://

for text
tp
ht

normal
italic
oblique
inherit
1
font-variant
Specifies whether or not
a text should be
displayed in a small-caps
font
normal
small-caps
inherit
1


GKMCET
Lecture Plan



font-weight
Specifies the weight of a
font
normal
bold
bolder
lighter
100

/
nr
200
300 o.
e.c
400
ub

500
et
cs

600
://

700
tp
ht

800
900
1
inherit
Text Formatting and color
All CSS Text Properties
(CSS1
or CSS2).
color Sets the color of a text color 1
direction Sets the text direction
ltr
rtl


GKMCET
Lecture Plan



2
line-height Sets the distance between lines
normal
number
length
%
1
letter-spacing Increase or decrease the space between characters

/
nr
normal
length o.
e.c
1
ub

text-align Aligns the text in an element
et
cs

left
://

right
tp
ht

center
justify
1
text-decoration Adds decoration to text
none
underline
overline
line-through
blink
1
text-indent Indents the first line of text in an element
length
%
1


GKMCET
Lecture Plan



text-shadow
none
color
length
text-transform Controls the letters in an element
none
capitalize
uppercase

/
nr
lowercase
1 o.
e.c
unicode-bidi
ub

normal
et
cs

embed
://

bidi-override
tp
ht

2
vertical-align Sets the vertical alignment of an element
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
1
white-space Sets how white space inside an element is handled


GKMCET
Lecture Plan



normal
pre
nowrap
1
word-spacing Increase or decrease the space between words
normal
length
1

/
nr
2.7 The CSS Box Model
BLOCK DIAGRAM o.
e.c
All HTML elements can be considered as boxes. In CSS, the term "box model" is used
ub

when
et
cs

talking about design and layout.
://

The CSS box model is essentially a box that wraps around HTML elements, and it
tp
ht

consists of:
margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in
relation to
other elements.
The image below illustrates the box model:
Explanation of the different parts:
Margin - Clears an area around the border. The margin does not have a background color,
it is
completely transparent
Border - A border that goes around the padding and content. The border is affected by the
background color of the box
Padding - Clears an area around the content. The padding is affected by the background
color of


GKMCET
Lecture Plan



the box
Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to
know
how the box model works.
Width and Height of an Element
Important: When you specify the width and height properties of an element with CSS,
you are

/
nr
just setting the width and height of the content area. To know the full size of the element,
you o.
e.c
must also add the padding, border and margin.
ub

The total width of the element in the example below is 300px:
et
cs

width:250px;
://

padding:10px;
tp
ht

margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Imagine that you only had 250px of space. Let's make an element with a total width of
250px:
Example
width:220px;
padding:10px;


GKMCET
Lecture Plan



margin:0px;
The total width of an element should always be calculated like this:
Total element width = width + left padding + right padding + left border + right border +
left
margin + right margin
The total height of an element should always be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom
border +

/
nr
top margin + bottom margin
Example o.
e.c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
ub

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
et
cs

<html>
://

<head>
tp
ht

div.ex
{
width:220px;
padding:10px;
margin:0px;
}
</style>
</head>
CSS Background
CSS background properties are used to define the background effects of
an element.
CSS properties used for background effects:


GKMCET
Lecture Plan



background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.The
background

/
nr
color of a page is defined in the body selector:
Example o.
e.c
body {background-color:#b0c4de;}
ub

The background color can be specified by:
et
cs

name - a color name, like "red"
://

RGB - an RGB value, like "rgb(255,0,0)"
tp
ht

Hex - a hex value, like "#ff0000"
Background Image
The background-image property specifies an image to use as the background of an
element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Below is an example of a bad combination of text and background image. The text is
almost not
readable:
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and
vertically.


GKMCET
Lecture Plan



Some images should be repeated only horizontally or vertically, or they will look strange,
like
this:
Example
body
{
background-image:url('gradient2.png');
}

/
nr
If the image is repeated only horizontally (repeat-x), the background will look better:
Example o.
e.c
body
ub

{
et
cs

background-image:url('gradient2.png');
://

background-repeat:repeat-x;
tp
ht

}
Background Image - Set position and no-repeat
When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the example above, the background image is shown in the same place as the text. We
want to
change the position of the image, so that it does not disturb the text too much.The
position of the


GKMCET
Lecture Plan



image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

/
nr
Background - Shorthand property

o.
As you can see from the examples above, there are many properties to consider when
e.c
dealing
ub

with backgrounds.
et
cs

To shorten the code, it is also possible to specify all the properties in one single property.
://

This is
tp
ht

called a shorthand property.
The shorthand property for background is simply "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using the shorthand property the order of the property values are:
background-color
background-image
background-repeat
background-position
It does not matter if one of the property values are missing, as long as the ones that are
present
are in this order.
This example uses more advanced CSS. Take a look: Advanced example
All CSS Background Properties


GKMCET
Lecture Plan



(CSS1
or CSS2).
background
Sets all the background properties
in one declaration
background-color

/
nr
background-image
background-repeat o.
e.c
ub

background-position
et
cs

inherit
://

1
tp
ht

Sets whether a background image is
fixed or scrolls with the rest of the
page
scroll
fixed
inherit
1
background-color
Sets the background color of an
element
color-rgb
color-hex
color-name


GKMCET
Lecture Plan



transparent
inherit
1
background-image
Sets the background image for an
element
url(URL)
none

/
nr
inherit
1 o.
e.c
background-position
ub

Sets the starting position of a
et
cs

background image
://

left top
tp
ht

left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
1
background-repeat
Sets if/how a background image will


GKMCET
Lecture Plan



be repeated
repeat
repeat-x
repeat-y
no-repeat
inherit
1
2.8 NORMAL FLOW BOX LAYOUT

/
nr
Understanding the box model is critical to developing web pages that don't rely on tables
for o.
e.c
layout. In the early days of writing HTML, before the advent of CSS, using tables was
ub

the only
et
cs

way to have discreet content in separate boxes on a page. But tables were originally
://

conceived to
tp
ht

display tabular information. With the advent of CSS floating and positioning, there is no
longer a
need to use tables for layout, though many years later many, if not most, sites are still
using
tables in this manner.The box model, as defined by the W3C "describes the rectangular
boxes
that are generated for elements in the document tree and laid out according to the visual
formatting model". Don't be confused by the term "boxes". They need not appear as
square boxes
on the page. The term simply refers to discreet containers for content. In fact, every
element in a
document is considered to be a rectangular box.
Padding, Borders, Margins


GKMCET
Lecture Plan



Padding immediately surrounds the content, between content and borders. A margin is
the space
outside of the borders. If there are no borders both paddng and margin behave in roughly
the
same way, except that you can have negative margins, while you cannot have negative
padding.
Also padding does not collapse like margins. See below for the section on collapsing
margins.

/
nr
The picture on the right illustrates padding, borders, and margins. The content area does
not o.
e.c
really have a border. The line around the content merely indicates the limits of the actual
ub

content.
et
cs

Traditional vs. W3C Box Models
://

So how do you declare these properties in your CSS, and how do you set the width of a
tp
ht

box?
That depends on the box model. There are actually two box models. The traditional box
model is
supported by IE5.5 and previous versions of IE, and any version of IE in quirks mode. It
states
that the width of a box is the combined width of the content, its padding and its borders.
Imagine
a literal box that you can hold. The carboard exterior is the border. We don't care about
the
content inside of the box. It may fill up the box entirely or have space around it. If it has
space
around it, that is its padding, which sits between the content and the exterior (border) of
the box.


GKMCET
Lecture Plan



But according to this model, it does not matter what the actual content width is. The
width of the
box is what matters. Using the traditional model let's consider the following declaration.
.box {width: 200px; border: 1px solid black; padding: 10px;}
In the traditional model the width of the box is 200 pixels.
CSS: .wrap {width: 760px;} .menu {float: left; width 187px; padding: 6px;
border-right: 1px solid #999;} .main {float: left; width 548px; padding:
6px;} HTML: <div id="wrap"> <div id="menu"></div> <div id="main"></div>

/
nr
</div>

o.
The math from left to right would be:menu left padding + menu content + menu right
e.c
padding +
ub

menu border + main left padding + main content + main right padding (or in pixels) 6 +
et
cs

187 + 6
://

+ 1 + 6 + 548 + 6 = 760.
tp
ht

Margin Collapse
Vertical margins collapse when they meet. Though it may seem like a strange thing, if
you have
assigned top and bottom margins to the P element of, say, 10px each, you will not have
20px of
margin between paragraphs, but rather 10px. This is considered to be desirable and
expected
behavior, and not a bug. Now consider the following declaration.
p {margin: 10px 0 16px;}
In this case the space between paragraphs would be 16px, that is, the greater of the two
values.
Margin collapse does not occur when either box is floated, when one element uses the
overflow


GKMCET
Lecture Plan



property set to any value other than "visible", with absolutely positioned elements, with
elements
whose display property is set to "inline-block", or if the child element is cleared.You can
override margin collapse also by adding a border, of the same color as the background if
you
want it unnoticed, or by using padding instead of margins. Eric Meyer has a nice
description of
collapsing margins. In sum, margin collapse is meant to prevent certain design problems,

/
nr
and yet
is not difficult to override. o.
e.c
Display Property
ub

This is one of the most useful properties. The complete list of values is in the appendix of
et
cs

this
://

document, but the most useful ones follow.
tp
ht

block
Block display provides behavior similar to a default DIV element. A line break occurs at
the
close of the tag. Elements that are block by default are DIV, P, BLOCKQUOTE, H1
through H6,
UL, OL, LI, ADDRESS, etc. Block elements accept width, height, top and bottom
margins, and
top and bottom padding. A block element constitutes a separate block box.
inline
Inline display creates no such line break. Elements that are inline by default are SPAN,
IMG,
INPUT, SELECT, EM, STRONG, etc. Inline elements do not accept width, height, top
and


GKMCET
Lecture Plan



bottom padding, and top and bottom margins, which makes good sense, since they are
used for
part of a line of text (i.e. of a block box).
They do, however, accept left and right padding, left and right margins, and line-height.
Lineheight
can then be used to approximate height. If you need to apply width, height or other block
properties to an inline element, consider assigning the element block display and/or
floating it.

/
nr
Block display, of course, will force the element on to a separate line (unless the element
is o.
e.c
floated). Alternatively you can assign the inline-block value to make an inline element
ub

take block
et
cs

properties (see below).
://

none
tp
ht

Display set to none sets the element to invisible similar to the hidden value of the
visibility
property (see below). However, unlike the visibility property, this value takes up no space
on the
page. This is very useful for DHTML hidden tools and for other instances when you need
items
to expand and collapse based on whether they contain content to be viewed on demand.
Moreover, when you generate content, items whose display is set to none will not be
included in
the loop. (For more on generated content, see below.) Display set to none will also be
hidden
from most screen readers. If you are trying to make something readable only for those
with sight
disabilities, use an off-screen class like this:


GKMCET
Lecture Plan



.offScreen {position: absolute; left: -10000px; top: auto; width: 1px;
height: 1px; overflow: hidden;}
inline-block
This value causes the element to generate a block element box that will be flowed with
surrounding content as if it were a single inline box. It lets you place a block inline with
the
content of its parent element. It also allows you to assign properties associated with block
display, such as width and height to an element that naturally takes inline display. This

/
nr
property

o.
is also used to trigger hasLayout in IE6, which is a difficult concept, but briefly means
e.c
making
ub

IE6 assume CSS certain properties.
et
cs

run-in
://

This display mode causes the element to appear as an inline element at the start of the
tp
ht

block
immediately following it. If there is no block following a run-in element, it is displayed
as a
normal block instead. Currently, there seems to be no browser support for this value
except for
IE8, but here is an example of how it is coded, and how it should look.
<div style="display: run-in">Here is some run-in text on this line.</div>
<div style="display: block">But here is a block that follows it, so they are
conjoined.</div>
Let's seer if it works. Here is some run-in text on this line.But here is a block that follows
it, so
are they conjoined? Well, apparently not in Firefox. Oh well.
list-item


GKMCET
Lecture Plan



Unordered lists are traditionally used to list bulleted items vertically. But you can assign
bullets
to other elements using the list-item value.
div {display: list-item;}
It may not make a lot of semantic sense to apply bullets to an element that is not a list
item, but
at the very least it's helpful that CSS is so flexible. However you use these values, ensure
that

/
nr
your HTML is meaningful irrespective of your CSS. Because there is a wide variety of
display o.
e.c
values, HTML tags can be made to display in a variety of ways, some counter to the
ub

nature of the
et
cs

element. Care should be taken to maintain the implicit content of elements. Should you,
://

for
tp
ht

example, give a P element inline display? You can, but use caution. It is more likely that
you will
set the inline value for the DIV element. This seems to be more acceptable in that the
DIV
element simply provides separate treatment for content, while a paragraph is visually
demarcated
from other elements.
2.9 Beyond the Normal Flow
Positioning
The CSS positioning properties allow you to position an element. It can also place an
element
behind another, and specify what should happen when an element's content is too
big.Elements


GKMCET
Lecture Plan



can be positioned using the top, bottom, left, and right properties. However, these
properties will
not work unless the position property is set first. They also work differently depending on
the
positioning method.There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always
positioned

/
nr
according to the normal flow of the page.Static positioned elements are not affected by
the top, o.
e.c
bottom, left, and right properties.
ub

Fixed Positioning
et
cs

An element with fixed position is positioned relative to the browser window.It will not
://

move
tp
ht

even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.Fixed
positioned elements are removed from the normal flow. The document and other
elements
behave like the fixed positioned element does not exist.Fixed positioned elements can
overlap
other elements.


GKMCET
Lecture Plan



Relative Positioning
A relative positioned element is positioned relative to its normal position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}

/
nr
h2.pos_right
{ o.
e.c
position:relative;
ub

left:20px;
et
cs

}
://

The content of a relatively positioned elements can be moved and overlap other elements,
tp
ht

but the
reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}
Relatively positioned element are often used as container blocks for absolutely positioned
elements.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a
position
other than static. If no such element is found, the containing block is <html>:


GKMCET
Lecture Plan



Example
h2
{
position:absolute;
left:100px;
top:150px;
}
27

/
nr
Absolutely positioned elements are removed from the normal flow. The document and
other o.
e.c
elements behave like the absolutely positioned element does not exist.Absolutely
ub

positioned
et
cs

elements can overlap other elements.
://

Overlapping Elements
tp
ht

When elements are positioned outside the normal flow, they can overlap other
elements.The zindex
property specifies the stack order of an element (which element should be placed in front
of, or behind, the others).An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
An element with greater stack order is always in front of an element with a lower stack
order.


GKMCET
Lecture Plan



All CSS Positioning Properties
(CSS1
or CSS2).
bottom
Sets the bottom margin edge for a
positioned box

/
nr
auto
length o.
e.c
%
ub

inherit
et
cs

2
://

clip Clips an absolutely positioned element
tp
ht

shape
auto
inherit
2
cursor Specifies the type of cursor to be displayed
url
auto
crosshair
default
pointer
move
2
28
e-resize


GKMCET
Lecture Plan



ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text

/
nr
wait
help o.
e.c
left
ub

Sets the left margin edge for a positioned
et
cs

box
://

auto
tp
ht

length
%
inherit
2
overflow
Specifies what happens if content overflows
an element's box
auto
hidden
scroll
visible
inherit
2
position


GKMCET
Lecture Plan



Specifies the type of positioning for an
element
absolute
fixed
relative
static
inherit
2

/
nr
right
Sets the right margin edge for a positioned o.
e.c
box
ub

auto
et
cs

length
://

%
tp
ht

inherit
2
top
Sets the top margin edge for a positioned
box
auto
length
%
inherit
2
z-index Sets the stack order of an element
number
auto
inherit


GKMCET
Lecture Plan



2
29
What is CSS Float?
With CSS float, an element can be pushed to the left or right, allowing other elements to
wrap around it.
Float is very often used for images, but it is also useful when working with layouts.
How Elements Float
Elements are floated horizontally, this means that an element can only be floated left or

/
nr
right, not

o.
up or down.A floated element will move as far to the left or right as it can. Usually this
e.c
means all
ub

the way to the left or right of the containing element.The elements after the floating
et
cs

element will
://

flow around it.The elements before the floating element will not be affected.
tp
ht

If an image is floated to the right, a following text flows around it, to the left:
Example
img
{
float:right;
}
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if
there
is room.Here we have made an image gallery using the float property:
Example
.thumbnail
{
float:left;


GKMCET
Lecture Plan



width:110px;
height:90px;
margin:5px; }
2.10 SOME OTHER USEFUL STYLE PROPERTIES
CSS Lists
The CSS list properties allow you to:
o Set different list item markers for ordered lists
30

/
nr
o Set different list item markers for unordered lists
o Set an image as the list item marker o.
e.c
List
ub

In HTML, there are two types of lists:
et
cs

unordered lists - the list items are marked with bullets
://

ordered lists - the list items are marked with numbers or letters
tp
ht

With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Some of the property values are for unordered lists, and some for ordered lists.
Values for Unordered Lists
Value Description
none No marker
disc Default. The marker is a filled circle
circle The marker is a circle


GKMCET
Lecture Plan



square The marker is a square
Values for Ordered Lists
Value Description
armenian The marker is traditional Armenian numbering
decimal The marker is a number
31
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)

/
nr
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)

o.
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
e.c
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
ub

lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
et
cs

upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
://

upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
tp
ht

upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
Note: No versions of Internet Explorer (including IE8) support the property values
"decimalleading-
zero", "lower-greek", "lower-latin", "upper-latin", "armenian", or "georgian" UNLESS a
DOCTYPE is specified!
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
The example above does not display equally in all browsers. IE and Opera will display
the


GKMCET
Lecture Plan



image-marker a little bit higher than Firefox, Chrome, and Safari.If you want the image-
marker
to be placed equally in all browsers, a crossbrowser solution is explained below.
Crossbrowser Solution
The following example displays the image-marker equally in all browsers:
Example
ul
{

/
nr
list-style-type: none;
32 o.
e.c
padding: 0px;
ub

margin: 0px;
et
cs

}
://

li
tp
ht

{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Example explained:
For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left


GKMCET
Lecture Plan



List - Shorthand property
It is also possible to specify all the list properties in one, single property. This is called a
shorthand property.The shorthand property used for lists, is the list-style property:
ul
{
list-style: square url("sqpurple.gif");
}
When using the shorthand property, the order of the values are:

/
nr
list-style-type

o.
list-style-position (for a description, see the CSS properties table below)
e.c
list-style-image
ub

It does not matter if one of the values above are missing, as long as the rest are in the
et
cs

specified
://

order.
tp
ht

33
All CSS List Properties
(CSS1
or CSS2).
list-style Sets all the properties for a list in one declaration
list-style-type
list-style-position
list-style-image
inherit
1
list-style-image Specifies an image as the list-item marker
URL


GKMCET
Lecture Plan



none
inherit
1
list-style-position
Specifies if the list-item markers should appear
inside or outside the content flow
inside
outside

/
nr
inherit
1 o.
e.c
list-style-type Specifies the type of list-item marker
ub

none
et
cs

disc
://

circle
tp
ht

square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
1


GKMCET
Lecture Plan



34
CSS Tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

/
nr
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany o.
e.c
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
ub

Magazzini Alimentari Riuniti Giovanni Rovelli Italy
et
cs

North/South Simon Crowther UK
://

Paris spécialités Marie Bertrand France
tp
ht

The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark
Table Borders
To specify table borders in CSS, use the border property.The example below specifies a
black
border for table, th, and td elements:Notice that the table in the example above has double
borders. This is because both the table, th, and td elements have separate borders.
Example
table, th, td
{
border: 1px solid black;
}
35
To display a single border for the table, use the border-collapse property.


GKMCET
Lecture Plan



Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single
border or
separated:
table
{
border-collapse:collapse;
}

/
nr
table,th, td
{ o.
e.c
border: 1px solid black;
ub

}
et
cs

Table Width and Height
://

Width and height of a table is defined by the width and height properties.The example
tp
ht

below sets
the width of the table to 100%, and the height of the th elements to 50px:
table
{
width:100%;
}
th
{
height:50px;
}
CSS CURSORS
Although the cursors will not have the customized look in other browsers it usually
doesn't ruin


GKMCET
Lecture Plan



anything. These browsers will simply show the normal arrow-cursor which would be
same case
as if you refrained from cus tomizing cursors at all.So unless the page really doesn't work
without the customized cursor there shouldn't be technical reasons for choosing not
to.However
there might be other reasons for thinking twice before adding custom cursor to your
pages. Many
users are easily confused or irritated when a site breaks the standard user interface.

/
nr
Adding A Customized Cursor
The syntax for a customized cursor is this: o.
e.c
(Position the mouse over each link to see the effect)
ub

Selector {cursor:value}
et
cs

36
://

For example:
tp
ht

<html>
<head>
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>


GKMCET
Lecture Plan



</html>
2.11 CASE STUDY
Case Study: Revamping an Existing Site
April 27, 2010 32 Comments .
Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with a
guest post about
a case study on revamping his outdated site. Enjoy reading about his revamping project.
Below is a case-study on how I used the Blueprint CSS Framework and jQuery

/
nr
JavaScript library to

o.
rebuild an outdated site – somehow you helped me with it, so in return I share my work,
e.c
hoping it can be
ub

of future use. Thank you!
et
cs

The website we are talking about was build back in 2001. As you would understand we
://

are talking about
tp
ht

a heavily-aged website that had the following ‘problems’ or difficulties:
using some CSS, but mainly tables
the menu is a separate JS file: easy to maintain, but it doesn’t look too good
a few years ago I added the rounded corners (using JavaScript) and the red
backdrop/border, but
that doesn’t look too flashy either
the source is not W3C compliant (outdated code like <br> – instead of the current
<br/&nsbp;>)
37
the footer is embedded in each page (hard to update for about 100 pages)
in general, look & feel is not ‘up to date’
the enquiry form uses a JavaScript file that is no longer supported
in Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table –
probably


GKMCET
Lecture Plan



easy to fix, but never got to it):
For a website in the modern internet world, that is not acceptable. For this reason, I
compiled a list of
features I would like to have on the modern, good looking website.
Site Features we Need
W3C compliant code
CSS and HTML in separated files
browser compatibility

/
nr
rounded corners & drop shadow
1 central menu file o.
e.c
JavaScript support (instead of using several separate scripts that (might) interfere)
ub

structured design (layout without tables)
et
cs

Where to Start?
://

Last year I read this very useful article about building HTML/CSS sites using a template.
tp
ht

This template
has a grid CSS layout and the jQuery framework build in. I had seen those before, but
was not yet using
them in combination with WordPress.
I also found this site for dropshadow & rounded corners. As I wanted to avoid too many
jQuery plugins, I
didn’t use jQuery for the round corners. So far my experience is that jQuery rounded
corners can interfere
with other plugins, needing too much work to fix (and warrant) it.
For this reason, the no-Java-script solution seemed preferable. Provided, it had worked –
it did not – as it
uses several <divs>, it messed up the Blueprint classes, it didn’t display properly
‘underneath’ the header


GKMCET
Lecture Plan



images etc. The typical pain when it comes to CSS and different techniques in different
browsers.
So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners?
Dilemma there…..
Until playing around with Blueprint a bit more…. as it comes with grid.png, to display
the columns for
design purposes, which you can switch off when you go live. But then, if you can remove
that backdrop,

/
nr
why not adding your own???? Using my own image I had created for the initial
technique, but thought o.
e.c
useless now, it worked flawlessly!
ub

38
et
cs

Here is what I did – in the Blueprint folder, there is a screen.css – just add one line and
://

comment the gridline
tp
ht

– that’s all!
In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you want
to display the
Blueprint-columns):
The grid.png is repeated both horizontally & vertically, but my one large image is not, so
it fits perfectly –
I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-
paper with a
unique texture – using only a small slice/strip and repeating that would make it look
unnatural. And I use
a footer-image – including it in php, it neatly fits underneath the length of the actual
content – not the full
background image of 1600px – it ‘stretches’ to the maximum height, but resizes to the
needed height.


GKMCET
Lecture Plan



I wanted to use this menu for this website. One problem though: it has no single menu
file (eg. menu.php)
you can add to your website. After building that menu.php file myself, the jQuery menu
worked perfectly.
When I created the header.php and footer.php files and included in the website using
PHP, they are easily
updated in those 100 different pages. Depending on the page of the website, I can now
include different

/
nr
images via one page. Pretty efficient.
The Template o.
e.c
With all this now in place, this is how the code looks like (this is what I will use as the
ub

‘page-template’
et
cs

(there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an
://

individual page is
tp
ht

placed within the <content-div> (both <span>-classes, in blue) – everything remains in
place, no
fluid/stretched text (in different browsers).
<
<script src="supportfiles/js/jquery.js" type="text/javascript"></script>
<script src="supportfiles/menu/menu.js" type="text/javascript"></script>
<div id="container" class="container showgrid">
39
<div id="header" class="span-24 prepend-top">
<div class="prepend-1 span-22 append-1"></div>
</div>

<div id="CONTENT" class="prepend-1 span-22 append-1 prepend-top">
<div class="span-17">

GKMCET
Lecture Plan



<h1>Main content</h1>
Put your main text here (17 columns wide).
</div>
<div class="span-5 last">
<h3>Sidebar</h3>
Some sidebar on the right (5 columns wide).
</div>
</div>

/
nr

<div id="footer" class="span-24"></div> o.
e.c

ub

</div>
et
cs


://

Blueprint-grid enabled:
tp
ht

40
And this is how it looks like (pictures not optimized yet):
2.12 . CLIENT SIDE PROGRAMMING:JAVA SCRIPT
Introduction
JavaScript is most commonly used as a client side scripting language. This means that
JavaScript
code is written into an HTML page. When a user requests an HTML page with JavaScript
in it,
the script is sent to the browser and it's up to the browser to do something with
it.JavaScript can
be used in other contexts than a Web browser. Netscape created server-side JavaScript as
a CGIlanguage
that can do roughly the same as Perl or ASP. There is no reason why JavaScript

GKMCET
Lecture Plan



couldn’t be used to write real, complex programs. However, this site exclusively deals
with the
41
use of JavaScript in web browsers.I can also recommend Jeremy Keith, DOM Scripting:
Web
Design with JavaScript and the Document Object Model, 1st edition, Friends of Ed,
2005. This,
too, is a book that doesn't delve too deeply into technology, but gives non-programmers

/
nr
such as

o.
graphic designers/CSS wizards an excellent overview of the most common uses of
e.c
JavaScript -
ub

as well as the most common problems.
et
cs

History and Versions of The JavaScript language
://

JavaScript is not a programming language in strict sense. Instead, it is a scripting
tp
ht

language
because it uses the browser to do the dirty work. If you command an image to be replaced
by
another one, JavaScript tells the browser to go do it. Because the browser actually does
the work,
you only need to pull some strings by writing some relatively easy lines of code. That’s
what
makes JavaScript an easy language to start with.
But don’t be fooled by some beginner’s luck: JavaScript can be pretty difficult, too. First
of all,
despite its simple appearance it is a full fledged programming language: it is possible to
write
quite complex programs in JavaScript. This is rarely necessary when dealing with web
pages, but


GKMCET
Lecture Plan



it is possible. This means that there are some complex programming structures that you’ll
only
understand after protracted studies.
Secondly, and more importantly, there are the browser differences. Though modern web
browsers all support JavaScript, there is no sacred law that says they should support
exactly the
same JavaScript.
JavaScript versions

/
nr
There have been several formal versions of JavaScript.
1.0: Netscape 2 o.
e.c
1.1: Netscape 3 and Explorer 3 (the latter has bad JavaScript support, regardless of its
ub

version)
et
cs

1.2: Early Version 4 browsers
://

1.3: Later Version 4 browsers and Version 5 browsers
tp
ht

1.4: Not used in browsers, only on Netscape servers
42
1.5: Current version.
2.0: Currently under development by Brendan Eich and others.
Originally, these version numbers were supposed to give support information. This-and-
that
method would only be supported by browsers understanding JavaScript 1.something .
The higher
the version number, the more nifty features the browser would support.
<script language="javascript1.3" type="text/javascript">

Web technology unit II

Recommended

Recommended

More Related Content

Similar to Web technology unit II

Similar to Web technology unit II (20)

More from MURALI ERASA

More from MURALI ERASA (9)

Recently uploaded

Recently uploaded (20)

Web technology unit II