tyle Sheets

9.2 DYNAMIC HTML

Dyamic HTML is not anew form ofHTML but rather anew way of controling the
ES HIMLcodes and commands. It is acollection of technologies which is used togener to
ynamic and interactive web pages. The technologjes include HTML, Style
sheets and seripting, DHTML combines thestandard HTML with the formating coto
O Syie shects and the interactive capabilities of scripting language to increase ine
are
yansmnof Web pages without using any extemal program. When Web pages once the
server
vIealed using DHTML, users do not have to reload the page from the
page is loaded thus eliminating the repeat access to server.
emost common scripting language used used in DHTML is JavaScript, though there
scripting languages which can be such as VBScript. Scripting provides
dle otner perform various tasks such as dynamically
ne dynamic nature ofDHTML. Seripts can
to actions of keyboard and mouse,
Cnanging the position ofHTML elements, responding depends on Document Object
Validating form input etc. The scripting part ofDHTML
manipulates objects in aWeb page. Thus,
Model (DOM). DOM identifies, creates and scripts.
It bridges the gap between the content of the Web page and
9.2.1 Style Sheets
they separate the structure of HTML
Style sheets are the critical components ofa page; improves
document from its physical presentation. Thus, it the accessibility of content
Formatting a document using style
and provides better control over page presentation. than formatting it
sheets makes the document less cluttered, making it more manageable
at each place,
using formatting tags. Instead ofmanually formatting paragraphs of textcan applied
can simply change the style definition at one place and the definition be
toweall the occurrences in the document. Also style sheet provides the flexibility to apply
the same style to muliple documents as welfas individual styles to individual documents.
Thus, it reduces the development and maintenance time ofan HTML document. There
exists various types of style sheets but the Cascading Style Sheets (CSS),the official
World Wide Consortium (w3C) style sheet technologyis the standard one and is mostly
used.)
Note: Syle sheets arr available onty in Internet Explorer 3 (or above) and Netscape
Navigator 4 (or above).
9.2.2 Defining Styles
A style sheet (also known as style specification) is simply a collection of rules called
style rules. Astyle rule consists of two parts; the first part is a selector.
HTML tag, the second part is a declaration which defines the property which can be
value of the property. and the
The syntax of style rule is:
selector (property:value)
For example, consider the
H1 (font:20pt) following style rule.
Note that multiple style rules can be
specifid in a style.
For example, the statement to set the font
color is ofheading
HI to Arial, bold, 20pt size and
red
structiong!
at
 DHTML an
H1(font:20pt "Arial " bold; color :red; background:blue)
Note: All properties should be enclosed in braces () and must be separated by
a semicolon (:).
NO
9.3 ADDING STYLE TO AN HTML DOCUMENT
The style rule can be added to an HTML document by using one of the following ways.
Extemal style sheet
"Embedded style sheet (Internal style sheet)
" In-Line style
" Multiple styles (Using Classes and IDs)
9.3.1 External Style Sheet
An external style sheet is aplain text file containing style specifications. Unlike HIML
document file, the style sheet file includes only the style specifications and it is saved
with .css extension. This separates the styles from thestandard HTML document.
The advantage of using external style sheet is that the same style rules can be applied to
multiple documents in the Website. In the future, if we want to change the style ofall the
documents, we can simply edit the single style sheet rather than changing the style in
each document.
There are two ways ofassociating external style sheet with the HTML document,
namely, linking and importing.
Linking a Style to an HTML Document
An external style shcet can be associated with the HTML document by using <LINK>
lag within the HEAD element.
The syntax of <LINK> tag is
<LINK REL= "StyleSheet" HREF="URL" TYPE- "text/css">

wher,
REL specifies that the referenced file is a style sheet
HREF specifies the URL of the style sheet to be used
TYPE specifies the type of style sheet
For example,consider astyle sheet given below which is saved as style.css
is saved.
in the same dircctory where HTML document
t P(font:20pt "Times Roman" bold; background:yellow; color:red;
border : double thick) note
PODY (£ont:"sans-serif" italic 10pt; margin-right:2px)
H1{ font: "Arial" 28pt bold )
The HTML Code to reference the style sheet style. css is as follows:
<HTML>
<HEAD>
<TITLE> Linking a stylesheet </TITLE>
CI.TNK REL=*StyleSheet" HREF="style.Css" TY PE="text/css">

Self-Instructio
Material
nd Shle Sheets
</HEAD>
<BODY> <
..content of body whose appearance is affected by style sheet
OTES </BODY> lp?
</HTML>

