Wdm-Unit-2 Notes

IT8078- WEB DESIGN AND MANAGEMENT-UNIT-2-IV YEAR IT-PIT
UNIT II CSS AND JAVASCRIPT

CSS – Formatting text – Colours and Background – Padding,
Borders and Margins – Floating and positioning – Page Layout
with CSS – Transition, Transforms and Animation- Javascript -
Using Java Script
1. CSS
STYLE SHEETS:
A style sheet technology designed to work with HTML and XML documents. CSS
provides a great deal of control over the presentation of a document.
Introduction to Cascading Style Sheets :
Definition :
CSS allows document author to specify the presentation of elements on a web page(
e.g. font, spacing, margins,etc ) separately from the structure of the document ( ie. Section
headers, body text, links ,etc.). This separation of structure from presentation simplifies
maintaining and modifying a document’s layout.
Uses :
Cascading style sheets (CSS) provide a solution for defining the Web site design in
each and every page, you can use a style sheet to control the overall layout of your site.
Style sheets let you place things exactly where you want them to be on the page, using
the distance in pixels from the top and the left of the browser window.
- External Style Sheets can save you a lot of work
- External Style Sheets are stored in CSS files
- Multiple style definitions will cascade into one
Style sheets are made up of one or more rules that look something like this...
h1 {
font-family: arial,helvetica;
font-size: 12pt;
color: green
}
Each rule begins with a selector, which is H1 in the example above. A selector is often
one or more HTML tags, and the declarations inside the rule describe how those elements
should appear.
You can also use classes as selectors, which aren't tied to specific HTML elements...
.orange {
1
background-color: orange
}
Note that .orange doesn't mean anything special - you can use anything as a class name
provided that it starts with a period and is composed of a single word (spaces and underscores
are not allowed).
To apply a class to an HTML tag, you use the the class attribute (which was introduced
in HTML 4.0). For example, to highlight important text on your page, apply the above style to
a <p> tag...
<p class="orange">Cascading Style Sheets</p>
Note that the period before the class name is not included.
How to use style sheets?
How to add CSS:

There are three ways you can use cascading style sheets...
1. Inline Style Sheets 2. Embedded Style Sheets 3. Conflicting Styles
4. External Style Sheet(.css file )
1) Inline Style Sheets :
It declare an individual element’s format using the XHTML attribute style. Each
CSS property is followed by colon and a value. For Eg. (background-color property
in this case)
Using the style attribute, the style sheet is defined inside the <html> tag that is being
formatted.
For example.
<p style="background-color:orange">Cascading Style Sheets</p>
<p style="font-size: 20pt">Cascading Style Sheets</p>
2) Embedded Style Sheets:
Embedding entire CSS codes using a style block in the HEAD section of your
XHTML document. A style block is composed of an opening <STYLE> tag followed
by a set of CSS rules followed by a closing </STYLE> tag.
For example, you can make your text links change color when the mouse passes over
them by inserting these CSS codes into the HEAD of your document...
<head>
<style type="text/css">

</style>
</head>
While this method is better than applying styles on a tag-by-tag basis, it still ties the
style to a particular HTML document.
Eg. 1.
<?xml version = "1.0"?>
<html >
<head> <title>Embedded Style Sheets</title>
<style type = "text/css">
em { background-color: #8000ff;
color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<body>

<h1 class = "special"> Welcome to India </h1>
<p class = "special"> The IT company's clients include many
<em>Fortune 1000 companies</em>, government agencies,
branches of the military and business organizations.
</p>
</body>
</html>
Note :
Relative Values of font-size properties are : xx-small,x-small,small,smaller,
medium, large, larger, x-large and xx-large.
Parent element or ancestor element – allow to access the values for child element.
Child or descendent element – inherits the style from the parent element. (i.e.Nested
element)
3
For Eg. em is child element of p parent element.

3) Conflicting Styles :
It resolve conflicts between styles defined for elements and styles inherited from
parent and ancestor element.
For Eg.
<?xml version = "1.0"?>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Conflicting More Styles</title>
<style type = "text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #ccffcc }
li em { color: red;
font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline; margin-left: 15px }
</style>
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><a class = "nodec" href = "http://www.food.com">
4
Go to the Grocery store</a></p>

