Notes on:

WEB Programming

0
 UNIT- 2
Style Sheets
CSS (Cascading Style Sheets)
2.1 Style Sheets
2.2 Levels of Style Sheets
2.3 Style Specification Format
2.4 Selector Forms
2.4.1 Simple Selector Form
2.4.2 Class Selector
2.4.3 Generic Selector
2.4.4 ID Selector
2.4.5 Universal selector form
2.5 Font Properties
2.5.1 Font Family
2.5.2 Font Size
2.5.3 Font Variant
2.5.4 Font Style
2.5.5 Font Weight
2.6 Text Decorations
2.6.1 Text Spacing
2.6.2 Alignment of Text
2.7 List Properties
2.8 Color
2.9 Borders
2.10 Margins and Padding
2.11 Background Images

1
 UNIT – 2
Cascading Style Sheets
2.1 Style Sheets:
A style sheet is a syntactic mechanism for specifying style information. The idea of a
style sheet is not new: Word processors and desktop publishing systems have long used style
sheets to impose a particular style on documents. The first style-sheet specification for use in
HTML documents, dubbed Cascading Style Sheets (CSS1), was developed in 1996 by the
World Wide Web Consortium (W3C). In mid-1998, the second standard, CSS2, was released.
CSS2 added many properties and property values to CSS1. It also extended presentation
control to media other than Web browsers, such as printers. As a result of the incomplete
implementation of (and perhaps a lack of interest in) parts of CSS2 by browser implementers,
W3C developed a new standard, CSS2.1, which reflected the level of acceptance of CSS2.
Internet Explorer 8 and later (IE8+), Chrome 5 and later (C5+), and Firefox 3 and later
(FX3+) fully support CSS2.1, which was at the working draft stage as of spring 2011. CSS3
has been in development since the late 1990s. Current versions of browsers already have
implemented some parts of CSS3.

INTRODUCTION
 The most important benefit of style sheets is their capability of imposing
consistency on style of web documents. For eg.,they allow the author to specify
that all occurrences of a particular tag use the same presentation.
 HTML style sheets are called cascading style sheets because they can be defined
at three different levels to specify the style of a document.
CSS style sheets are called cascading style sheets because they can be defined at
different levels to specify the style of a document.

2.2 Levels of Style Sheets:

Three levels of style sheets in order from lower level to higher level are
1. Inline style sheet
2. Document level style sheet
3. External style sheet
 Lower level style sheets can override higher level style sheets, so the style of
the content of a tag is determined in effect, through a cascade of style-sheet
applications.

2
  Inline style sheets have precedence over document stylesheets, which have
precedence over external style sheets. That means if an external stylesheet
specifies a value for a particular property of a particular tag, that value is used
until a different value is specified in either a document or inline style sheet.
Inline style sheets are specified for a specific occurrence of a tag and apply only to the
content of that tag. This application of style, which defeats the purpose of style sheets – that
of imposing uniform style on the tags of at least one whole document. Another disadvantage
of inline style sheets is that they result in style information, which is expressed in a expressed
in a language distinct from HTML markup being embedded in various places in documents.
Document-level style specifications appear in the document head section and apply to
the whole body of the document.
External style sheets are not part of the documents to which they apply. They are
stored separately and are referenced in all documents that use them. They are written as text
files with MIME type text/css.

1. Inline style sheet:

 Inline style sheet apply to the content of a single XHTML element i.e., style
tag.
 Inline style specifications appear within the opening tag and apply only to the
content of that tag.
General form <tagname=”property1:value;property2:value”>
The properties should be enclosed in double quotes. Each property should end with
semicolon. Eg. <h1 style=”color:red;”>India</h1>
Here the word India will be displayed with red colour.
Disadvantages:
1. It applied to the content of particular tag as it appears within the opening tag of that
element.
2. They result in style information, which is expressed in a language distinct from
XHTML markup, being embedded in various places in documents. Therefore inline
style specification should be used sparingly.

2. Document level style sheet:

 Document level style sheets apply to the whole document for the specified tags
with in <style> tag.
 Document level style specifications appear in the document head section and apply
to the entire body of the document.

3
 This is obviously the way to impose a uniform style on the presentation of all the
content of a document.
 General form <style type=”text/css”>
Rules for style tag
i.e., tagname {property:value}
</style>

3. External Style sheet:

In many cases, it is desirable to have a stylesheet apply to more than one
document.
 External style sheets can apply to the bodies of any number of documents.
 External style sheets are not a part of any of the document to which they apply,