Note that we can link multiple style sheets in the HTML document by inchuding nutinla
SLINK> tags.
Importing
Importing is another way ofassociating an exteral style sheet with the HTML document
This method is not used very often as most of the browsers do not support this form of
accessing extermal style sheet.
The syntax for importing style sheet to the HTML document is
@import "URL Of the stylesheet":
Unlike linking, the import statement must be included within the STYLEelement.
For example, once again consider the style sheet style. css. The HTML. Code lo
import this style sheet is as follows:
<HTML>
<HEAD>
<TITLE>Importing a style sheet</TITLE>
<STYLE TYPE="text/çss">

Aeimport "style.cssi

</STYLE>
</HEAD>
<BODY>
..Content of the body whose appearance is affected by style
sheet
</BODY>

<HTML>

Note that the comment tag <!- ...> in the STYLE element hides the content of styie
sheet from the browsers which do not support the method of importing.
9.32 Embedded Style Sheet (Internal Style Sheet)
Embedded style sheets are the HTML pages in which the style rules are directy included
in the HTML document; rather than making a separate style sheet, The style rules are
enclosed within the opening and the closing <STYLE> tags and placed in the <HEAD>
element Like external style sheet, it also separates the style from the content of the
document. It is advantageous over external style sheet in certain cases. Suppose we
have adocument where we nced to apply a particular style to the first page and some
other style to remaining pages of the document. Then, we can apply style to the first
page by using embedded style sheet and to the remaining pages using external stye
sheet. Because making external style sheet for a single page is not very useful.

Selflnstructional
Material
 Shyle She
derthe following HTML document with the style nules directly embedded within it. DHTMLand

IML>
EAD>
TITLE> Pnbedded Style Sheet </TITLE> NOTES
anVLE TYPE="text/css">

(FONT:20pt "Times Roman" bold; BACKGROUND::yellow; COLOR:red;

ARDER:double thick)
v(FONT:" sans-serif italic 10pt: MARGIN-RIGHT: 2px}
it (FONT:"Ari¡l" 28pt bold)

c/STYLE>
</HEAD>
<BODY>
content of the body affected by style sheet
</BODY>
/HIML>
of
Here, the comment tag <!- -> in the STYLE element hides the content
se sheet from the browsers which do not support style sheets. 9
13 In-Line Styles
Csing in-line style is the simplest way to add style information. It is used to apply style to
it
particular HTML element by using sTYLE attribute, though this method is simple, Also,
snot suitable for applying style to the entire document as it will be time consuming.
as the style is
lacks the benefit of separating styles from the content of the document
-pecified in the tag itself.
For example, the styie rule to set the font to
"Arial", 20 points size, and in red
olor of<P> element can be specified as follows:
"Arial": color:red">
<P STYLE="font-size:20pt; font-family: affected by
-content of the paragraph whose appearance is
style rules
</P>
need to be hidden from the browsers
Note: The inline style information does not they do not
that do not support style sheet as browsers ignore the attributes that
understand.
DÍV Element
block or division of an HTML document
bIv element is used to apply style to a certain section ofa document, place that section
by using STYLE attribute. To apply style to a
within the opening tag <DIV> and thethe closing tag </DIV>, We can define the stvle
DIV clement.
information in the STYLE attribute of
paragraphs using DIV element is as
For example, the HTML code to apply style to two
follows:
V<HIML>

<HEAD>
Self-Instructiona
Material
Shle Sheets <TITLE> Using DIV element </TITLE>
</HEAD>
<BODY>

T'ES
<DIV STYLE="color:yellow: font-size:18pt; background: blue,
<P>

.content of first paragraph

</P>

<P>
...Content of second paragraph
</P>
</DIV>
</BODY>
</HTML>

SPAN Element

SPAN element is used to apply style to only afew words or letters. It is generally used
to set style within aparagraph. To apply style to particular words in the paragraph, place
the words within the opening tag <SPAN> and the closing tag </SPAN>. We ca
define the style information in the STYLE attribute oftheSPAN clement.
For example, the HTML code to apply style to particular words of a paragraph is as
follows:.
<HIML>
<HEAD>

<TITLE> Using SPAN element </TITLE>

</HEAD>
<BODY>
<P> This is <SPAN STYLE= " color:red; font-size :2pt;
background :blue"> an example of </SPAN> span element </P>
</BODY>

</HIML>

9.3,4 Multiple Styles

As stated, in-line style does not separate the styles from the structure of the HTML
document. Thus, ifwe want to apply style to one or more elements without using in-line
style, we can use ID and CLASSattributes,
ID Attribute
In style sheets, the ID attribute is used as a selector for a style rule which affects a
particular element with arule without an in-line style being created. Since ID attribute is
supported by most of the elements, to associate a style rule to an ID value, we can
simpl add arule with the name oflD preceded by apound symbol as aselector for the
rulel The style rule with ID value is included in the <sTYLE> tag of HEAD element.
Note that every ID value must be unique.
For example, consider the following HTML code which appies style to Peement whese
ID value is "Paragraph_One", with no style applied to other paragraphs.
structional
iai
 <HIML> Sheets
DHTML andStyle
<HEAD>

eTITLE> Example Of ID
.enYLE TYPE="text/css"> Attribute </TITLE>
NOTES

nragraph_ One (tont-size:18pt; backgr ound: blue)

</STYLE>
HEAD>
"<BODY>
D> This
paragraph will not be
affected. </P>
<P
P>
ID=Paragraph_One*> This paragraph will be affected. </
P> This paragraph will also not be
</BODY> affected. </P>
</HTML>
Check Your Progress
Class Attribute I. CSS stands
for

If we want to apply the same style to some elements but not to 2. The two ways of
others, ID attribute
cannot be used since no two elements can have the same ID value For this associating extermal
purpose,
CLASS attribute is used. This attribute defines the name of the class to which aparticular style sheet with
the HTML
element belongs. he values ofCLASS attribute need not be unique. Thus, many elements document are
can be members ofthe same class. Like ID attribute, style rule for CLASS is included and

in the <STYLE> tag of HEAD lement It includes the narme of class preceded by a 3. The file format of a
period (. ). as a selector for the rule. style sheet is
Forexample, consider the following HTML code which has two elements whose CLASS
attribute is set to "CommonClass". 4. The rule for
<HIML> importing a style
sheet is included
<HEAD>
within the BODY
<TITLE> Example of CLASS Attribute </TITLE> element of the
HTML document.
<STYLE TYPE="text/css">
(True or False)
5. DIV element i
.CommonClass (font-size:18pt; background: blue) used to apply a
style to a block of
HTML document.
</STYLE> (True/False)
</HEAD> Which of the

<BODY>
following symbols
is used to define
CH1 CLASS= "CommonClass">This heading will be affected</H1 style rule for
<P>, This paragraph will not be affected, </P> CLASS?
<P CLASS= "CommonClass"> This paragraph will be affected. </ (a) Period ()
b)
P
(c)
affected, </P
<P> This paragraph will also not be (d) None of the
above
</BODY>
</HTML>