</body>
</html>
Note :
Properties defined for child and descendant elements have a greater specificity
than Properties defined for parent and ancestor elements.
i.e child and descendant elements specificity > parent and ancestor elements specificity
Other possible values for text-decoration:
Overline, line-through, underline and blink(blink is not supported by IE
browser)
Pseudoclass – is activated dynamically when the user moves mouse cursor over an
element. It is separated by semicolon ( : ) from the name of the element to which they are
applied. ( for Eg. a:hover but a.nodec is not pseudoclass and it is appended to a class styles)
Relative length measurement units are :
Pixel – it varies in size , based on the screen resolution.
em - is a relative length measurement , called M height of the font, which is usually set
to the height of an uppercase M.
ex – so called x height of the font, which is usually set to the height of an lowercase x.
percentages(%) - is a relative length measurement. (For eg. margin-left : 20%)
Absolute length measurement units are:
- in(inches) - cm(centimeters) - mm(millimeters)
- pt(points; 1pt = 1/ 72 in ) - pc (picas; 1pc = 12pt)
4) External Style Sheet(.css file ) :
Linking external cascading style sheets to XHTML documents using a <LINK>
tag in the HEAD section of every document you wish to apply the style sheet to. The
style sheet is located in a text document separate from the web page document.
For example...
styles.css
/* An external stylesheet */
a { text-decoration: none }
a:hover { text-decoration: underline;color: red; background-color: #ccffcc }
li em { color: red; font-weight: bold; background-color: #ffffff }
ul { margin-left: 2cm }
5
ul ul { text-decoration: underline; margin-left: .5cm }

Linking External Style sheets in XHTML head section by ,
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Where ,
link – element
rel – Attribute specify a relationship between the current document and another
document.
type - Attribute specify the MIME type as text/css.
href - Attribute specify the URL for the document containing the style sheet.
Note :
CSS Comments - / * and * / (i.e, Text between these delimiters is ignored by browser)
User Styles Sheet :
✓ Users can define their own user style sheets to format pages based on their
preferences.
For Eg. People with visual impairments may want to increase the page text size.
✓ User Style sheets are external sheets.
✓ User Style sheets are not linked to document rather they are set in the browser
option..
Example Program for display “Hello world!”1 Using style sheets:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSSHelloWorld.html </title>
<link rel="stylesheet" type="text/css" href="style1.css"
title="Style 1" />
<link rel="alternate stylesheet" type="text/css"
href="style2.css"
title="Style 2" />
</head>
<body>
6
<p>
Hello World!
</p>
</body>
</html>
Output :
Explanation :
<link rel="stylesheet" > is known as link element associates style sheet with doc.
type="text/css" - type attribute specifies style language used .
href="style2.css – Provides style sheet URL.
title="Style 2" – This attribute provides style sheet name.
2.2. Cascading Style Sheet Features :
◼ It can be used to separate the presentation of information from the information content
and semantic tagging.
◼ Advantages
✓ Allow the information in the document to be presented without change
in a variety of ways.
✓ It’s relatively easy to give all of the elements on a page a consistent
appearance.
✓ Both the document author and the person viewing the document can
specify aspects of the document style as it is displayed by the browser.
2.3. Core Syntax :
7
A CSS style sheet consists of one or more style rules (sometimes called statements).
This form of rule is called a ruleset and consists of two parts: a selector string followed by a
declaration block, which is enclosed in curly braces ({ and }).
That is a CSS rule has two main parts: a selector, and one or more declarations.
The declaration block contains a list (possibly empty) of declarations separated by
semicolons (;) (the final declaration can also be followed by a semicolon, and many style sheet
authors follow this convention).
The selector string indicates the elements to which the rule should apply, and each
declaration within the declaration block specifies a value for one style property of those
elements.
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value. The property is the style attribute
you want to change. Each property has a value.
Figure shows Parts of a single ruleset-type style rule.

No special character is needed to mark the end of a rule (no semicolon as in Java), due
to the use of the braces to distinguish the parts of the rule.
Selector Strings :
The followings are demonstrate the various types of CSS selector
 Single element type:
p { font-size:smaller ;letter-spacing : 1em }
 Multiple element types:
A rule can also apply to multiple element types by using a selector string
consisting of the comma-separated names of the element types.
/* Headers have dark background */
h1,h2,h3,h4,h5,h6 { background-color:purple }
 All element types:
8
* { font-weight:bold }
 Specific elements by id: /* Elements with certain id's have light background */
#p1, #p3 { background-color:aqua }
 Elements belonging to a style class:
/* Elements in certain classes are italic, large font, or both */
Another HTML attribute that is frequently used with style sheets is class. This
attribute is used to associate style properties with an element as follows. First, the style
sheet must contain one or more rulesets having class selectors, which are selectors that
are preceded by a period (.), such as .takeNote in the rule
#p4, .takeNote { font-style:italic }
Where . takeNote - class selector: begins with a period .
 Elements of a certain type and class:
ID and class selectors can also be prefixed by an element type name, which
restricts the selector to elements of the specified type. For example, the style rule
span.special { font-size:x-large }
- this rule applies only to span elements that have a class value of special.
• Referencing a style class in HTML:
< span class =”takeNote special cool”>
 Source anchor elements:
In addition to ID and class selectors, several predefined pseudo-classes are
associated with a (anchor) elements that have an href attribute (source anchors).
/* Hyperlink ('a' element) styles */

a:link { color:black }
a:visited { color:yellow }
a:hover { color:green }
9
a:active { color:red }
Where a: link, a: visited , a:hover , a:active are pseudo classes
 Element types that are descendants:
ul span { font-variant:small-caps }
ul ol li { letter-spacing:1em }
where
li - rule applies to li element that is
ol - part of the content of an ol element
ul - that is part of the content of a ul element
In the preceding style rule, each of the selectors (comma-separated components of the
selector string) was simply the name of an element type. This form of selector is called a type
selector. Several other forms of selector are also defined in CSS. One is the universal selector,
which is denoted by an asterisk (*). The universal selector represents every possible element
type. So, for example, the rule
* { font-weight:bold }
This specifies a value of bold for the font-weight property of every element in the
document.
Another form of selector is the ID selector. Recall that every element in an XHTML
document has an associated id attribute, and that if a value is assigned to the id attribute for an
element then no other element’s id can be assigned the same value. If a selector is preceded by
a number sign (#), then it represents an id value rather than an element type name. For example
,
<p id="p3">
...
</p>
then the following rule will cause this paragraph (and another element with id value p1, if such
an element exists) to be displayed with an aqua background:
#p1, #p3 { background-color:aqua }
Note that id values are case-sensitive, so this rule will not apply to an element that has an id
value of P1.
Example program for selector,
<!DOCTYPE html
10
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<head>
<title>
Selectors.html
</title>
<link rel="stylesheet" type="text/css" href="sel-demo.css" />
</head>
<body>
<h1>Selector Tests</h1>
<p id="P1" class="takeNote">
Paragraph with id="P1" and class="takeNote".
</p>
<p id="p2" class="special">
Second paragraph. <span class="takeNote special cool">This span
belongs to classes takeNote, special, and cool.</span>
<ul>
<li>Span's within this list are in <span>small-cap</span>
style.</li>
<ol>
<li>This item spaces letters.</li>
</ol>
</ul>
</p>
<p id="p3">
Third paragraph (id="p3") contains a
<a href="http://www.example.net">hyperlink</a>.
<ol>
<li>This item contains a span but does not display it in
<span>small caps</span>, nor does it space letters.</li>
</ol>
</p>
11
</body>
</html>
The above programs shows HTML document used to demonstrate various types of CSS
selectors.
Output :
At-Rules :
The other form of rule is called an at-rule. The only at-rule that is widely supported
and used at the time of this writing is the rule beginning with @import. This rule is used to
input one style sheet file into another one.
For example, a style sheet such as
@import url("general-rules.css");
h1, h2 { background-color: aqua }
12
will first read in rules from the file general-rules.css before continuing with the other rule in
this style sheet. The url() function is used to mark its string argument as a URL. Single quotes
can be used for this argument rather than double quotes; in fact, the quotes are not required at
all. The URL can be absolute or relative. If it is a relative URL, like the one.
The @import rule must end with a semicolon, as shown. Also, all @import rules must
appear at the beginning of a style sheet, before any rule set statements.
2. FORMATTING TEXT
Text Properties :
Specifically, we will learn about how to select a font and how to modify text properties
such as color. The text properties are ,
❖ Font-family font- family:'Jenkins v2.0 ";
❖ Font-size font-size : 12pt; (in,cm,px..)
❖ Font-style font-style : italic; (normal)
❖ Font-weight font-weight :bold; (normal)
❖ Text color color: #000000; (black)
Font Families :
A font family is a collection of related fonts, and a font is a mapping from a character
(Unicode Standard code point) to a visual representation of the character (a glyph). Each glyph
is drawn relative to a rectangular character cell (also known as the character’s content area),
which is shown shaded for each character in the figure.
The fonts within a font family differ from one another in attributes such as boldness or
degree of slantedness, but they all share a common design. The font families used in this
example are, in order of use, Jenkins v2.0, Times New Roman R _ , Jokewood, and Helvetica
,etc.
The font family to be used for displaying text within an HTML element is specified
using the font-family style property. For example, the start tag
<p style="font-family:'Jenkins v2.0'">
Instead, a recommended mechanism for specifying a font family in CSS is to use a comma-
separated list of font families as the value of the font-family property or font-family property
can accept a list of families, including generic font families such as
font-family:"Edwardian Script ITC","French Script MT",cursive
13
Table shown CSS Generic Font Families

Length Specifications in CSS :
Font size is one of the key features used to distinguish between individual fonts within
a font family. In CSS, the size of a font is specified using the font-size property. One type of
value that can be assigned to font-size is a CSS length.
In CSS, a length value is represented either by the number 0 or by a number followed
by one of the unit identifiers given in Table.
CSS Length Unit Identifiers

The relationships 1 in. = 2.54 cm = 25.4 mm = 72 pt = 6 pc = 96 px both on screen and when
printing a document.
The first five units in the table are they do not depend on other style property values.
Such units are referred to as absolute units. The other three units are relative units.
Another feature that the font defines is the baseline height. The baseline height is the
distance from the bottom of a character cell to an imaginary line known as the baseline, which
is the line that characters appear to rest on.
14
Fig. Some features and quantities defined by a font.

Yet another quantity defined by each font is the ex height. This quantity should be
thought of as the font designer’s definition of the height (above the baseline) of lowercase
letters such as “x.”
◼ Reference font defines em and ex units
 Normally, reference font is the font of the element being styled
◼ Exception: Using em/ex to specify value for font-size
<div id="d1" style="font-size:12pt">
<div id="d2" style="font-size:2em">
Where 2em is parent element’s font is reference font
Font Properties :
The CSS font-size property, we now know, is used to specify the approximate height
of character cells in the desired font within a font family. This property has an initial (default)
value of medium, which is associated with a physical font size by the browser (these may vary
with font family.
First, of course, a length value can be specified for font-size, using any of the length
units described in the previous section.
A second way that a font-size property may be specified is as a percentage of the
computed font-size of the parent element. Since 1em represents the computed value of the
parent’s font-size, the following specifications are
essentially equivalent:
font-size:0.85em
font-size:85%
15
Third, the font-size specification may be given using what is termed an absolute size
keyword. One of these keywords is medium, the initial value for font-size. The remaining
keywords are xx-small, x-small, small, large, x-large, and xx-large.
Finally, the relative size keywords smaller and larger may be specified.
CSS also provides several other font style properties; three of the most commonly used
are shown in following table,
The table shows Additional Font Style Properties

Line Box :
The p element as being rendered as a rectangular box composed entirely of a stack of
imaginary boxes called line boxes. Each line box contains one line of text. The height of a line
box is precisely the height of a character cell in the p element’s font.
 Text is rendered using line boxes
The fig. Shows A box representing a p element that consists of two line boxes, each
partially filled with character cells.
Character cells representing the text are placed side by side in the topmost line box until
it contains as many words (strings of contiguous non-white-space characters) as possible; a
single space (with width defined by the font) separates each word.
 Height of line box given by line-height
◼ Initial value: normal (i.e., cell height; relationship with em height is font-
specific)
◼ Other values (following are equivalent):
Thus, the following declarations are all equivalent in terms of their effect on the p element
itself:
16
line-height:1.5em
line-height:150%
line-height:1.5
 When line-height is greater than cell height
 Inheritance of line-height:
◼ Specified value if normal or unit-less number
◼ Computed value otherwise
 Font shortcut property:
A CSS shortcut property, which is a property that allows values to be specified
for several nonshorthand properties with a single declaration. As an example of the
use of the font shortcut, the declaration block
{ font: italic bold 12pt "Helvetica",sans-serif }
is equivalent to the the declaration block
{ font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
line-height: normal;
font-family: "Helvetica",sans-serif }
Notice that the font shortcut always affects all six of the properties shown.
Text Formatting and Color :
Several other CSS properties can affect the appearance of text. These are listed in Table.
All of these properties except text-decoration are inherited. And, while not inherited, text-
decoration automatically applies to all text within the element, while skipping nontext, such as
images.
17
The above table shows Primary CSS Text Properties
3. COLOURS AND BACKGROUND

Color :
The color property is used to specify the color for text within an element. There are
many possible values for the color property.
CSS2 color properties can be assigned several types of values. The most flexible type
is a numerical representation of the color. In particular, three numerical values are used to
specify a color, representing intensities of red, green, and blue to be mixed together in order to
simulate the desired color .
TABLE Alternative Formats For Specifying Numeric Color Values

 Font color specified by color property
 Two primary ways of specifying colors:
18
◼ Color name: black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia,
maroon, green, navy, olive, teal, purple,etc.
◼ red/green/blue (RGB) values
Background Colors and Images :

The background-color property specifies the color underlying the content, padding, and
border areas of an element’s box. The background color in the border area will normally be
covered by the border itself, but will be visible if the border color is specified as transparent or
partly visible if the border style is dashed, dotted, or double.
Strictly speaking, the background-color property’s value is not inherited; however, the
initial value of background-color is transparent, and the background color of an element will
be visible through transparent areas of child elements.
A related property that is used in many Web pages is background-image. The
acceptable values for this property are none, the initial value, or a URL specified using the
same url() functional notation used with the @import style rule.
By default, the image found at the specified URL will be tiled over the padding and
content areas of the element to which this property is applied (such as the body element of an
HTML document).
Tiling simply means that if an image is too small to cover the element, either from left
to right or from top to bottom or both, then the image is repeated as needed.
19
4. PADDING ,BORDERS AND MARGINS
Padding:
Padding is used to create space around an element's content, inside of any

defined borders.
Padding clears the area inside the border of the element. It introduces extra space between the
boundary and the content of the element. Just like the margin property, padding has a
shorthand property that sets the padding for all the four sides. It can also be set individually.
Syntax:
padding: value1 [value2 value3 value4] | inherit
Where each padding value is either a length, percentage value, auto, or inherit from the parent
element.A padding of 40px, padding:40px; means an extra space of 40px will be added
around the content of the element on all the sides.
padding properties are used to generate space around an element's content, inside of any
defined borders.With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
Padding-top, padding-right, padding-bottom, padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
20
padding-left: 80px;
}
An element's padding is the space between its content and its border.
The padding property is a shorthand property for:
This property can have from one to four values.
If the padding property has four values:
padding:10px 5px 15px 20px;
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20px
If the padding property has three values:
padding:10px 5px 15px;
top padding is 10px
right and left padding are 5px
bottom padding is 15px
If the padding property has two values:
padding:10px 5px;
top and bottom padding are 10px
right and left padding are 5px
If the padding property has one value:
padding:10px;
all four paddings are 10px
Note: Negative values are not allowed.
Padding and Element Width
21
The CSS width property specifies the width of the element's content area. The content area is
the portion inside the padding, border, and margin of an element (the box model).So, if an
element has a specified width, the padding added to that element will be added to the total
width of the element. This is often an undesirable result.
Example
Here, the <div> element is given a width of 300px. However, the actual width of the <div>
element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
To keep the width at 300px, no matter the amount of padding, you can use the box-
sizing property. This causes the element to maintain its actual width; if you increase the
padding, the available content space will decrease.
Example
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
The padding property in CSS defines the innermost portion of the box model, creating space
around an element’s content, inside of any defined margins and/or borders.
CSS Box Model:

In CSS, each element of an HTML or XML document, if it is rendered visually,
occupies a rectangular area—a box—on the screen or other visual output medium. Every box
consists conceptually of a nested collection of rectangular subareas.
22
Fig. Definition of areas and edges in the CSS box model.

Specifically, there is an innermost rectangle known as the content area that encloses
the actual content of the element (line boxes or boxes for other elements, or both).
Padding separates the content area from the box’s border. There is then a margin
surrounding the border. The content and margin edges are not displayed in a browser, but are
drawn in above Figure for definitional purposes.
Note the similarity between the CSS box model and the concept of a cell in HTML
tables.
The content and margin edges of an element’s box are sometimes referred to as the
inner and outer edges of the box, respectively.
The outer (margin) edges of a box define the box width and box height, while the inner
(content) edges define the content width and content height of the box.
Fig. Definition of various lengths in the CSS box model.
23
The above Figure also gives the CSS property names corresponding to the 12 distances
between adjacent edges in the box model. Notice that the border properties have the suffix -
width. This suffix is used to distinguish border properties related to distances from other border
properties that affect the color and style of borders (and have the suffixes –color and -style,
respectively). Note that the same suffix is used for both horizontal and vertical distances, which
can be confusing, since in the rest of the box model “width” normally refers to a horizontal
distance.
For example , The following HTML document demonstrating basic box model style properties.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<title>
SpanBoxStyle.html
</title>
<link rel="stylesheet" type="text/css" href="span-box-style.css" />
</head>
<body>
<p>
The <span>first span</span> and <span>second span</span>.
</p>
</body>
</html>
/* span-box-style.css */
/* solid is a border style (as opposed to dashed, say). */
span { margin-left: 1cm;
border-left-width: 10px;
border-left-color: silver;
border-left-style: solid;
padding-left: 0.5cm;
border-right-width: 5px;
border-right-color: silver;
border-right-style: solid }
24
Output :
Box Model Shorthand Properties :

CSS2 defines a number of shorthand properties related to the box model.
For example, the declaration
padding: 30px;
is shorthand for four declarations:
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
Table shows Basic CSS Style Properties Associated with the Box Model
25
Table shows Meaning of Values for Certain Shorthand Properties that Take One to Four Values
As another example, the style declaration
margin: 15px 45px 30px
is equivalent to
margin-top: 15px
margin-right: 45px
margin-left: 45px
margin-bottom: 30px
There is no precise definition for most of these border styles, so their visual appearance
may vary somewhat when displayed in different browsers.For example,
/* border-styles.css */
#p1 {
background-color: yellow;
border: 6px maroon;
border-style: solid dashed dotted double
}
#p2 {
border: 16px teal;
border-style: groove ridge inset outset
}
Finally, you probably have noticed that shorthand properties make it possible to declare
multiple values for a single property within a single declaration block. For example, the value
of border-top-style can be specified by a direct declaration of this property as well as by
declarations for the border-top and border shorthand properties.
So, for example, in the declaration block
{ border: 15px solid;
26
border-left: 30px inset red;

color: blue }
the border on the top, right, and bottom will be 15-px-wide solid blue, while the left
border will be a 30-px-wide red inset style. This is because the first declaration sets all four
borders to 15 px wide and solid, with the border color set to its initial value, which for border
colors is the value specified for the element’s color property (blue in this case). The second
declaration effectively overrides these values for the border-left property.
BORDERS AND MARGINS
Border property
The CSS border properties allow you to specify the style and color of an element’s border.
border-width
The border-width property is used to set the width of the border. The width is set in pixels, or
by using one of the three pre-defined values: thin, medium, or thick.
border-color
The border-color property is used to set the color of the border. The color can be set by:
• name – specify a color name, like “red”

• RGB – specify a RGB value, like “rgb(255,0,0)”
• Hex – specify a hex value, like “#ff0000”
border-style
• dotted: Defines a dotted border

• dashed: Defines a dashed border
• solid: Defines a solid border
• double: Defines two borders. The width of the two borders are the same as the border-width
value
• groove: Defines a 3D grooved border. The effect depends on the border-color value
• ridge: Defines a 3D ridged border. The effect depends on the border-color value
• inset: Defines a 3D inset border. The effect depends on the border-color value
• outset: Defines a 3D outset border. The effect depends on the border-color value
Using the shortand property you can define the element border the following way:
1 div.div-2{
2 border:1px solid #ccc;
3 }
27
Margin property
The CSS margin properties define the space around elements. The margin clears an area
around an element (outside the border). The margin does not have a background color, and is
completely transparent.
You can define the element margin values the following way:
• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;
You can also use the shortand property:
• margin:25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
• margin:25px 50px 75px;

o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
• margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
• margin:25px;
o all four margins are 25px
Using the auto value for the margin property you can center the block horizontally.
1 div.div-3{
2 margin: 0 auto;
3 }
5. FLOATING AND POSITIONING

Properties for Positioning :
The type of positioning for an element is defined by specifying two style properties.
The position property takes the value static (the initial value) to indicate normal flow, relative
28
and absolute to represent the respective flow positionings, or fixed, which is a special type of
absolute positioning discussed in the exercises. The float property can be set for elements with
either static or relative specified for position. Possible values for float are none (the initial
value), left, or right.
Any element with a position value other than static is said to be positioned. If the
position value of a positioned element is absolute or fixed, then it is said to be absolutely
positioned; otherwise it is relatively positioned. Four (noninherited) properties apply
specifically to positioned elements: left, right, top, and bottom. Each of these properties takes
a value that is either a length, a percentage, or the keyword auto (the initial value).
Relative Positioning :
Relative positioning is useful when you want to nudge a box a bit from the position
where the browser would normally render it, and you want to do so without disturbing the
placement of any other boxes. That is, all other boxes are positioned as if the nudged box had
never moved.
The following FIGURE demonstrate the HTML document using relative positioning
to nudge text to the left.
Notice that the first letter of each of the words “Red,” “Yellow,” and “Green” has a
background that is partly shaded and partly not.
we use a style rule
.right { position:relative; right:0.25em }
Notice that for relatively positioned boxes, a positive value for the right property moves
the box to the left by the specified amount.
Alternatively, if the style rule had been
.right { position:relative; left:-0.25em }
Float Positioning :
Float positioning is often used when embedding images within a paragraph. For
example, recall that the HTML markup,
<p>
<img
29
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88"
style="float:right" />
See
<a href="http://www.w3.org/TR/html4/index/elements.html">the
W3C HTML 4.01 Element Index</a>
for a complete list of elements.
</p>
Line boxes below the floated box extend to the full width of the containing block,
producing a visual effect of text wrapping around the floated block.
Fig. Wrapping of text around a floated box.

The markup used to generate this figure includes the following:
<style type="text/css">
.bigNum { float:left; font-size:xx-large; font-weight:bold }
</style>
...
<p>
This text is going to wrap
around the
<span class="bigNum">I. </span>
big Roman numeral
embedded within the paragraph, because the numeral is floated.
</p>
We say that float boxes are removed from the normal flow to indicate that making them
float has an impact on how normal flow elements are rendered.
Absolute Positioning :
30
▪ Absolute positioning offers total control over the placement of boxes on the
canvas.
▪ Specify location for corner of box relative to positioned containing block
we will use the style rule
p { position:relative; margin-left:10em }
▪ Specify location for edges of box relative to positioned containing block
The rule is
.marginNote { position:absolute;
top:0; left:-10em; width:8em;
background-color:yellow }
 Absolutely positioned box does not affect positioning of other boxes!
FIGURE shows Absolutely positioned boxes can obscure one another.

Others Positioning-Related Properties :
❖ The z-index property can be used to define a drawing order for positioned boxes
❖ z-index: drawing order for overlaid boxes (largest number drawn last)
For example ,
#text { position:absolute; top:10px; left:10px;
font-family:"Courier",monospace; letter-spacing:0.1ex;
background-color:yellow;
z-index:1 }
#overlay { position:absolute; top:10px; left:10px;
width:1.1ex; height:4.5em;
border:solid red 1px;
z-index:2 }
31
FIG.An overlay of one box on top of another.