they are saved separately with .css extension and are referenced in all documents
that use them.
 They are written as text files with MIME type text / css. They can be stored on any
computer on the web. The browser fetches external style style sheets just as it
fetches documents.
 The <link> tag is used to specify external style sheet.
 Within <link> the rel attribute is used to specify external style sheet
relationship to the document in which the link appears.
 The href attribute of <link> is used to specify URL of the style sheet
document.
 The link to an external stylesheet must appear in the head of the
document.
 If the external stylesheets resides on webserver computer, only its path
address must be given as the value of href

General form:
<link rel=”stylesheet” type=text/css” href=”filename.css”> </link>
Pair of <link > tags should be placed in the <head> tag
Or <link rel=”stylesheet” type=text/css” href=”filename.css”/>

External style sheet Document style sheet

external.html <html>
<head>
<html> <style type="text/css">

4
 <head>
<link rel="stylesheet" type="text/css" h1{color:red; font-size:50;font-family:
href="sample.css"/> 'Lucida Handwriting';}
</head>
h2{color:blue;}
<body>
<h1>Bangalore</h1> </style>
<h1>Reva</h1> </head>
<h2>Web programming</h2> <body>
</body> <h1>Bangalore</h1>
</html> <h1>Reva</h1>
<h2>Web programming</h2>
sample.css
</body>
h1{color:red; font-size:50; font-family: 'Lucida
</html>
Handwriting';} h2{color:blue;}

Inline style sheet

<html><head> <title>Sample CSS</title>

</head>
<body>

<h1 style="color:red; font-size:50;font-

family: 'Lucida
Handwriting';">Bangalore</h1>

<h1 style="color:red; font-size:50;font-

family: 'Lucida Handwriting';">Reva</h1>

<h2 style="color:blue;">web
programming</h2></body></html>

2.3 Style Specification Format:

The format of a style specification depends on the level of style sheet. Inline style
specifications appear as values of the style attribute of a tag, the general form of which is as
follows:
style = "property_1 : value_1; property_2 : value_2;...;
property_n : value_n ;"
Although it is not required, it is recommended that the last property-value pair be followed by
a semicolon. Document style specifications appear as the content of a style element within
the header of a document, although the format of the specification is quite different from that
of inline style sheets. The general form of the content of a style element is as follows:
<style type = "text/css">
rule_list

5
</style>
The type attribute of the <style> tag tells the browser the type of style specification, which is
text/css for CSS.
Each style rule in a rule list has two parts: a selector, which specifies the element or elements
affected by the rule, and a list of property-value pairs. The list has the same form as the
quoted list for inline style sheets, except that it is delimited by braces rather than double
quotes. So, the form of a style rule is as follows:
selector {property_1 : value_1; property_2 : value_2;...;
property_n:value_n;}
If a property is given more than one value, those values usually are separated with spaces. For
some properties, however, multiple values are separated with commas.

2.4 Selector Forms:

A selector specifies the elements to which the following style information applies.
The selector can have a variety of forms.

2.4.1 Simple Selector Form:

The simplest selector form is a single element name, such as h1. In this case, the
property values in the rule apply to all occurrences of the named element. The selector could
be a list of element names separated by commas, in which case the property values apply to
all occurrences of all the named elements.
Consider the following examples:
h1 {property-value list}
h2, h3 {property-value list}
The first of these selector forms specifies that the following property-value list applies to all
h1 elements. The second specifies that the following property-value list applies to all h2 and
h3 elements.

<html>
<head> <title>Sample CSS</title>

<style type = "text/css">

p { font-family: 'Lucida
Handwriting';
font-size: 50pt; color: red; }
</style>

</head> <body>
<p>Bangalore</p>
<p>Reva</p>
<p>Web Programming</p>
</body> </html>

2.4.2 Class Selectors:

6
 Class selectors are used to allow different occurrences of the same element to use
different style specifications. A style class is defined in a style element by giving the style
class a name, which is attached to the element's name with a period.
For example, if you want two paragraph styles in a document: normal and warning—you
could define these two classes in the content of a style element as follows:
p.normal {property-value list}
p.warning {property-value list}
Within the document body, the particular style class that you want is specified with the class
attribute of the affected element—in the preceding example, the paragraph element. For
example, you might have the following markup:
<p class = "normal">
A paragraph of text that we want to be presented in 'normal' presentation style
</p>
<p class = "warning">
A paragraph of text that is a warning to the reader, which should be presented in an especially
noticeable style
</p>

Class selectors are used to give different Style specifications of the same tag at
different occurrences. A style class is defined in a style element by giving it a name,
which is attached to tag’s name with a period.

<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
p.one {
font-family: 'Lucida
Handwriting';
font-size: 25pt;
color: Red;
}

p.two {
font-family: 'Monotype
Corsiva';
font-size: 50pt;
color: green;
}
</style> </head>
<body>
<p class = "one">Banglore</p>
<p class = "two">India</p>
</body></html>

2.4.3 Generic Selectors:

Sometimes it is convenient to have a class of style specifications that applies to the
content of more than one kind of element. This is done by using a generic class, which is

7
defined without an element name in its selector. Without the element name, the name of the
generic class begins with a period, as in the following generic style class:
.sale {property-value list}
Now, in the body of a document, you could have the following markup:
<h3 class = "sale"> Weekend Sale </h3>
...
<p class = "sale">
...
</p>
<html>
<head>
<style type=”text/css”>
.xyz{color:red;font-family: 'Monotype
Corsiva';}
</style>
</head>
<body>
<p class=”xyz”>Reva</h1>
<h3 class=”xyz”>Bangalore</p>
<h1 class=”xyz”> Web
class</h2>
</body>
</html>
2.4.4 ID Selectors:
An id selector allows the application of a style to one specific element. The general
form of an id selector is as follows:
#specific-id {property-value list}
As you would probably guess, the style specified in the id selector applies to the element with
the given id. For example, consider the following selector:
#section14 {property-value list}
Following is the h2 element to which this style applies:
<h2 id = "section14"> 1.4 Calico Cats </h2>

<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
#one { font-family: 'lucida calligraphy';
color: purple; }
#two { font-family: 'comic sans ms';
color: orange; }
</style>
</head>
<body>
<p id = "two">Reva</p>
<h1 id = "one">Bangalore</h1>
</body> </html>

