III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies

UNIT-2
1. Discuss the difference between style and formatting?
Style:
“Styles” are collections of format specifications which can be applied all together to a
paragraph or a group of characters. The advantage of using styles to apply formatting is that you
can easily change the formatting of all paragraphs of a certain type (e.g. examples, section
headings or footnotes) simply by redefining the style.
Formats:
Formats are the text styles like boldface, underline, italics, superscripts, subscripts and
paragraphs.
The main difference between styles and formats are style defines structure and formats
but a format defines only the text styles.
CSS rules are defined as a property name followed by a colon and then a property value.
Individual rules are terminated by semicolons, with the final rule having an optional semicolon.
Syn:
Property-name1: value1; …. . . . . . property-nameN : value N;
Ex:
h1 { font-size : xx-large ; color : red; }

2. What is the purpose of CSS?

Cascading Style Sheets is a fairly old technology as far as the web is concerned. The
first idea about CSS was presented as early as 1994, and three major versions of the technology
have been developed since then.
CSS Stands for Cascading Style Sheets. In these sheets we can define different types of
styles to display HTML elements. These styles can solve many problems in HTML. The
external style sheets can save a lot of work to defining the styles for different items.
If we want to develop a large web site, we can define lot of formats for display the
content of the web page.
HTML can be used to add layout to websites. But CSS offers more options and is more
accurate and sophisticated. CSS is supported by all browsers today.
CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions
and many other things.

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.1

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
3. What are the advantages and disadvantages of CSS?
Advantages:
 Changes to the layout: CSS makes it very easy to change the style of a document. The
look and layout of a site can be changed by altering the CSS file. This makes CSS
indispensable for large web sites.
 File Size: The most useful feature of CSS is that all of the styles and layout is removed
from the html, so the html page size will be decreased so this can be increase the
downloading speed.
 Accessibility: Separating style from content makes very easy for visitors who prefer to
view only the content of a web page, or to modify the content.
 Consistency: Layout and position of navigation can be completely consistent across a
site. This was previously possible only using frames.
Disadvantages:
 No Expressions: There is currently no ability to specify property values as simple
expressions (such as margin-left: 10% - 3em + 4px ;).
 Lack of Variables: CSS contains no variables. This makes it necessary to do a "replace-
all" when one desires to change a fundamental constant, such as the color scheme or
various heights and widths.
 Inconsistent Browser Support: Different browsers will render CSS layout differently
as a result of browser bugs or lack of support for CSS features.
 Vertical Control Limitation - While horizontal placement of elements is generally easy
to control, but vertical placement is very difficult to control, or impossible.
 Control of Element Shapes - CSS currently only offers rectangular shapes. Rounded
corners or other shapes may require non-semantic markup.
 No of Multiple Backgrounds per Element - Highly graphical designs require several
background images for every element, and CSS can support only one.

4. What are the different ways to add style sheets to Web pages?
A style is simply a set of formatting instructions that can be applied to a piece of text. We can
apply the styles to the HTML pages with the following ways.
 Inline Style
 Embedded Style
 Linked Style
 Imported Style

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.2

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
Inline Style:
We can apply styles directly to elements in a document using the core attribute style.
Ex:
<h1 style=”font-size: 48px; font-family: Arial, Helvetica ; color: green;”>
Welcome to CSS
</h1>
Embedded Style:
Document-wide styles can be embedded in a document’s head element using the <style>
tag. The styles should be commented out to avoid interpretation by non-style-aware browsers.
Ex:
<html>
<head>
<style type=”text/css”>
Body {
background-color: skyblue; font-size:20px;
}
H1 {
font-size: 20px; font-family: Georgia; color: blue; background-
color: yellow;
}

em {
font-size: 2em; color: green;
}
</style>
</head>
<body>
<h1> Welcome to CSS </h1>
<em>Hai to All </em>
</body>
</html>

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.3

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
Linked Styles:
Styles can be contained in an external style sheets linked to a document or a set of
documents. Linked information should place inside the <head>tag.
Linked styles are preferred method of specifying CSS rules because they cleanly
separate the style from the markup.
Syn:
<link rel=”stylesheet” type=”text/css” href=”newstyle.css” media=”screen”>