❖ display: value none means that element and its descendants are not rendered and
do not affect normal flow
❖ visibility: value hidden (initial value is visible) means that element and its
descendants are not rendered but still do affect normal flow
6. PAGE LAYOUT WITH CSS

A website can be divided into various sections comprising of header, menus, content and
footer based on which there are many different layout design available for developer.
Different layouts can be created by using div tag and use CSS property to style it.
The most common structure of website layout is given below:
Website Layout
A website is often divided into headers, menus, content and a footer:
Header
A header is usually located at the top of the website (or right below a top navigation menu). It
often contains a logo or the website name:
Example
32
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Result
Header
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:
Example
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}
Result
Link Link Link

Content
The layout in this section, often depends on the target users. The most common layout is one
(or combining them) of the following:
• 1-column (often used for mobile browsers)

33
• 2-column (often used for tablets and laptops)

• 3-column layout (only used for desktops)
1-column:
2-column:
3-column:
We will create a 3-column layout, and change it to a 1-column layout on smaller screens:
Example
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to
each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Result
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Column
34
Unequal Columns
The main content is the biggest and the most important part of your site.
It is common with unequal column widths, so that most of the space is reserved for the main
content. The side content (if any) is often used as an alternative navigation or to specify
information relevant to the main content. Change the widths as you like, only remember that
it should add up to 100% in total:
Example
.column {
float: left;
}
/* Left and right column */