8
2.4.5 Universal selector form:
The universal selector form denoted by an asterisk(*) applies it style to all elements in
the document
Syntax: *{property:value;}

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

*{color:red;font-family:
'lucida calligraphy'}
</style>
<body>
<h1>Reva</h1>
<h2> Webclass</h2>
<h4>web class</h4>
</body></html>
Everything in this document is displayed in red

2.5 Font Properties:

2.5.1 Font-family:
The font-family property is used to specify a list of font name. The browser will use
the first font in the list that it supports. For example, the following could be specified
font-family: Arial, Helvetica, Courier
Generic fonts: They can be specified as the font family value for example :serif, sans-serif,
cursive, fantasy, and monospace (defined in CSS). Browser has a specific font defined for
each generic name. If a font name that has more than one word, it should be single-quoted
Eg: font-family: ‘Times New Roman‘

2.5.2 Font-size :
Possible values: a length number or a name, such as smaller, xx-large, medium , large
etc. Different browsers can use different relative value for the font-size.

2.5.3 Font-variant :
The default value of the font-variant property is normal, which specifies the usual
character font. This property can be set to small-caps to specify small capital characters.

2.5.4 Font-style:
The font-style property is most commonly used to specify italic, as in the following
example. Eg: font-style: italic

2.5.5 Font-weights:

9
The font-weight property is used to specify the degree of boldness. For example: font-weight:
bold
Code:
<head>
<title> Font properties </title>
<style type = "text/css">
p.major { font-size: 1.1em;
font-style: italic;
font-family: 'Times New Roman';
}
p.minor {font: bold 0.9em 'Courier New';}
h2 {font-family: 'Times New Roman';
font-size: 2em; font-weight: bold;}
h3 {font-family: 'Courier New'; font-size: 1.5em;}
</style>
</head>
<body>
<p class = "major">
If a job is worth doing, it's worth doing right.
</p>
<p class = "minor">
Two wrongs don't make a right, but they certainly can get you in a lot of
trouble.
</p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Web Programming </h3>
</body>
</html>
OUTPUT:

2.6 Text Decorations:

The text-decoration property is used to specify some special features of text. The
available values are line-through, overline, underline and none which is the default. Many
browsers implicitly underline links. The none value can be used to avoid this underlining.