The rel attribute is tells the browser what type of link we are using in HTML. The href
is a hyperlink of the stylesheet. The type attribute gives the relevant MIME type. The media
attribute can specify the type of media (screen viewing, printing and presentation) that can use
the web page.
Ex:
1. Create a CSS file that contains CSS style rules and Save as “Styles.CSS”.
2. Create a HTML file that contains the Matter and Save as “CSSExample.HTML”. Both files
are must be in a single folder.

CSS File:
Body {background-color: skyblue; font-size: 20px; font-color: red;}
H1 {font-family: times, times new roman, arial; font-size: 30px; font-color: green; }

HTML File:
<html>
<head>
<link rel=”Stylesheet” href=”styles.css” content=”text/css”>
</head>
<body>
<h1> Welcome to CSS </h1>
</body>
</html>

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.4

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
Imported Styles:
Importing can be used to include multiple style sheets. An imported style is defined
within <style> tag using @import followed optionally by a type value and a URL for the style
sheet. It allows style sheets to be grouped and joined together
Ex:
<html>
<head>
<style type=”text/css”>
@import url(style.css);
</style>
</head>
<body>
<h1> Welcome to CSS </h1>
</body>
</html>

5. Explain the properties of CSS?

The following are the commonly available properties of CSS.
FONT:
This property provides a shorthand way to specify all font properties with one rules.
 Font Family:
The font to use is set by the font-family property. Instead of defining a single
font, a sequence of fonts should be listed. The browser will use the first if it is available
but try the second and so on. The value can either be a specific font name or a generic
font family.
Syn:
font-family: [<family-name> | <generic-family>] [ , [ <family-name> |
<generic-family> ] ]*
<family-name> ::= serif | sans-serif | cursive | fantasy | monospace

Ex: p { font-family: "Century", Times, serif }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.5

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
Font Groups:
Serif: Times New Roman, Bodini, Garamond
Sans-serif: Trebuchet, Arial, Verdana, Futura, Gill Sans, Helvetica
Cursive: Poetica, Zapf-Chancery, Roundhand, Script
Fantasy: Critter, Cottonwood
Monospace: Courier, Courier New, Prestige, Everson Mono

 Font Style:
It has three values. Those are normal, italic or oblique (slanted)
Syn: font-style: normal | italic | oblique

Ex: h3 { font-style: italic }

p { font-style: normal }

 Font Variant:
This is used to convert the all letters in the word will set small capitals.
Syn: font-variant: normal | small-caps

 Font Weight:
The font-weight property sets the weight of the font to values like normal and
bold. It also has values bolder and lighter which are relative to any inherited font -
weight.
Syn:
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 |900

 Font Size:
The font-size property sets the size of the displayed characters.
Syn: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Ex:
h1 { font-size: large } h2 { font-size: 12pt } h3 { font-size: 5cm }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.6

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
BACKGROUNDS AND COLORS
 Color:
This property sets the color for the elements of foreground or background.
Ex: h1 {color: blue }
h2 {color: rgb(255,0,0) }
h3 {color: #0F0 }

 Background Color:
The background-color property sets the background color of an element
Syn: background-color: <color> | transparent
Ex: body { background-color: white }
h1 { background-color: #000080 }

 Background Image:
The background-image property sets the background image of an element.
Syn:background-image: <url> | none
Ex:
body { background-image: url("/images/monkey.gif") }
p { background-image: url("http://www.cclrc.com/pretty.png") }
h1 { background-image: none }

 Background Repeat:
If the background image does not fill the whole element area, this description specifies
how it is repeated. The repeat-x value will repeat the image horizontally while the
repeat-y value will repeat the image vertically. Setting background-image to repeat
will repeat the image in both x and y directions.
Syn: background-repeat: repeat | repeat-x | repeat-y | no-repeat
Ex:
body { background-image: url(/images/monkey.gif) }
body { background-repeat: repeat-x }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.7

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
 Background Attachment:
The background-image may be pasted on to the screen of the display in which case,
when the elements that it is associated with move, they will be on top of a different part
of the image
Syn:background-attachment: scroll | fixed
Ex:
body { background-image: url("monkey.jpg") }
body { background-attachment: fixed }

 Background Position
The background-position property gives the initial position of the background image
relative to the display or element depending on the attachment mode.
Syn:
background-position: [ percentage> | length ]{1,2} |
[[top | center | bottom] ||[left | center | right] ]

TEXT
 Word Spacing:
The word-spacing property defines additional spacing between words. Negative values
are permitted which allows the letters to be closed up or even overlap.
Syn: word-spacing: normal | <length>
Ex: p { word-spacing: 0.4em }
h1 { word-spacing: -0.2em }
h2 { word-spacing: normal }

 Letter Spacing:
The letter-spacing property defines additional spacing between characters. Negative values
are permitted.
Syn: letter-spacing: normal | <length>
Ex: h {letter-spacing: 0.2em }
p {letter-spacing: -0.1cm }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.8

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
 Text Decoration:
The text-decoration property defines how text is decorated. One or more settings can be
made.
Syn: text-decoration: none | [underline || overline || line-through || blink]
Ex: h3 {text-decoration: underline blink}

 Vertical Alignment:
The vertical-align property defines the vertical positioning of an inline element (such as
some text or even an image) relative to the current baseline.
Syn: Vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom
|<percentage>

 Text Transformation:
The text-transform property allows text to be transformed by one of four properties. Those
are capitalize, uppercase, lowercase and none.
Syn: text-transform: capitalize | uppercase | lowercase | none
Ex: h1 { text-transform: uppercase }
h2 { text-transform: capitalize }

 Text Alignment:
The text-align property defines the horizontal alignment of text.
Syn: text-align: left | right | center | justify
Ex: h1 { text-align: center }
h2 {text-align: left }
h3 {text-align: right }
p {text-align: justify }

 Text Indentation:
The text-indent property defines the amount of indentation that the first line of the element
has. A percentage refers to the parent element's width.
Syn: text-indent: <length> | <percentage>
Ex: p { text-indent: 5em }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur.9

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
 Line Height:
The line-height property defines the spacing between baselines of two adjacent lines of text.
It can be defined in points, inches, centimeters, or even pixels.
Syn: line-height: normal | <number> | <length> | <percentage>
Ex: p { line-height: 1.2 }
P { line-height: 1.2em }
P { line-height: 120% }

BOX
 Margin Setting:
Using this property we can set the margins for the web page or contents.
Syn:margin-top: <length> | <percentage> | auto
margin-right: <length> | <percentage> | auto
margin-bottom: <length> | <percentage> | auto
margin-left: <length>| <percentage> | auto
margin: [ <length> | <percentage> | auto ] {1,4}

 Padding Setting
Padding is defined in much the same way as the margin. The main difference is that
negative padding is not allowed.
Syn: padding-top:<length> | <percentage>
padding-right: <length> | <percentage>
padding-bottom: <length> | <percentage>
padding-left: <length> | <percentage>
padding: [ <length> | <percentage>] {1,4}

 Border Setting
Using this property we can control the Borders thickness
Syn:
border-top-width: thin | medium | thick | <length>
border-right-width: thin | medium | thick | <length>
border-bottom-width: thin | medium | thick | <length>
border-left-width: thin | medium | thick | <length>
border-width: [ thin | medium | thick | <length> ]{1,4}

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 10

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
 Border Color
The border-color property sets the color of the border. The four border parts (top, right,
bottom, left) can be set to different colors.
Syn: border-color: <color> {1,4}
Ex: P { border-color: black red black red}

 Border Style
The border-style property sets the style of the border and must be specified for the border to
be visible
Syn:
border-style: [ none | dotted | dashed | solid | double | groove | ridge | inset |outset ] {1,4}

Width and Height of Images

In block level we can change the images width and height by using this properties.
Syn:width: <length> | <percentage> | auto
height: <length> | auto
Ex:
img {width: 100px}
img {height: auto}

 Float
The float property allows the user to wrap text around an element.
Syn: float: left | right | none

 Clear
The clear property can be used by box-level elements to ensure that a previous floating
element is not adjacent to one of its sides.
Syn: clear: none | left | right | both
Ex: h1: {clear: left }

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 11

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
6. Explain about Classes in CSS?
Class selectors are used when you want to apply a style to multiple parts of a page or to
only part of an element. The style sheet contains any no. of classes. Classes always start with a
period followed by the class name. These class names are unique for a single web page or
entire website.
The class attribute is added to an HTML tag. The classes are overriding the default
HTML tags. Following is an example of two class styles and how they can be used to format
different elements within a web page.

Example :
Exercise 12: Classes in CSS
<html>
<head>
<title> Classes in CSS </title>
<style type="text/css">
.darkblue
{
background-color: blue; color:white;
}
.skyblue
{
background-color: skyblue
}
</style>
</head>
<body class=”skyblue”>
<h1 class="darkblue"> T.J.P.S. COLLEGE, GUNTUR </h1>
</body>
</html>

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 12

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
7. Explain the Inheritance in CSS? And advantages?
CSS inheritance works on a property by property basis. When applied to an element in a
document, a property with the value 'inherit' will use the same value as the parent element has
for that property.
Exercise 13: Inheritance in CSS
<html>
<head>
<title> CSS inheritance </title>
<style type="text/css">
.footer { background-color: red;
color: black;
}

.bar { background-color: inherit;

color: inherit;
font-weight: normal;
}
</style> </head>
<body>
<div class="footer">
<p class="bar">
Hai! This is a very short paragraph!
</p>
</div>
</body>
</html>

The background colour of the div element is white, because the background-color
property is set to white. The background colour of the paragraph is also white, because the
background colour property is set to inherit, and the background colour of the parent element
(the div) is set to white.
The inherit value does not require that the parent element have the same property
set explicitly; it works from the computed value.

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 13

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
Advantages:
 It reduces redundancy of author effort and storage space because a rule only needs to be
declared once for multiple nodes of a document tree.
 When a document's structure will be ambiguous, as is possible in XML markup
languages, inheritance will often be the author's best tool to control rendering with
complex documents.

8. Compare and contrast the use of DIV and SPAN?

The Div and Span elements are block and inline elements, respectively, that have no
particular rendering. You might call them generic tags. These tags don’t have any predefined
meaning or rendering, they are useful for random style duties.
Ex: Using a <div> tag, you can apply a style to a certain section or division of a document very
easily.
<div style=”background-color: yellow; font-weight: bold; color: black ;”>
<h3>……………….. </h3>
<p> …………………………….. </p>
<p> ……………………………………………… </p>
</div>

As a block element, div should induce a return, so if you want to provide style
information solely for a few words, or even a few letters, the best approach is to use the span
element, which as an inline element does not induce a return.
Ex: <p> Calling out <span style=”background-color: yellow; font-weight: bold ;”> Special
selections of text </span> isn’t hard with a span and css</p>
Exercise 14: CSS DIV and SPAN
<html>
<head> <title> CSS DIV and SPAN </title></head>
<body>
<div style="font-size:1cm; color:red; background-color:green;">
<p> This is First Part </p></div>
<div style="font-size:2cm; color:white; background-color:blue;">
<p>This is <span style="font-size:3cm; color:red; background- color:green;" > Second
</span> Part </p></div>
</body></html>

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 14

III BSc, SEMESTER – 6, PAPER - 7 Web-Technologies
9. What is a layer? How are they describing in HTML code?
The page layout that a browser creates results from layering text and images on top of
each other. This lets web designers use images as the background of their pages and then place
further images and text over them. We can place text and images on top of each other by using
layers.
In CSS, layers refer to applying the z-index property to elements that overlap with each
other. The z-index property, when used in conjunction with the position property, enables you
to specify which element should appear on top in the event of an overlap. An overlap can easily
occur when using the position property and this is often desirable when creating advanced
layouts.

Exercise 15: CSS Layers

<html>
<head>
<title> CSS Layers </title>
</head>
<body>
<div style="background-color:red;
width:100px;
height:100px;
position: relative;
top:10px;
left:80px;
z-index:2;">
Fist Rectangle
</div>
<div style="background-color:yellow; width:100px; height:100px; position:relative;
top:-60px; left:35px; z-index:1;">
Second Rectangle
</div>
</body>
</html>

KADIRI NAGESWARA RAO M.C.A,Department of Computer Science, T.J.P.S College,Guntur. 15