.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to
each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Result
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque
vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
35
Footer
The footer is placed at the bottom of your page. It often contains information like copyright
and contact info:
Example
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Result
Footer
7. Transition, Transforms and Animation:

CSS Transitions
• CSS transitions allows you to change property values smoothly, over a given duration.
• Mouse over the element below to see a CSS transition effect:
In this chapter you will learn about the following properties:
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
Browser Support for Transitions
The numbers in the table specify the first browser version that fully supports the
property.
How to Use CSS Transitions?

To create a transition effect, you must specify two things:
• the CSS property you want to add an effect to
• the duration of the effect
Note: If the duration part is not specified, the transition will have no effect, because
the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a duration of
2 seconds:
36
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
The transition effect will start when the specified CSS property (width) changes
value.
Now, let us specify a new value for the width property when a user mouses over the
<div> element:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
</body>
</html>
37
Notice that when the cursor mouses out of the element, it will gradually change back to its
original style.
Change Several Property Values
The following example adds a transition effect for both the width and height property, with a
duration of 2 seconds for the width and 4 seconds for the height:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
38
</head>
<body>
<h1>The transition Property</h1>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
</body>
</html>
OUTPUT:
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
• linear example shows some of the d- specifies a transition effect with the same speed from
start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
The following ifferent speed curves that can be used:
<!DOCTYPE html>
39
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
</style>
</head>
<body>
<h1>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
40
OUTPUT:
Delay the Transition Effect:
 The transition-delay property specifies a delay (in seconds) for the transition effect.
 The following example has a 1 second delay before starting:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-delay: 1s;