10
Code:
<html> </p>
<head> <p class= "cap">
<title> Text decoration </title> This illustrates overline
<style type = "text/css"> </p>
p.delete {text-decoration: line- <p class = "attention">
through;} This illustrates underline
p.cap {text-decoration: overline;} </p>
p.attention {text-decoration: </body>
underline;} </html>
</style> OUTPUT:
</head>
<body>
<p class = "delete">
This illustrates line-through
2.6.1 Text Spacing:
The letter-spacing property controls the amount of space between the letters in
words. This spacing is called tracking. The possible values of letter-spacing are normal or
any length property value. Positive values increase the letter spacing; negative values
decrease it. For example,
letter-spacing: 1px spreads the letters of words.
Likewise letter-spacing: -1px squeezes the letters of words together.
The value normal resets letter-spacing back to that of the parent element. The space
between words in text can be controlled with the word-spacing property, whose values are
normal or any length value. Once again, a positive value increases the space between words
and negative values decrease that space, and normal resets word spacing back to that of the
parent element.
The space between lines of text can be controlled with the line-height property. This
spacing is called leading. The value of line-height can be a number, in which case a positive
number sets the line spacing to that number times the font size (2.0 means double spacing).
The value could be a length, such as 24px. If the font size is 12 pixels, this would specify
double spacing. The value could be a percentage, which is relative to the spacing of the
parent element. Finally, normal which overrides the current value, is used to set line spacing
back to that of the parent element.
Code:
<html>
<head>
<title> Text spacing properties </title>
<style type = "text/css">
p.big_tracking {letter-spacing: 0.4em;}
p.small_tracking {letter-spacing: -0.08em;}
p.big_between_words {word-spacing: 0.4em;}
p.small_between_words {word-spacing: -0.1em;}

11
 p.big_leading {line-height: 2.5;}
p.small_leading {line-height: 1.0;}
</style>
</head>
<body>
<p class = "big_tracking">
On the plains of hesitation [letter-spacing: 0.4em]
</p> <br />
<p class = "small_tracking">
Bleach the bones of countless millions [letterspacing:
-0.08em]
</p> <br />
<p class = "big_between_words">
Who at the dawn of victory [word-spacing: 0.4em]
</p> <br />
<p class = "small_between_words">
Sat down to wait and waiting died [word-spacing: -0.1em]
</p> <br />
<p class = "big_leading">
If you think CSS is simple, [line-height: 2.5] <br />
You are quite mistaken
</p> <br />
<p class = "small_leading">
If you think HTML5 is all old stuff, [line-height: 1.0]<br />
You are quite mistaken
</p>
</body>
</html>
OUTPUT:

12
2.6.2 Alignment of Text:
The text-indent property can be used to indent the first line of a paragraph. This property
takes either a length or a percentage value, as in the following markup:
Code:
<html>
<head>
<style type = "text/css">
p.indent {text-indent: 2em}
</style>
</head>
<body>
<p class = "indent">
Now is the time for all good Web developers to begin using cascading style sheets for all
presentation details in their documents. No more deprecated tags and attributes, just nice,
precise style sheets.
</p>
</body>
</html>

OUTPUT:

13
The text-align property, for which the most commonly used keyword values are left, center,
right and justify is used to arrange text horizontally.
For example the following document-level style sheet entry causes the content of paragraphs
to be aligned on the right margin:
p {text-align: right}
The default value for text-align is left.

2.7 List Properties:

Two presentation details of lists can be specified in HTML documents: the shape of
the bullets that precede the items in an unordered list and the sequencing values that precede
the items in an ordered list. The list-style-type property is used to specify both of these. If
list-style-type is set for a <ul> or an <ol> tag, it applies to all the list items in the list. If a list-
style-type is set for a <li> tag, it only applies to that list item.
The list-style-type property of an unordered list can be set to disc (the default), circle,
square, or none. A disc is a small filled circle, a circle is an unfilled circle, and a square is a
filled square.
Code 1:
<html>
<head>
<style type = "text/css">
li.disc {list-style-type: disc;}
li.square {list-style-type: square;}
li.circle {list-style-type: circle;}
</style>
</head>
<body>
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li class = "disc"> Cessna Skyhawk </li>
<li class = "square"> Beechcraft Bonanza </li>
<li class = "circle"> Piper Cherokee </li>
</ul>
</body>
</html>
OUTPUT 1:

14
Code 2:
<html>
<head>
<title> Sequence types </title>
<style type = "text/css">
ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}
</style>
</head>
<body>
<h3> Aircraft Types </h3>
<ol>
<li> General Aviation (piston-driven engines)
<ol>
<li> Single-Engine Aircraft
<ol>
<li> Tail wheel </li>
<li> Tricycle </li>
</ol>
</li>
<li> Dual-Engine Aircraft
<ol>
<li> Wing-mounted engines </li>
<li> Push-pull fuselage-mounted engines </li>
</ol>
</li>
</ol>
</li>
<li> Commercial Aviation (jet engines)
<ol>
<li> Dual-Engine
<ol>

15
 <li> Wing-mounted engines </li>
<li> Fuselage-mounted engines </li>
</ol>
</li>
<li> Tri-Engine
<ol>
<li> Third engine in vertical stabilizer </li>
<li> Third engine in fuselage </li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
OUTPUT:

16
2.8 Color:
In HTML, a color can be specified by using a color name, RGB value or a HEX
value.
There are three groups of predefined colors that were designed for Web documents,
the original group of seventeen named colors, which included far too few colors to be useful,
a group of 147 named colors that are widely supported by browsers and the so-called Web
palette (see http://www .web-source.net/216_color_chart.htm), which includes 216 named
colors, which at one time were the only predefined colors that were widely supported.

Color Name:
Syntax:
color: red;
color: blue;
color: magenta;

RGB Color:
Syntax:
background-color:rgb(255,0,0)  Red
background-color:rgb(0,0,0)  Black
background-color:rgb(255,255,255)  White

Hex Value:
Syntax:
background-color:#FF0000  Red
background-color:#0000FF  Blue
background-color:#FFFF00  Yellow

Code:
<html>
<body>
<h3 style="background-color:cyan">
Background-color set by using cyan
</h3>
<h3 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h3>
<h3 style="background-color:rgb(0,0,0);color:white">
Background-color set by using rgb(0,0,0)
</h3>
<h3 style="background-color:#808080;color:white">
Background-color set by using #808080
</h3>

17
 <h3 style="background-color:#FFFFFF;">
Background-color set by using #FFFFFF
</h3>
</body>
</html>
OUTPUT:

2.9 Borders:
The CSS border properties allow you to specify the style, width, and color of an
element's border.

Border Style:
The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 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
 none - Defines no border
 hidden - Defines a hidden border

Border Width:
The border-width property specifies the width of the four borders. The width can be
set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values:
thin, medium, or thick.

18
 The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border).
border-width: 5px;
border-width: medium;
border-width: 2px 10px 4px 20px;

Border Color:
The border-color property is used to set the color of the four borders.
The color can be set by:
 name - specify a color name, like "red"
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent
The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border). If border-color is not set, it inherits the color of the
element.
border-color: red;
border-color: #fff000;
border-color: rgb(255,0,0);
Code:
<html>
<head>
<style>
p.dotted
{ border-style: dotted;
border-width: 5px;
border-color: blue;
}
p.dashed
{ border-style: dashed;
border-width: 6px;
border-color: grey;
}
p.solid
{ border-style: solid;
border-width: 7px;
border-color: #800000;
}
p.double
{ border-style: double;
border-width: 8px;
border-color: red;
}
p.groove

19
{ border-style: groove;
border-width: 10px;
}
p.ridge
{ border-style: ridge;
border-width: medium;
}
p.inset
{ border-style: inset;
border-width: thin;
}
p.outset
{ border-style: outset;
border-width: thick;
}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix
{ border-style: dotted dashed solid double;
border-width: 6px;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
OUTPUT:

20
2.10 Margins and Padding:
Margin:
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border. With CSS, you have
full control over the margins. There are CSS properties for setting the margin for each side of
an element (top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
Code:
<html>
<head>
<style>

div
{
border: 1px solid black;
margin: 50px 150px 200px 80px;
background-color: lightblue;
}
</style>

21
</head>
<body>
<h2>Using the margin shorthand property</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>
</body>
</html>
OUTPUT:

Padding:
The CSS padding properties are used to generate space around content. The padding
clears an area around the content (inside the border) of an element. With CSS, you have full
control over the padding. There are CSS properties for setting the padding for each side of an
element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
Code:
<html>
<head>
<style>

div
{
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

22
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding
of 50px, and a left padding of 80px.</div>
</body>
</html>
OUTPUT:

2.11 Background Images:

The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element. The background
image for a page can be set like this:
body
{
background-image: url("paper.gif");
}
Code:
<html>
<head>
<style>
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

23
OUTPUT:

24