Self-Instrctional
Material 181
und Style Sheets
9.4 ELEMENTS OF STYLES

LeSs defines various properties to set the font of the text, control the color and
background
OTES ofthe HTML element, ctc. Some of the standard properties are discussed in this section
9.4.1 Font Properties
(Css includes a large number of font related properties which can be used to set the
family, size, styl of the font being used in the Web page. These properties can also be
used in combination with other properties like color, background, ctc., to enhance the
appearance of the Web page.
font-family
(The font-family property is used to set the font family of the text, It can be sét to
individual font, like Times New Roman, or to a font family, like Cursive)The names of
font family having white space should be enclosed in double quotes, forexample, "Sans
Serif" and the font values have to be capitalized for proper matching.
The style rule to set the font of paragraph to Times New Roman is as follows;
P(font-family: "Times New Roman")
£ont-size
The font-size property is used to set the absolute or relative size of the font Tahie
9.1 lists different values ofabsolute size along with thcir meanings.
Table 9.1 Values of font-size Property

|Value Description
XX-small Double extremely small
X- sMal
Extremely small
small Small
medium Medium
large Large
X-large Extra large
XX-large Double extra large
The absolute size ofthe font can also be defined as an integer followed by"pt",
"cm" or"in" for example, 34pt, 28cm, 75in.
SThe relative size values include larger and smaller. The relative size of
the font can also be defined in relation to the current font size. For example, font
size=+2 assigns a font size with 2ps larger than the current font size.
The style rule to set the size of font of paragraph to double extra large is as
follows:
P(font-size:0x-largel),
font-style
The font-style property is used to set the fot to normal, italic or oblique
font style.
The style rule to set font style of heading H2 to oblique is as foillows:
H2(font-style:oblique)
Self-Instructional
Material
font -weight
The font-weight property iS DIITML an
1of uscd to sct the
font-weight property
Oy integer ranging from 100 include
to 900.
wcight of the font
normal. bold. being used. The
1ight, medium. Oiher values such as bolder, lighter,01
hrowsers. deni-bold, extra-bold areextra-light,
and
also supported by some
demi - NOT
Thestyle ule to set the
P{Éont -weight: bold)
weight font of
of n
paragraph to bold is as follows:
tont-variant

dofont-variant
the HTML property is used to set the variation of
document. standard
The font family
shich makCs the Tont lo
appear in
values for this
property include speciticd n
small-caps,
nt affect the
appearance of font. small uppcrcase letters and noxnal, which dÛes
The style rule to set the
font of a
folbws: paragraphto0 uppercase letters in small size is as
Pfont-variant :small-caps)
font
The font property is used to
set all the font
the properties properties in one style rule. In additionto
specify the spacediscussed,there
is another attribute l
to be left between the two lines of ine-height which is used to
text) The font
The line-height attributes
by spaces CXcept for are separated
font-size separated line-height.
by attribute is used with
aslash(/).[
The syntax for using font
property is:
font:font-style font-weight font-size/line-height font-fami ly
The style rule to set the font ofheading HI to Times New
height of 22 pts, italic font style and lighter weight Roman, 12pt size with line
is as follows:
H1{font: italic lighter 12pt/22pt "Times New
Roman")
Example 9.1: An HTML code to demonstrate the use of font properties
<HTML>
<HEAD>
<TITLE> Example of Font Properties</TITLE>
<STYLE TYPE=" text/css">

BODY(font: "Times Roman" 18pt)

.arial (font-family:"Arial")
.fantasy (font-family:"fantasy")
.cursive(font-family:cursive)
AXX-large( font-size:xx-large)
yX-large (font-size:x-large)
.medium (font-size:medium)
.X-smal1{font-size:x-small)
.XX-Small{font-size:xX- Snall}
.oblique(font-style: oblique)
SeleJusruc tomu
AMalerial
Stvle Sheets .italic( font-style:italic)
L.weight (font-weight: bold)

TES </STYLE>
</HEAD>
<BODY>
Iam <SPAN CLASS=Weight>body</SPAN> text. I am body text, I
am body text. I am body text. I am body text. I am body text.

<P CLASs="fantasy italic"> This paragraph contains fantasy

font in italic style. This paragraph contains fantasy font
in italic style. This paragraph contains fantasy font in
italic style.
</P>

I am <SPAN CLASS= "XX-large>xx-large text</SPAN> <br>

I am <SPAN CLASS= "x-large">x-large text</SPAN><br>
I am <SPAN CLASS= "medium">medium text</SPAN> <br>
I am <SPAN CLASS= "X-small">x-smal1 text</SPAN><br>
I am <SPAN CLASS= "XX- Smal1">xx-small text</SPAN><br>
I am <SPAN CLASS= "oblique">oblique text</SPAN><br>
I am <SPAN CLASS= "italic">italic text</SPAN>cbr>
This text is in <SPAN CLASS="arial">Arial </SPAN><br>
This text is in <SPAN CLASS=" fantasy"> fantasy </SPAN> <br>
This text is in <SPAN CLASS="cursive">cursive </SPAN> <br>

</BODY>
</HTML>

The output of the HTML code is as follows:

(Lample of font Propertics Microsolt Internet Explorer

In body tert I am body test I am body text I an body text I an boty text I an body tet
THS PARAGRAM CONTANS VANTASY PNTINITALNESTNL TUS PARAGRAPH CONTANS VASTASY
PONTIN ITAKSTLTIS PARASRAN CONTAIMS IANTASY PONTIN ITALIC STL

XX-large text
ImN-large text
Ian ieduus text
am ssnal tet

Ian obhque taxt

I an itahe lext
Thar tezt s n Aial
Thus text n TANTASY
Thus tezd t Cursive

Hy Compute

nstruclionui
 Text Properties
DHTMI
ptprosperties are used to enhance the
thelayout of the
gnd
text
within blocks likeappearance ofthe text by specifying thespacing
st-decoration paragraphs.
hetext- -decoration property is used to apply various eflects to the text. The
qundard property valuessinclude blink,
gnd none.
Thestyleruleeto give blinking effect to
line-through, ,overline, underl ine

the text of paragraphis as follows:

etext-decoration:blink)
text-transform
The
isolayed intext-transform property used to
is
uppercase letters, lowercase letters, or sospecify whether the text w
on/ Table 9.2 lists the possibie
alues of text -transform property.
Table 9.2 Values of
text-trans form propery
VValue
Deseription
capitalize Itcapitalizes first letter of every word
uppercase It changes all the letters of text to
uppercase
lowercase
none
It changes all the letters of text to lowercase
Do nothing
The style rule to set the text ofheading Hl to uppercase is as
follows:
H1{text-transform: uppercase)
word-spacing
The word-spacing property is used to control the spacing between consecutive
words Bydefault, the value is nornal which uses the default value of browser's word
spacing. Different units ofmeasurements which can be used to specify the space between
words are inches(in).çentimeters(cm). millimeters (mm), point (pt), picas (pc), em
(em) and pixels (px).
The style rule to set the spacing of 20points between words of aparagraph is as follows:
V P(Word-spacing:20pt)

letter-spacing
The letter-spaçing property is used to control the space between consecutive
letters/Here also, the default value is normal. The different units ofmeasurements that
can be used with word-spacing can also be used with letter-spacing.
The style rule to set the spacing of 1pixel between letters ofheading H2 is as follows:
V42(letter-spacing:1px}
Vvertical-align
The vertical-align property isused to set the vertical alignment oftext or images/
with respect to the current baseline(The values for this property are baseline, super.
sub, top, text-top, midl e, bottom, text -bott om and percentage vaues.
By default, the value is basel ine.)
Self-lnstrue
Material
DHTML and Stvle Sheets
The style rule to vertically align the text to bottom is as follows:
P(vertical-align: text-bottom)
text-align
NOTES
The text-al ign property is used to set the horizontal alignment ofthetext. The
values for this property are left, right, center and justify. The default vahue
is left.
Th¹ style rule to align the text of body to right is as follows:
BODY(text-align:right)
text-indent
(The text-indent property is used to set the indentation ofthe first line of textwithin
a block of text/The value for this property is specified as either length value, such as
12pt, 23px, or as percentage of the width of the block, such as 20%. By default, the
value is 0(no indentation).
The style rule to set the indentation of 30 pixels of the first line of the paragraph is as
follows:
Pet-indent :30Opx}
Example 9.2: An HTML code to demonstrate the çse of text properties
<HIM>
<HEAD>

<TITLE>Example of Text Properties</TITLE>

<STYLE TYPE= "text/css">

.one{ font:10pt Arial italic)

.two {font: 10pt cursive oblique)
.overline (text-decoration:overline)
. underline (text-decoration:underline)
.line-through {text-decoration:line-through)
.capitalize (text-transform:capitalize)
.uppercase{text-transfom:uppercase)
.lowercase(text-transfom:lowercase)
.spacing(word-spacing:3px;letter-spacing: 1px)
.alignL {text-align:right )
.alignC(text-align:center)
#sub(vertical-align: sub)
#super (vertical-align:super)
. indentP{text- indent: 10px)
.indentN(text-indent: -10px)

</STYLE>
</HEAD>
<BODY>

<H4>Text-decoration property</H4><BR
Self-Instructional
186 Materiul
 nhis text is <SPAN CLASS=
DHTML and Shle Sheets
his sentence has <SPAN CLASS=
as wel1 as words with <SPAN
"overline">overlined</SPAN>CBR>
"underline">underlined< /SPAN>
through</SPAN> it
CLASS= "line-through">line
eH4>Text-transform property and alignment of text</H4> NOTES
eP CLASS="one
eP
capitalize">This sentence is capitalized </P>
CLASS= "twO uppercase alignL"> This
ight and all its letters are in paragraph is align in
uppercase.
</P>
<P CLASS= "twO lowercase alignC"> This
center and all its letters are in paragraph is align 1n
is align in lowercase. This paragraph
center and al11 its letters are in
</P>
lowercase.
<SPAN CLASS= "spacing">This sentence contains
letters as well as words,</SPAN> spacing between
<P CLASS= "one indentP">This paragraph
of text. This paragraph shows the
shows the indentation
indentation of text.
<P CLASS= "one indentN">This paragraph shows the
nagative
indentation of text. This paragraph shows the nagative
indentation of text. Check Your Progress
</P> 7. Which of these
<P>Vertical alignment makes the text as <SPAN properties is used
to set the family of
ID=" sub">Subscript</SPAN> or <SPAN ID="super">Superscript</ the font?
SPAN>
</P> (a) font-family
(b) font-size
</BODY>
(c) font.size
</HTML>
(d)font. family
8. The font size of -3
The output of the HTML code is as follows:
assigns a font size
xample ot lext Properties Microsoft fnternet izporer with 3 points less
Ee Edt ew Fgvortes Tods Heb than the current
font size.
(True or False?)
Text-decoratiou property 9. The
property is used to
combine all font
Thes tet is overaned
Thus sentence has underined as well as words wth ne-hrogh t properties.
10. Which property is
Text-transfotn property and aignunent of text
used to apply
various effect to
Thit Sentence is Capit alized
the text?
THIS PARACRAPH IS ALIGN IN RIGHT AND AL ITS LETTERS ARE IN UPPERCASE
11. Which property is
hie nararanh is sien in center and alt te lettere are n lowercese. his pragaph s hgn un certer and at ite lettets se sn logeresse
used to make a
well as words word as subscript?
This sentence contatns spacing between letters as
(a) text
the indentation of text
This paragraph shows the indentation of text This paragraph shows decoration
the nagatve indent ation af text
This paragraoh shows the nagatve inderntation of text. This paragraph shows (b) text
transform
Verteal aluenmenk makes the tet as subscriot
.Superscnpt (c) vertical
align
(d) text-align
My Conouter

Self-Instructional
Material 187
Land Style Sheets
9.4.3 Color and Background Properties
CSS provides a large number of properties using which we can
add the colors and
background to a docun.ent. We can highlight certain parts of a document
NOTES background colors or images. The three forms in which the value of colorcanwith various
be specified
are given below:
" Color names: Colors are defined by a set of 16
predefined color names which
include Blue, Aqua, Red, Yellow, White, Lime, Teal, Silver,
Fuchsia, Navy, Maroon, 0live, Purple, Gray, and Black. Green,
" Hexadecimal values: Colors are defined by a six digit hexadecimal number
preceded by # symbol in #RRGGBB format. Herc, RR is the hexadecimal value
for red, GG is the hexadecimal value for
green and BB is the hexadecimal value
for blue.
RGB values: Colors are defincd by using the format rgb (R,G,B)
values ofR, Gand B arc integer valucs ranging from 0 to 25S. Here, R,G where
and B
represent the value for red. green and blue color, respectively.
color
The color property is used to set the color ofthe text.
To set the color of text enclosed in the
BODY element to red, one of the style rules can
be used.
BODY (Color :re)
BODY (Color:rgb (255,0,0) )

background-color
The
background-color property is used to set the background color of an HTML
clement. By default, the value is none in which no color is used as background; as a
result, the underlying content also becomes visible. This property is generally used in
conjunction with color property.
The style rule to set the background color ofbody to
BODY (background-color:yellow) yellow is as follows:

background- image
The background-image property is
clement.
used to provide an image as background for an
The style rule to set background image
ofbody is as
BODY (background- image:url ( Image path)follows:
)
where,
Image path is the URL of the image which is to be used as
background image
background-repeat
The background-repéat property is used to
is tiled (repeated). It also specifics how the imagespecify whether the background image
is repeated in the space used by the
elements. Table 9.3 lists the values of
background-repeat property.
Self-Instructional
Material
 Table 9.3 Values of
background-repeat Property DHTML and
Value
repeat It causes the image toDeseription
tile in both
vertical direction. It is the default horizontal
value
and
repeat-x It causes the image to tile in NOT
horizontal
repeat-y It causes the image to tile in vertical direction only
dirèction only
no-repeat lt prevents the image to tile
The style rule to set the tiling of background image of body only in
folows:
vertical direction is as
BODY(background-image: url(Image path):
background-repeat: repeat-y)
backgrOund-attachment
The background-attachment property is used to spccify whether the
image will scroll with the scrolling of content of the element with which it isbackground
associated
orit should remain fixed when the content of the element scrolls. The two
possible
values for this property include scroll and fixed. By default, the value is scroll.
The style rule to restrict the scrolling of the background image of body with text is as
folows:
BODY (background- image:url (Image path):
background-attachment: fixed)
ybackground-position
The background-position property is used to set the position ofthe backgrourd
image with respect to the space occupied by the element. There are three ways to
specify position of the background image which are as follows:
" Absolute distance: The top-left corner of the image can be set at an absolute
distance.
Percentage: The horizontal and vertical dimensions are specified as percentage.
" Keywords: The horizontal and vertical dimensions are specified using keywords.
The keywords used for specifying horizontal dimension are left, right and
center.The keywords used for specifying vertical dimension are top, center
and bottom. By default, the value is center. These keywords can also be
used in pairs to set the position of the image which are shown in Table 9,4:
Table 9.4 Keyword Pairs to Position a Background mage

Keyword Pair Horizontal PositionVertical Position

top left 0%
top center 50% 0%
top right 100% 0%
center left 0% 50%
center center 50% 50%
center right 100% 50%
bottom left 0% 100%
bottom center 50% 100%
bottom right 100% 100%

Self-Instructiona
Material
 is as fellows:
DHTML and Srvle Sheets The style rule to position an image at (10,30) ceerdinate efbedy
BODY (background-image:url (Image path) ;
background-position:10px 30px)
as follows:
NOTES The style rule to position an image in the right at the top is
BODY (background-image:url (Image path) ;
background-position:top right)

background
background properties in
The background property is used to specify one or more its default value is used.
specified, then
one style rule in any order. Ifany property is not
The style rule to set background color of'body to yellow and to position an image
with horizontal tiling at center is as follows: center)
BODY (background:yell ow url (Tmage path) repeat-x
Example 9.3: An HTML code to demonstrate the use ofcolor and background propertics
<HTML>
<HEAD>
<TITLE>Example of color and background properties</TITLE>
<STYLE TYPE= "Text/css">

P(background:url (BANNER. gif) cyarn repeat-x center; color: red)

</STYLE>
</HEAD>
<BODY STYLE="backaround-image: BANNER.gif">
<P>
This is a paragraph which contains text. It has a background
over the
image which tiles along X-axis, The text which lies
image is difficut to réad. The area not covered by the image
Check Your Progress is fi1led with the background color. This is extra text.
12 This is extra text. This is extra text. This is extra text.
text.
property is used to
This is extra text. This is extra text. This is extra
set the colour of This is extra text. This is extra text. This is extra text.
text. This is extra text. This is extra text. This is extra text.
13. Name the property extra text.
which is used to This is extra text. This is extra text. This is
This is extra text. This is extra text. This is extra text
set t'e background text
colour of an This is extra text. This is extra text. This is extra
text.
HTML element. This is extra text. This is extra text. This is extra
This is extra text. This is extra text. This is extra text.
14, The values for
This is extra text. This is extra text, This is extra text.
background This is extra text. This is extra text. This is extra text
attachment include
extra text.
and
This is extra text. This is extra text. This is
</P>
15
property is used as </BODY>
a shorthand </HTML>
property to
combine all other
background
properties.

Self-Instructional
190 Material
che output of the HTML code is as follows:
DHTML.
Danpe of cole and bkground pogeties Wli Intesnet 1aplaret
tie L e Pvot ooh re

e ant c o v AuSled

indowsiWindowSWindows indows.Windows

yCup¯e

9.4.4 Box Properties

Some of the elements like paragraph element occupy space in the form of
rectangular
boxes on the screen. We can use various box properties to adjust margins around an
element box or control borders, etc.

Margin Properties
The margin properties are used to specify the margins around an element box. Margins
are the space between edges of an element box and the edges of its neighbouring
elements. The values for these properties can be specified either as alength such as 2
m, percentage such as 10% or as auto. The value auto automatically sets the
appropriate margin.
margin-top
The margin-top property is used to set the top margin ofthe element.
The style rule to set the top margin of aparagraph to 10 pixels is as follows:
P(margin-top:10px}

margin-bottom
The margin-bottom property is used to set the bottom margin of the element.
The style rule to set the bottom margin of aparagraph to 15 pixels is as follows:
P (margin-bottom: 15px }

nargin-left
The margin-left property is used to set the left margin ofthe element.

The style rule to set the left margin of a paragraph to 20 points is as follows:
P(margin-left:20pt:)

Self-Instructto
Material
d Style Sheets
mArgin-right
The margin-right property is used to set the
right margin ofthe element.
The style rule to set the right margin of a
OTES
paragraph to 10 cm is as follows:
P(margin-right:10cm)
margin
The margin property is used to set all the margin
properties simultaneously.
The style rule to set the top, bottom, left and right
margin ofa
pixels, 10 pixels and 20 pixels, respectively, is as follows: paragraph to 15 pixcls, 5
P(margin:15px 5px 10px 20px)
Note that ifa single value is specified in the rule, then this single value is
to all the margins. For example, the style rule to set the top, applied
ofa paragraph to 12cm is as follows:
bottom. left and right margin
P(margin: 12 cm)
Ifthere are only two or three values specified for the margins, then the values for
the missing margins are deternined from the values of the opposite margins. For
example,
the value of missing right margin can be determined from the value of the specified left
margin.
The style rule to set the top and bottom margin of aparagraph to 20 pixels and left
and right margin to 2cm is as follows:
P(margin: 20px 2cm)
Example 9.4: An HTML code to demonstrate the use of margin properties
<HIML>
<HEAD>
<TITLE>Example of Margin properties</TITLE>
<STYLE>

#paral (background: cyan; margin:50px)

.para2 (background:yell ow; margin-top:30px; margin
right:50px; margin-bottom: 2cm; margin-left: -10px)
#para(font-family: "Times Roman"; color: red)

</STYLE>
</HEAD>

<BODY>

<P ID="paral ">This is a paragraph having a margin of 1 cm

for all sides. This is extra text. This is extra text. This
is extra text. This is extra text. This is extra text. This
is extra text. This is extra text. This is extra text. This
1s extra text. This is extra text. This is extra text.This
is extra text.
</P>

<P CLASS="para2" ID="para"> <SPAN STYLE="font- size:30pt"sT</

SPAN>his is a paragraph which has negative margin on left
giving a hanging effect to the text, This is extra text.
Self-Instructional
Material
 rhis is extra ShleSheets
text. This is DHTML and
This is extra text. This is
extra text. ThìS extra text
extra text. This is extra is
is is extra text. text.
This is extra text. This is
This is extra text. extra text*
</P> NOTES
</BODY>
e/HIM>

The output of the HTML code is as follows:

34mple of Margin properties Microsoft Internet Exnlorer
Edt Yew Fgvortes Tocs Helo

Searct Favortes

cm toaade Th isestra te Thast is etra tesd Ts s e tet

etra teat

Ras s aParagrah wach has ICgatave N leit a Ls etet bo ae le.. Ta: 1 Tlus ea
et Tass etra tet as eztra tat Thas p extra. tezt Tet s tra ted Thes t totra teat Ts atra ted ai u
etra texd Tres x era tet Thas t etra tet

Comotey

) Done

Border Properties border surrounding the

change the appcarance ofthe
The border properties are used to and style of borders using various
the width, color
edges ofan element. We can change
border properties.
border-style
element
property is used to set the style of the borders of an vahe is
The border-style property. By default, the
of border -style
Table 9.5 lists the various valuesborder is not displayed around the element
the
none which specifies that border-style Property
Table 9.5 Values of
Description
Value normal solid line
solid displays the border as dashed line
dashed displays the border as dotted
dotted displays the border as beveled border, as a result objcct looks to be raised
as
displays the border the naoe
outset border makes an objcct to appear as set into
inset the as engraved
groove displays theborder as extruded
ridge displays the border double-line
double displaysthe borderasdisplayed
none
no border is Self-instructional
Materigl
193
DHTML and Style Sheets
The style rule to set dotted border for all sides of a paragraph is
as follows:
P(border-style:dotted)
Different styles can be applied to different sides of the border by
NOTES separate value for cach side of the border in clockwise order that is, top, specifying
and left border in one rule. right, bottom
The style rule to set different styles for different
sides of the border is as follows:
P(border-style:otted dashed double solid)
If there are only two or three values
specified, then the missing values are
determined from the values specified for the opposite side.
The style nule to set dotted border on the top and
on left and right side ofa paragraph is as follows: bottom side and double border
P(border-style: dotted double)
Here, the values for bottom and left side of the border are
determined from the values specified for the top and right side of the missing which are
border as dotted
and double, respectively.
Note that individual styles for top, bottom, left and right border can also be
by using border-top-style, applied
style, border-right-styleborder-bottom-style,
property, respectively.
border-left
The style rule to set the border of top side of a paragraph to
double is as follows:
P(border-top-style: double)
border-width
The border-width property is used to set the width of the
The width for top, right, bottom, and left border can be set by borders of an element.
width, border-right-width, border-ottom-widthusing border-top
and border-1eft
width property, respectively. The values for these properties can be specified by using
keywords thin, medium and thick. The values can also be specified as absolute
measurement such as 15 pixels.
The style rule to set width ofall sides of the border of a
as follows: paragraph as 15 pixels is
P(border-style:solid;
border-width:15px)
Different sides of border can also be set to different width by specifying their
values in clockwise order that is, top, right, bottom and left.
The style rule to set different width for the different sides of
the border of a
paragraph is as follows:
P(border-style:solid; border-width: thick 10px thin 20px)
The style rule to set thick width oftop and bottom border and 10 pixels width
of
right and left border of a paragraph is as follows:
P(border-style:solid;
border-width: thick 10px.
border- color
The border-color property is used to set the color of the borders of an element.
The color for top, bottom, right and left border can be set by using
194 Self-Instructional
Material
border-top
 and border
and border Various
Example simultancously. to that the [he
<HEAD>
P{border-right: p(border-style:double: yellow paragraph isplborder-style:
is,
color olor,
</HEAD>
<BODY >
</STYLE> TYPE="text/css">
border-color:green)
width:
thick; <STYLE
<TITLE>Example
(background:yellow:
border-style:double
#paral <! <HIML> ed P(border-style:
border-left
r Or
</P>extra
text. ID="paral">
extra
text. It <P<DIV #para3
(background:
#para2 P(border-tsly:euolb;e-
The border-color:blue) style nameasr
style:dotted;
border-width:
border-style:double) thin) The The border
top, border Like
has
color is border-right-color ty,
rule properborder-
ID="para2" Shorthand
style style
as or
9,5, border-style
style lett, can ,
as tot
thin
(backaround:green; using follows: ,
An rule properties rule follows: ule bottom be c-bottom-color,
set
respectively.
numeric a
set the
This
This dotted HTMLcode
border-right to to to to
>This of dotted set allows set and double;
set different color
is is the like double; the
Border different right. RGB
extraextra
border is
right
specification
border-top. color of The
to20px and border
a demonstrate border border-color:green border-color: colors
border-color alue.values
text.text.
paragraph
border-color:red;orange:
Properties</TITLE> of border-width
colors
property
red) top of
on ofa by
and A a for
This all paragraph of specifying
for paragraph these
the border-right,
is style, bottom
the with color:blue;
border the
isis use follows: as width areen different :rab properties
extra four of
border their to
orange to property.
(0,0,255)
border-width:10rny: border dotted and yellow blue
sides.
yellow} to sides values
text. solid; properties style, color green is can
background. border-bottom the as n and c
be
orange of clockwise in follows:
information
20 and border-left-
specified
ThisThis
border
the different }
pixels right border
is is and eitheras
wIdth sides
of iet ol order
a a of
uctiong
aterial

DHTML
NO