div:hover {
width: 300px;
41
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>
Transition + Transformation:
The following example adds a transition effect to the transformation:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
42
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
</style>
</head>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
</html>
More Transition Examples:
The CSS transition properties can be specified one by one, like this:
<!DOCTYPE html>
<html>
<head>
<style>
43
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
div:hover {
width: 300px;
</style>
</head>
</html>
<body>
<h1>The transition Properties Specified One by One</h1>
<div></div>
</body>
</html>
44
or by using the shorthand property transition:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
div:hover {
width: 300px;
</style>
</head>
<body>
<h1>Using The transition Shorthand Property</h1>
<div></div>
45
</body>
</html>
TRANSFORM PROPERTY:
A)CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
CSS 2D Transforms Methods:
With the CSS transform property you can use the following 2D transformation methods:
• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
46
• matrix()
The translate() Method:
• The translate() method moves an element from its current position (according to
the parameters given for the X-axis and the Y-axis).
• The following example moves the <div> element 50 pixels to the right, and 100
pixels down from its current position:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid black;
-ms-transform: translate(50px,100px); /* IE 9 */
transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The translate() Method</h1>

<p>The translate() method moves an element from its current position:</p>
<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its
current position.
</div>
</body>
</html>
47
The rotate() Method:
The rotate() method rotates an element clockwise or counter-clockwise according to a

given degree.
The following example rotates the <div> element clockwise with 20 degrees:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
div#myDiv {
-ms-transform: rotate(20deg); /* IE 9 */
transform: rotate(20deg); /* Standard syntax */
</style>
</head>
<body>
48
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>
</html>
49
The scale() Method:
The scale() method increases or decreases the size of an element (according to the
parameters given for the width and height).
The following example increases the <div> element to be two times of its original width,
and three times of its original height:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
-ms-transform: scale(2,3); /* IE 9 */
transform: scale(2,3); /* Standard syntax */
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>
<div>
This div element is two times of its original width, and three times of its original height.
</div>
50
</body>
</html>
B)CSS 3D Transforms:
CSS also supports 3D transformations.
Mouse over the elements below to see the difference between a 2D and a 3D transformation:
The transform property applies a 2D or 3D transformation to an element.
CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation methods:
• rotateX()
• rotateY()
• rotateZ()
The rotateX() Method
The rotateX() method rotates an element around its X-axis at a given degree:
51
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
#myDiv {
transform: rotateX(150deg);
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
52
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX()
method.</p>
</body>
</html>
The rotateY() Method
The rotateY() method rotates an element around its Y-axis at a given degree:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
53
height: 100px;
#myDiv {
transform: rotateY(150deg);
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
</div>
<div id="myDiv">
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>
54
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
#myDiv {
transform: rotateY(150deg);
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
55
</div>
<div id="myDiv">
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>
The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
56
#myDiv {
transform: rotateZ(90deg);
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
</div>
<div id="myDiv">
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>
This property allows you to rotate, scale, move, skew, etc., elements.
ANIMATION PROPERTY
- allows animation of HTML elements without using JavaScript or Flash!
57
In this chapter you will learn about the following properties:
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation
What are CSS Animations?

• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties you want, as many times as you want.
• To use CSS animation, you must first specify some keyframes for the animation.
• Keyframes hold what styles the element will have at certain times.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>
Note: The animation-duration property defines how long an animation should take to complete. If the animation-
duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).
58
In the example above we have specified when the style will change by using the keywords "from" and "to"
(which represents 0% (start) and 100% (complete)).
It is also possible to use percent. By using percent, you can add as many style changes as you like.
The following example will change the background-color of the <div> element when the animation is 25%
complete, 50% complete, and again when the animation is 100% complete:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
59
The following example will change both the background-color and the position of the
<div> element when the animation is 25% complete, 50% complete, and again when
the animation is 100% complete:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
60
Delay an Animation:
The animation-delay property specifies a delay for the start of an animation.
The following example has a 2 seconds delay before starting the animation:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
animation-delay: 2s;
</style>
</head>
<body>
61
<div></div>
</body>
</html>
Animation Shorthand Property:
The example below uses six of the animation properties:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
62
</style>
</head>
<body>
<div></div>
</body>
</html>
JAVASCRIPT:
JavaScript is used to create interactive websites. It is mainly used for:
63
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
o Displaying clocks etc.
JavaScript Example
<script>
document.write("Hello JavaScript by JavaScript");
</script>
<script>
var a=10;
var b=20;
var c=a+b;//It adds values of a and b variable
document.write(c);//prints sum of 10 and 20
</script>
JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.
It is represented by forward slash with asterisk then asterisk with forward slash. For example:
1. /* your code here */
It can be used before, after and middle of the statement.
<script>
/* It is multi line comment.
It will not be displayed */
document.write("example of javascript multiline comment");
</script>
64
JavaScript Variable:
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as
identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )

sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.
Example of JavaScript variable

Let’s see a simple example of JavaScript variable.
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
JavaScript local variable:

A JavaScript local variable is declared inside block or function. It is accessible within
the function or block only. For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
Or,
<script>
If(10<13){
65
var y=20;//JavaScript local variable

}
</script>
JavaScript global variable:

A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is known as global
variable. For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
JavaScript Operators:
JavaScript operators are symbols that are used to perform operations on operands.
For example:
Var variableame = operand1 expression operand2;
1. var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
66
6. Special Operators
JavaScript If-else:
The JavaScript if-else statement is used to execute the code whether condition is
true or false. There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
It evaluates the content only if expression is true. The signature of JavaScript if

statement is given below.
if(expression){
//content to be evaluated
}
<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
<script>
var grade='B';
var result;
67
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
JavaScript Loops:
The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
for (initialization; condition; increment/decrement)

{
code to be executed
}
<script>
for (i=1; i<=5; i++)
68
{
document.write(i + "<br/>")
}
</script>
While loop
while (condition)
{
code to be executed
}
Let’s see the simple example of while loop in javascript.
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
do{
code to be executed
}while (condition);
Let’s see the simple example of do while loop in javascript.
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
69
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript
function many times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
Code reusability: We can call a function several times so it save coding.
Less coding: It makes our program compact. We don’t need to write many lines
of code each time to perform a common task.
function functionName([arg1, arg2, ...argN]){

//code to be executed
}
1.<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
2. <script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
Function with return value

<script>
function getInfo(){
70
return "hello javatpoint! How r u?";

}
</script>
<script>
document.write(getInfo());
</script>
Dialog Boxes :
• alert(message) - Displays an alert box with a message defined by the string message.
Example:
alert("An error occurred!")
• confirm(message) - When called, it will display the message and two boxes. One box
is "OK" and the other is "Cancel". If OK is selected, a value of true is returned,
otherwise a value of false is returned. An example:
if (confirm("Select OK to continue, Cancel to abort"))
{
document.write("Continuing")
}
else
{
document.write("Operation Canceled")
}
• prompt(message) - Displays a box with the message passed to the function displayed.
The user can then enter text in the prompt field, and choose OK or Cancel. If the user
chooses Cancel, a NULL value is returned. If the user chooses OK, the string value
entered in the field is returned.
An example: // Dynamic Welcome Page
var response=prompt("Enter your name")
if (response != null)
{
document.write(response)
}
71
JavaScript Events
The change in the state of an object is known as an Event. In html, there are
various events which represents that some activity is performed by the user or by
the browser.
This process of reacting over the events is called Event Handling. Thus, js handles
the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.
Some of the HTML events and their event handlers are:
➢ A mouse click
➢ The web page loading
➢ Mousing over a hot spot on the web page, also known as hovering
➢ Selecting an input box in an HTML form
➢ A keystroke
Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
72
MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>

</script>
</body>
</html>
73
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>

</script>
</body>
</html>
JavaScript Form
Login Form
<html>
<head>
<title> Login Form</title>
</head>
<body>
<h3> LOGIN </h3>
<formform ="Login_form" onsubmit="submit_form()">
<h4> USERNAME</h4>
<input type="text" placeholder="Enter your email id"/>
<h4> PASSWORD</h4>
<input type="password" placeholder="Enter your password"/></br></br>
<input type="submit" value="Login"/>
<input type="button" value="SignUp" onClick="create()"/>
</form>
<script type="text/javascript">
function submit_form(){
alert("Login successfully");
}
function create(){
window.location="signup.html";
74
}
</script>
</body>
</html>
SignUp Form
<html>
<head>
<title> SignUp Page</title>
</head>
<body align="center" >
<h1> CREATE YOUR ACCOUNT</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr><td> Name</td>
<td><input type="text" placeholder="Enter your name" id="n1"></td></tr>
<tr><td>Email </td>
<td><input type="text" placeholder="Enter your email id" id="e1"></td></tr>
<tr><td> Set Password</td>
<td><input type="password" placeholder="Set a password" id="p1"></td></tr>
<tr><td>Confirm Password</td>
<td><input type="password" placeholder="Confirm your password" id="p2"></td>
</tr>
<tr><td>
<input type="submit" value="Create" onClick="create_account()"/>
</table>
<script type="text/javascript">
function create_account(){
var n=document.getElementById("n1").value;
var e=document.getElementById("e1").value;
var p=document.getElementById("p1").value;
var cp=document.getElementById("p2").value;
//Code for password validation
var letters = /^[A-Za-z]+$/;
75
var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-

9]{2,4})+$/;
//other validations required code
if(n==''||e==''||p==''||cp==''){
alert("Enter each details correctly");
}
else if(!letters.test(n))
{
alert('Name is incorrect must contain alphabets only');
}
else if (!email_val.test(e))
{
alert('Invalid email format please enter valid email id');
}
else if(p!=cp)
{
alert("Passwords not matching");
}
else if(document.getElementById("p1").value.length > 12)
{
alert("Password maximum length is 12");
}
else if(document.getElementById("p1").value.length < 6)
{
alert("Password minimum length is 6");
}
else{
alert("Your account has been created successfully... Redirecting to JavaTpoint.com");
window.location="https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
76
77

Wdm-Unit-2 Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wdm-Unit-2 Notes

Uploaded by

Copyright:

Available Formats

IT8078- WEB DESIGN AND MANAGEMENT-UNIT-2-IV YEAR IT-PIT

UNIT II CSS AND JAVASCRIPT

How to add CSS:

For Eg. em is child element of p parent element.

Go to the Grocery store</a></p>

ul ul { text-decoration: underline; margin-left: .5cm }

Figure shows Parts of a single ruleset-type style rule.

/* Hyperlink ('a' element) styles */

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Table shown CSS Generic Font Families

CSS Length Unit Identifiers

Fig. Some features and quantities defined by a font.

The table shows Additional Font Style Properties

The above table shows Primary CSS Text Properties

3. COLOURS AND BACKGROUND

TABLE Alternative Formats For Specifying Numeric Color Values

Background Colors and Images :

4. PADDING ,BORDERS AND MARGINS

Padding is used to create space around an element's content, inside of any

padding: value1 [value2 value3 value4] | inherit

Padding - Individual Sides

Padding-top, padding-right, padding-bottom, padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.

% - specifies a padding in % of the width of the containing element

Note: Negative values are not allowed.

Set different padding for all four sides of a <div> element:

The padding property is a shorthand property for:

This property can have from one to four values.

If the padding property has four values:

padding:10px 5px 15px 20px;

top padding is 10px

right padding is 5px

bottom padding is 15px

left padding is 20px

If the padding property has three values:

padding:10px 5px 15px;

top padding is 10px

right and left padding are 5px

bottom padding is 15px

If the padding property has two values:

top and bottom padding are 10px

right and left padding are 5px

If the padding property has one value:

all four paddings are 10px

Note: Negative values are not allowed.

Padding and Element Width

CSS Box Model:

Fig. Definition of areas and edges in the CSS box model.

Fig. Definition of various lengths in the CSS box model.

Box Model Shorthand Properties :

border-left: 30px inset red;

• name – specify a color name, like “red”

• dotted: Defines a dotted border

• margin:25px 50px 75px 100px;

• margin:25px 50px 75px;

5. FLOATING AND POSITIONING

Fig. Wrapping of text around a floated box.

FIGURE shows Absolutely positioned boxes can obscure one another.

FIG.An overlay of one box on top of another.

6. PAGE LAYOUT WITH CSS

/* Links - change color on hover */

Link Link Link