BSC Solved QB UNIT 2

Unit 2 –Solved Long answer questions

1. Write about basic features of XML.

 Extensible and Human Readable
Even if additional data is added, most XML applications will continue to
function as intended.
 Overall Simplicity
Data availability, platform modifications, data transit, and sharing are all made
simpler by XML. Without losing data, XML makes it simpler to upgrade or
extend to new operating systems, apps, or browsers. A wide range of "reading
devices," including people, computers, voice assistants, news feeds, and more,
can have access to data.
 Separates Data from HTML
Using XML, data can be saved in a variety of XML files. Thus, you won't need
to update HTML to make changes to the underlying data, allowing you to focus
on using HTML/CSS for display and style.
 Allows XML Validation
An XML document can be validated using a DTD or XML schema. By doing
this, the XML document is guaranteed to be syntactically valid and any issues
brought on by flawed XML are avoided.
 XML supports Unicode
Given that XML is compatible with Unicode, it may transmit virtually any
information in any written human language.
 Used to Create New Languages
Many new Internet languages have emerged as a result of XML. WSDL can be
used to describe available web services. WAP and WML are utilized as portable
device markup languages. The RSS languages are used for news feeds.

2. Explain the structure of XML with an example.

All XML documents can be described as tree-structures. They all have exactly
one top element. The top element can contain any number of attributes and
simple elements and it can contain any number of complex elements, which
again can contain sub-structures.
Valid an Well Formed XML
XML documents may be either valid or well formed. A well-formed document
is one which follows all of the rules of XML. Tags are matched and do not
overlap, empty elements are ended properly, and the document contains an
XML declaration. A valid XML document has its own DTD. XML should also
conform the rules set out in the DTD.

Chaithra N Page 1
 BSC Solved QB UNIT 2

There are many XML parsers that checks the document and its DTD. XML
elements XML documents are composed of three things i.e., elements, control
information, and entities. Most of the markup in an XML document is element
markup. Elements are surrounded by tags much as they are in HTML. Each
document has a single root element which contains all of the other markup.
Nesting tags: Even the simplest XML document has nested tags. Unlike HTML
these must be properly nested and closed in the reverse of the order in which
they were opened. Each XML tag has to have a closing tag, again unlike
HTML.
Case Sensitive: XML is case sensitive and you must use lower case for your
markup.
Empty tags: Some tags are empty, they don’t have content. Where the content
of the tag is missing, it appears as <content/>
Attributes: Sometimes it is important that elements have information associated
with them without that information becoming a separate element.
Control Information:
There are three types of control information
 Comments
 processing instructions
 document type declaration.
Comments: XML comments are exactly same as HTML. They take the form as
<!- -comment text - ->
Processing Instructions: Processing Instructions are used to control applications.
One
of the processing instructions is <?xml version=”1.0”>
Document Type Declarations: Each XML document has an associated DTD.
The DTD is usually present in separate file, so that it can be used by many files.
The statement that includes DTD in XML file is <?DOCTYPEcust SYSTEM
“customer.dtd”>.
Entities
Entities are used to create small pieces of data which you want to use repeatedly
throughout your schema
Example:
<?xml version="l.0"?>
<recipes>
<category type="loaf">
<name>Basic Farmhouse</name>
<ingredient></ingredient >
<cooking>
<time></time>
<setting></setting>
</cooking>
<serves></serves>
<instructions>

Chaithra N Page 2
BSC Solved QB UNIT 2

<item></item>
</instructions>
</category>
</recipes>
<?xml version="l.0"?> This is a Processing Instruction which tells
applications how to handle the XML. In this case it also serves as a
version declaration and says that the file is XML which should adhere to
the rules for XML version 1.0.
The rules state that the parser must halt when it finds an error and that it
may return a message back to the calling application.
If we change <serves></serves>
into
<serves></servs>
and run the file through the browser once more. It gives an error

3. Write about Document Type Definition (DTD) in XML.

The XML has neither meaning nor context without a grammar against which
it can be validated. The grammar is called a Document Type Definition
(DTD). The DTD has quite a complex structure which makes sense given the
difficult and important nature of its role. Writing a good DTD is probably the
most difficult aspect of using XML in your applications.
<!ELEMENT cookbook (category+)>
<!ELEMENT category (recipe+)>
<!ATTLIST categorytype CDATA #REQUIRED>
<!ELEMENT recipe (name, ingredient+, cooking+, serves?,instruction*)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT ingredient (qty, item)>
<!ELEMENT qty (#PCDATA)>
<!ATTLIST qty amount CDATA #REQUIRED unit CDATA "g">
<!ELEMENT item (#PCDATA)>

Chaithra N Page 3
BSC Solved QB UNIT 2

<!ELEMENT cooking (time*, gas*, electric*)>

<!ELEMENT time (#PCDATA)>
<!ATTLIST time unit CDATA "minutes">
<!ELEMENT gas (#PCDATA)>
<!ELEMENT electric (#PCDATA)>
<!ELEMENT serves (#PCDATA)>
<!ELEMENT instruction (ins*)>
<!ELEMENT ins (#PCDATA)>
a) Elements: The XML document is composed of a number of elements.
Each of those elements may itself be made from other elements and
some of the elements in the document may contain attributes. This
structure is reflected in the DTD. The first node of the XML document is
called the root node. It contains all other nodes of the document and each
XML document must have exactly one root node. In the recipe book, the
root node is called cookbook and all of the nodes which it holds are
called category. Defining that in XML is straightforward:
<! ELEMENT cookbook (category+)>
The element tag starts with an exclamation mark and the word
ELEMENT in upper-case letters. This is followed by the name of the
element. The element ends with some information in parentheses.
<! ELEMENT recipe (name, ingredient+, cooking+, serves?,
instruction*) >
which is a list of elements. The name appears just once, at least one
ingredient and one cooking elements are required, only a single serves
element is allowed but as many instructions as the recipe requires can be
used.
Elements which contain data items are declared using the format:
<!ELEMENT name (#PCDATA)>

b) Attributes: Attributes are important and useful when you are handling
complexity. Some XML elements need to hold more than one piece of

Chaithra N Page 4
BSC Solved QB UNIT 2

information. Some of that information will be displayed or handled by

applications but other pieces are used to control the behavior of the
application.
<qty amount="825" unit="ml">Warm water</qty>
Once you have decided that some of your XML elements have
attributes, then youneed to include this information in the DTD.
Associated with the element declaration isan ATTLIST which may
contain:
• the name of the element,
• the name of each attribute,
• the data type of the attribute,
• any value which will be used as a default if the attribute is omitted from
the XML
source,
• control information about the use of the element.
<!ATTLIST qty
amount CDATA #REQUIRED
unit CDATA "g">
c) Entities: The content may be included in the XML file, an internal
entity, or stored in another file, an external entity. As with attributes and
elements, entities may be either parsed or non-parsed. All complex data
items which do not need to pass through the XML parser should be
defined as non-parsed.
Internal Entities:Internal entities are used to create small pieces of
data which you want to use repeatedly throughout your schema.
<!ENTITY POS "Pinch of salt">
which could then be used in an instruction like this:
<item>Finally add the &POS ; </item>
External Entities Almost anything which is data can be included in
your XML as an external entity. Here's a example which shows how
to create a container for a Portable Network Graphic (png) image in
an XML schema.
<!ENTITYmyimage SYSTEM "unclefred.png" NDATA PNG>
The SYSTEM keyword shows that we have created the data for our
local application. This picture of Uncle Fred is not part of some
internationally agreed standard. The address of the image is given in
URL format so that the processor knows where to find the data object.
The end of the entity declaration is NDATA PNG. NDATA tells the
processor that we have created a notation for this type of data. Notations
are important because the XML parser and most XML applications will
only handle a limited range of data types.

Chaithra N Page 5
BSC Solved QB UNIT 2

<!NOTATION PNG SYSTEM "xv">

That passes the image to a paint program for viewing.
d) Namespaces: It uses the element name to create an internal
representation.
<staff>
<name>Chris Bates</name>
<dept>
<name>School of CMS</name>
</dept>
<room>2323 < /room>
</staff>
A namespace is a way of keeping the names used by applications
separate from each other. Within a particular namespace no duplication
of names can exist.
<?xml version="l.0"?>
<!DOCTYPE Recipes SYSTEM "recipes.dtd">
<!xml:namespace ns="http://URL/namespaces/breads"
prefix="bread">
<!xml:namespace ns="http://URL/namespaces/meats"
prefix="lamb">
<recipes>
<category>
<bread:name>Basic Loaf</bread:name>
</category>
<category>
<lamb:name>Roast Lamb</lamb:name>
</category>
</recipes>

4. Explain about presenting of XML.

XML documents are presented using Extensible Stylesheet which expresses
stylesheets. XSL stylesheet are not the same as HTML cascading stylesheets.
Theycreate a style for a specific XML element, with XSL a template is created.
XSL basically transforms one data structure to another i.e., XML to HTML.
Example Here is the XSL file for the XML document of Example This line
must be included in the XML document which reference stylesheet
<?xml:stylesheet type = “text/xsl” href = “student.xsl”?. Here goes the XSL file
<xsl:stylesheetsmlns:xsl =”uri:xsl”.
<xsl:template match=”/”>
<html>
Chaithra N Page 6
 BSC Solved QB UNIT 2

<body>
<h1> Student Database </h1>
<xsl:for-each select = “college”>
<xsl:for-each select = “studetail”>
<xsl:value-of select = “regno”/>
<xsl:for-each select = “name”>
<xsl:value-of select = “firstname”/>
<xsl:value-of select = “lastname”/>
</xsl:for-each>
<xsl:value-of select=”country/@name” />
<xsl:value-of select = “branch”/>
</xsl:for-each>
</xsl:for-each>
</body>
</xsl:template>
</xsl:stylesheet>

5. What is DTD? Explain internal DTD and external DTD.

XML Document Type Declaration, commonly known as DTD, is a way to
describe precisely the XML language. DTDs check the validity of structure and
vocabulary of an XML document against the grammatical rules of the
appropriate XML language.
DTD can be classified on its declaration basis in the XML document, such as −
 Internal DTD
 External DTD

Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the
XML files. To reference it as internal DTD, standalone attribute in XML
declaration must be set to yes. This means the declaration works independent of
external source.
Syntax
The syntax of internal DTD is as shown −
<!DOCTYPE root-element [element-declarations]>
where root-element is the name of root element and element-declarations is
where you declare the elements.
Example:
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
Chaithra N Page 7
BSC Solved QB UNIT 2

<!ELEMENT name (#PCDATA)>

<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>TanmayPatil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
Let us go through the above code −
 Start Declaration − Begin the XML declaration with following
statement.
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
 DTD − Immediately after the XML header, the document type
declaration follows, commonly referred to as the DOCTYPE −
<!DOCTYPE address [
The DOCTYPE declaration has an exclamation mark (!) at the start of the
element name. The DOCTYPE informs the parser that a DTD is
associated with this XML document.
 DTD Body − The DOCTYPE declaration is followed by body of
the DTD, where you declare elements, attributes, entities, and
notations −
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENTphone_no (#PCDATA)>
Several elements are declared here that make up the vocabulary of the
<name> document. <!ELEMENT name (#PCDATA)> defines the
element name to be of type "#PCDATA". Here #PCDATA means parse-
able text data.
 End Declaration − Finally, the declaration section of the DTD is
closed using a closing bracket and a closing angle bracket (]>).
This effectively ends the definition, and thereafter, the XML
document follows immediately.
External DTD
In external DTD elements are declared outside the XML file. They are
accessed by specifying the system attributes which may be either the
legal .dtd file or a valid URL. To reference it as external DTD, standalone
attribute in the XML declaration must be set as no. This means,
declaration includes information from the external source.
Syntax

Chaithra N Page 8
BSC Solved QB UNIT 2

Following is the syntax for external DTD −

<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Example
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>TanmayPatil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

6. Explain the XML Scheme.

XML Schema is itself an XML application which means when you use it
you only need a single grammar and can use your normal XML editor to create
it. At the time of writing few tools are available which can use XML Schema to
validate XML documents.
Document Type Definitions have been successfully used in SGML
applications for many years. From the XML view, though, they appear to have a
number of limitations. The most important objection to DTDs is that they are
too document-centric.
As the language of the XML schema, XSD is similar to a database
schema that describes the data within a database.
<?xml version="l.0" encoding="utf-8" ?>
<xsd:schemaxmlns:xsd="http://www.wS.org/2001/XMLSchema">
<xsd:element name="cookbook">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="recipe">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="name" type="xsd:string"/>
<xsd:element name="ingredient">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="qty">
<xsd:complexType>
<xsd:attribute name="amount"
type="xsd:decimal" />
<xsd:attribute name="unit"
Chaithra N Page 9
BSC Solved QB UNIT 2

type="xsd:string" />
</xsd:complexType>
</xsd:element>
<xsd:element name="item"
type="xsd:string"/>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
This schema defines a namespace for its elements. Elements and some
attributes, those which define data types, all exist in that namespace. XML
elements are defined within XML Schema as being either simple types or
complex types. A complex type contains other elements or has attributes.
A simple type defines an element which is a container for data. Within a
complex type
the individual components form a sequence which must be defined in the
schema document.

7. Explain about Document Object Model (DOM).

The W3C recommendations for XML specify the external behavior that
parsers must have. That simply means that a parser has to structure its output in
a specific way, has to pass certain messages to applications, and has to handle
specified types of input. Two models are commonly used for parsers: SAX and
DOM. SAX parsers are used whendealing with streams of data.
SAX-based parsers do not have to build large static models of the
document in memory and are intended to run quickly. The DOM is an
Application Program Interface (API) for XML documents. Basically an API is a
set of data items and operations which can be used by developers of application
programs. The DOM API specifies the logical structure of XML documents and
the ways in which they can be accessed and manipulated. If you write an
application which uses a DOM-compliant XML parser then your application
will function in a certain way.
The DOM API is just a specification. There isn't a single reference piece
of software associated with it which everyone must use. This is unlike

Chaithra N Page 10
 BSC Solved QB UNIT 2

Microsoft Windows where all developers use a standard set of libraries which
contain the Windows code. Anyone can write an XML parser in any language.

HTML documents can also be viewed as XML documents and accessed through
a DOM structure. Languages such as JavaScript can easily be used within Web
clients to manipulate the components of a Webpage.

8. What are the four values used in the CSS3 text-shadow property?
The CSS3 text-shadow property makes it easy to add a text shadow effect to any
text. First we add a text-shadow property to our styles (line 12). The property
has four values: -4px, 4px, 6px and DimGrey, which represent:
• Horizontal offset of the shadow—the number of pixels that the text-shadow
will appear to the left or the right of the text. In this example, the horizontal
offset of the shadow is -4px. A negative value moves the text-shadow to the
left; a positive value moves it to the right.
• Vertical offset of the shadow—the number of pixels that the text-shadow will
be shifted up or down from the text. In this example, the vertical offset of the
shadow is 4px. A negative value moves the shadow up, whereas a positive value
moves it down.
• blur radius—the blur (in pixels) of the shadow. A blur-radius of 0px would
result in a shadow with a sharp edge (no blur). The greater the value, the greater
the blurring of the edges. We used a blur radius of 6px.
• color—determines the color of the text-shadow. We used dimgrey.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
</style>
Chaithra N Page 11
 BSC Solved QB UNIT 2

</head>
<body>
<h1>Text-shadow with blur effect</h1>
</body>
</html>

9. What are the key properties of the box-shadow property in CSS3?

The box-shadow property with four values:
• Horizontal offset of the shadow (25px)—the number of pixels that the box-
shadow will appear to the left or the right of the box. A positive value moves
the box-shadow to the right
• Vertical offset of the shadow (25px)—the number of pixels the box-shadow
will be shifted up or down from the box. A positive value moves the box-
shadow down.
• Blur radius—A blur-radius of 0px would result in a shadow with a sharp edge
(no blur). The greater the value, the more the edges of the shadow are blurred.
We used a blur radius of 10px.
• Color—the box-shadow’s color (in this case, dimgrey).
<html>
<head>
<meta charset = "utf-8">
<title>Box Shadow</title>
<style type = "text/css">
div
{
width: 200px;
height: 200px;
background-color: plum;
float: left;
margin-right: 120px;
margin-top: 40px;
}
#box2
{
width: 200px;
height: 200px;
background-color: plum;

Chaithra N Page 12
 BSC Solved QB UNIT 2

h2
{
text-align: center;
}
</style>
</head>
<body>
<div><h2>Box Shadow Bottom and Right</h2></div>
<div id = "box2"><h2>Box Shadow Top and Left</h2></div>
</body>
</html>
we create a style that’s applied only to the second div, which changes the box-
shadow’s horizontal offset to -25px and vertical offset to -25px (line 25) to
show the effects of using negative values. A negative horizontal offset value
moves the box shadow to the left. A negative vertical offset value moves the
shadow up.

10.What are linear gradients in CSS, and how are they created?
Linear gradients are a type of image that gradually transitions from one color to
the next horizontally, vertically or diagonally. To create a linear gradient you
must define at least two color stops. Color stops are the colors you want to
render smooth transitions among.
we create three linear gradients—vertical, horizontal and diagonal—in separate
rectangles.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top,
transitioning to yellow at the bottom:</p>
Chaithra N Page 13
 BSC Solved QB UNIT 2

<div id="grad1"></div>

</body>
</html>
The background property for each of the three linear gradient styles (vertical,
horizontal and diagonal) is defined multiple times in each style—once for
WebKit-based browsers, once for Mozilla Firefox and once using the standard
CSS3 syntax for linear gradients.
Example:
div
{
width: 200px;
height: 200px;
border: 3px solid navy;
padding: 5px 20px;
text-align: center;
background: -webkit-gradient(
linear, center top, center bottom,color-stop(15%, white), color-stop(50%,
lightsteelblue),color-stop(75%, navy) );
background: -moz-linear-gradient(
top center, white 15%, lightsteelblue 50%, navy 75% );
background: linear-gradient(
to bottom, white 15%, lightsteelblue 50%, navy 75% );
float: left;
margin-right: 15px;
}

11.What is the purpose of radial gradients in CSS, and how do they differ from
linear gradients?
Radial gradients are similar to linear gradients, but the color changes gradually
from an inner point (the start) to an outer circle (the end). CSS gradients are
often used to simulate a light source, which we know isn't always straight.
Radial gradient property has three values. The first is the position of the start of
the radial gradient—in this case, the center of the rectangle. Other possible
values for the position include top, bottom, left and right. The second value is
the start color (yellow), and the third is the end color (red). The resulting effect
is a box with a yellow center that gradually changes to red in a circle around the
starting position.
<!DOCTYPE html>

Chaithra N Page 14
BSC Solved QB UNIT 2

<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
Other than the vendor prefixes, the syntax of the gradient is identical for
WebKit browsers, Mozilla and the standard CSS3 radial-gradient.
div
{
width: 200px;
height: 200px;
padding: 5px;
text-align: center;
background: -webkit-radial-gradient(center, yellow, red);
background: -moz-radial-gradient(center, yellow, red);
background: radial-gradient(center, yellow, red);
}

12. What is the purpose of the CSS3 border-image property?

The CSS3 border-image property uses images to place a border around any
block-level element.
Stretching an Image Border
We stretchthe sides of the image to fit around the element while leaving the
corners of the border image unchanged.
The border-image property has six values
 border-image-source: the URL of the image to use in the border
 border-image-slice: expressed with four space-separated values in pixels
(inthis case, 80 80 80 80). These values are the inward offsets from the top,
right, bottomand left sides of the image.The border-image-slice divides the

Chaithra N Page 15
BSC Solved QB UNIT 2

image into nineregions: four corners, four sides and a middle, which is
transparent unless otherwise specified.
 border-image-repeat: specifies how the regions of the border image are
scaledand tiled (repeated). By indicating stretch just once, we create a border
that willstretch the top, right, bottom and left regions to fit the area.
Repeating an Image Border
 border-image-source—the URL of the image to use in the border (once
again,url(border.png)).
 border-image-slice—in this case, we provided two values expressed in
percentages(34% 34%) for the top/bottom and left/right, respectively.
 border-image-repeat—the value repeat specifies that the tiles are repeated
tofit the area, using partial tiles to fill the excess space.

13.What is the use of animation property in CSS?

An animation lets an element gradually change from one style to another.
The animation property allows you to represent several animation properties
in a shorthand notation, rather than specifying each separately, as in:
animation-name: movingImage;
animation-timing-function: linear;
animation-duration: 10s;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
In the shorthand notation, the values are listed in the following order:
 animation-name: represents the name of the animation (movingImage). This
name associates the animation with the keyframes that define various
propertiesof the element being animated at different stages of the animation.
 animation-timing-function :determines how the animationprogresses in one
cycle of its duration. Possible values include linear, ease,ease-in, ease-out,
ease-in-out, cubic-bezier. The value linear, which weuse in this example,
specifies that the animation will move at the same speed fromstart to finish.
The default value, ease, starts slowly, increases speed, then endsslowly. The
ease-in value starts slowly, then speeds up, whereas the ease-outvalue starts
faster, then slows down. The ease-in-out starts and ends slowly. Finally,the
cubic-bezier value allows you to customize the timing function withfour
values between 0 and 1, such as cubic-bezier(1,0,0,1).
 animation-duration—specifies the time in seconds (s) or milliseconds (ms)
that the animation takes to complete one iteration (10s in this case). The
default duration is 0.
 animation-delay—specifies the number of seconds (1s in this case) or
milliseconds after the page loads before the animation begins. The default
value is 0. If the animation-delay is negative, such as -3s, the animation will
begin three seconds into its cycle.
 animation-iteration-count—specifies the number of times the animation will

Chaithra N Page 16
BSC Solved QB UNIT 2

run. The default is 1. You may use the value infinite to repeat the animation
continuously.
 animation-direction—specifies the direction in which the animation will run.
The value alternate used here specifies that the animation will run in
alternating directions—in this case, counterclockwise (as we define with our
keyframes), then clockwise. The default value, normal, would run the
animation in the same direction for each cycle.
The shorthand animation property cannot be used with the animation-play-state
property—it must be specified separately. If you do not include the animation-
playstate, which specifies whether the animation is paused or running, it
defaults to running.
@keyframes Rule and Selectors
For the element being animated, the @keyframes rule defines the element’s
properties that will change during the animation, the values to which those
animation-name: movingImage;
animation-timing-function: linear;
animation-duration: 10s;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate;

14.What are CSS3 transitions and transformations, and how do they differ from
animations? Explain.
Transformations in CSS3 allow elements to be manipulated in terms of their
size, position, and rotation. This is done using the transform property.
Transformations can be 2D or 3D. Common transformation functions
include:
translate(): Moves an element from its current position.
scale(): Changes the size of an element.
rotate(): Rotates an element around a fixed point.
skew(): Skews an element along the X or Y axis.

Transitions in CSS3 enable smooth changes between different states of an

element. They work by defining a duration over which the changes occur.
The transition property allows you to specify which properties will change,
the duration of the change, the timing function (e.g., linear, ease-in, ease-
out), and an optional delay.
Transition Animations

Transitions cannot loop (You

can make them do that but they Animations have no problem in looping.
are not designed for that).

Chaithra N Page 17
BSC Solved QB UNIT 2

Transitions need a trigger to The animation just start. They don’t need
run like mouse hover. any kind of external trigger source.

The animations are hard to work in

Transitions are easy to work in JavaScript. The syntax for manipulating a
JavaScript. keyframe and assigning a new value to it, is
very complex.

Animation allows you to define Keyframes

Transitions animate a object
which varies from one state to another with
from one point to another.
various properties and time frame.

Use transition for manipulating Flexibility is provided by having multiple

the value using JavaScript. keyframes and easy loop.

15.Explain the concept of "length" in the context of CSS.

In the context of CSS, the concept of "length" refers to a measurement used to
define the size, spacing, and positioning of elements on a web page. Length
values can be expressed in various units, which can be broadly categorized into
absolute units and relative units.
Absolute Length Units
Absolute length units are fixed and are not affected by other elements or the
viewport size. They are useful for precise measurements but are less flexible for
responsive design. Common absolute units include:
 px (pixels): The most commonly used unit for web design. One pixel is
one dot on the screen.
 pt (points): Primarily used in print media. 1 point = 1/72 of an inch.
 cm (centimeters): Real-world centimeter measurement.
 mm (millimeters): Real-world millimeter measurement.
 in (inches): Real-world inch measurement. 1 inch = 96 pixels.
 pc (picas): Used in print media. 1 pica = 12 points.
Relative Length Units
Relative length units are more flexible and adjust based on the context of the
element they are applied to, making them more suitable for responsive
design. Common relative units include:
 em: Relative to the font-size of the element. 1em is equal to the
current font size.
 rem: Relative to the font-size of the root element (html). 1rem is equal
to the font size of the root element.
 %: Relative to the parent element's dimensions.
 vh (viewport height): 1% of the viewport's height.
 vw (viewport width): 1% of the viewport's width.

Chaithra N Page 18
BSC Solved QB UNIT 2

 vmin and vmax: 1% of the viewport's smaller and larger dimension,

respectively.
 ch: Relative to the width of the "0" (zero) character in the current font.

16.How does the Flexible Box Layout Module (FBLM) facilitate the creation of
flexible divs in CSS?
Flexible Box Layout Module (FBLM) makes it easy to align the contents of
boxes, change their size, change their order dynamically, and lay out the
contents in any direction.
There are 2 main components of the Flexbox:
Flex Container: The parent “div” which contains various divisions is called a
flex container.
Flex Items: The items inside the container “div” are flex items.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Tutorial</title>
<style>
.flex-container {
display: flex;
background-color: #32a852;
}
.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4> Flexbox</h4>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>

Chaithra N Page 19
BSC Solved QB UNIT 2

</html>

17.Explain the components of a CSS rule with an example.

CSS works by allowing your associate rules with the elements that appear in
the document. These rules govern how the content of those elements should
be rendered.
CSS rule, which as you can see is made up of two parts:
❑ The selector, which indicates which element or elements the declaration
applies to. (If it applies to more than one element, you can have a comma-
separated list of several elements.)
❑ The declaration, which sets out how the elements should be styled.

Here, rule applies to all <h1> elements and indicates that they should appear
in the Arial typeface.
The declaration is also split into two parts, separated by a colon:
❑ A property, which is the property of the selected element(s) that you want
to affect, in this case it is the font-family property.
❑ A value, which is a specification for this property; in this case it is the
Arial typeface.
Here is an example of a CSS rule that applies to several elements (in this
example the <h1>, <h2>, and <h3> elements): a comma separates the name
of each element that this rule will apply to. The rule also specifies several
properties for these elements with each rule separated by a semicolon.

h1, h2, h3 {
color:#000000;
background-color:#FFFFFF;
font-family:arial, verdana, sans-serif;
font-weight:bold;}

Chaithra N Page 20
 BSC Solved QB UNIT 2

18. Explain the basic syntax of CSS and how it is applied to HTML documents.
A CSS rule consists of a selector and a declaration block.

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by
a colon.
 Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
CSS rules can also appear in two places inside the HTML or XHTML
document:
❑ Inside the <head> element, contained with a <style> element
❑ As a value of a style attribute on any element that can carry the style attribute

 When the style sheet rules are held inside a <style> element in the head of
the document, they are referred to as an internal style sheet.
<head>
<title>Internal Style sheet</title>
<style type="text/css">
body {
color:#000000;
background-color:#ffffff;
}
h1 {font-size:18pt;}
p {font-size:12pt;}
</style>
</head>
 When style attributes are used, they are known as inline style rules. For
example:
<td style="font-family:courier; padding:5px; border-style:solid;
border-width:1px; border-color:#000000;">

Here you can see that the properties are added within the style attribute. There is
no need for a selector here and there are no curly braces. But still need to
separate each property from its value using a colon and each of the property-
value pairs from each other using a semicolon.

19. What are the key attributes required for the <link> element when used to link
CSS style sheets to HTML documents?

Chaithra N Page 21
BSC Solved QB UNIT 2

The <link /> element can be used to create a link to CSS style sheets. The
<link/> element is always an empty element that describes the relationship
between two documents. It can be used in several ways, but when used with
style sheets the relationship indicates that the CSS document contains rules for
the presentation of the document containing the <link /> element.
The <link /> element is most commonly used for linking CSS style sheets to
documents. When used with style sheets, the <link /> element must carry three
attributes: type, rel, and href.
<link rel="stylesheet" type="text/css" href="../style sheets/interface.css" />
 The rel attribute is required and specifies the relationship between the
document containing the link and the document being linked to.
The key value for working with style sheets is stylesheet.
rel="stylesheet"
 The type Attribute
The type attribute specifies the MIME type of the document being linked to:
type="text/css"
 The href Attribute
The href attribute specifies the URL for the document being linked to.
href="../stylesheets/interface.css"
 The hreflang Attribute
The hreflang attribute specifies the language that the resource specified is
written in. Its value should be one of the language codes specified in Appendix
G.
hreflang="en-US"
 The media Attribute
The media attribute specifies the output device that is intended for use with the
document:
media="screen"

20.Explain the different(any 4) Font properties in CSS.

There are several properties that allow us to control the appearance of text in
our documents. These can be split into two groups:
❑ Those that directly affect the font and its appearance
❑ Those that have other formatting effects upon the text
Property Purpose
1. font Allows you to combine several properties into one
2. font-family Specifies the family of font to be used (the user must have this
installed on his or her computer)
3. font-size Specifies the size of a font
4. font-weight Specifies whether the font should be normal, bold, or bolder
than the containing element

Chaithra N Page 22
BSC Solved QB UNIT 2

5. font-style Specifies whether the font should be normal, italic, or oblique (an
oblique font is the normal font on a slant rather than a separate italic
6. version of the font)
7. font-stretch Allows you to control the width of the actual letters in a font
(not spaces between them)
8. font-variant Specifies whether the font should be normal or smallcaps
9. font-size-adjust Allows you to alter the aspect ratio of the size of characters
of the font
The font-family Property
The font-family property allows us to specify the typeface that should be used.
There is a big restriction with this property; the person viewing the page must
have this font on his or her computer, otherwise they will not see the page in
that font. We can, however, specify more than one font so that, if the user does
not have your first choice of font, the browser looks for the next font in the list
p.one {font-family:arial, verdana, sans-serif;}

The font-size Property

The font-size property allows us to specify a size for the font. There are several
ways in which we can specify a value for this property:
❑Absolute size
❑Relative size
❑Length
❑Percentage (in relation to parent element)
An absolute size would be one of the following values:
xx-small x-small small medium large x-large xx-large
Example:
p.one {font-size:xx-small;}
p.twelve {font-size:12px;}
p.cithirteen {font-size:3pc;}
p.cifourteen {font-size:10%;}

The font-weight Property

Most fonts have different variations, such as bold and italic. While many good
fonts have completely different versions of each character for bold text,
browsers tend to use an algorithm to calculate and add to the character’s
thickness when it is supposed to be bold.
The possible values for font-weight are:
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Example:
p.one {font-weight:normal;}
p.two {font-weight:bold;}
p.three {font-weight:bolder;}

Chaithra N Page 23
BSC Solved QB UNIT 2

The font-style Property

The font-style property allows you to specify that a font should be normal,
italic, or oblique, and these are the values of the font-style property; for
example:
p.one {font-style:normal;}
p.two {font-style:italic;}
p.three {font-style:oblique;}

21.Explain the different(any 4) Text properties in CSS.

The color Property
The color property allows you to specify the color of the text. The value of this
property can either be a hex code for a color or a color name.
For example, the following rule would make the content of paragraph elements
red:
p {color:#ff0000;}

The text-align Property

The text-align property works like the deprecated align attribute would with
text. It aligns the text within its containing element or the browser window. See
the table that follows or possible values.
Value Purpose
 left-Aligns the text with the left border of the containing element
 right-Aligns the text with the right border of the containing element
 center-Centers the content in the middle of the containing element
 justify-Spreads the width across the whole width of the containing
element
Example:
td.leftAlign {text-align:left;}
td.rightAlign {text-align:right;}
The text-decoration Property
The text-decoration property allows you to specify the values shown in the table
that follows.
Value Purpose
 underline -Adds a line under the content
 overline- Adds a line over the top of the content
 line-through Like strikethrough text, with a line through the middle. In
general, this should be used only to indicate text that is marked for
deletion.
 blink- Creates blinking text (which is generally frowned upon and
considered annoying)
p.underline {text-decoration:underline;}
The text-indent Property

Chaithra N Page 24
BSC Solved QB UNIT 2

The text-indent property allows you to specify how much the content of a
block-level element should be indented from the left side of the browser
window or the left side of its containing element.
Example:
<p>This paragraph should be aligned with the left-hand side of the browser.
</p>
<p class="indent">The content of this paragraph should be indented by 3 em.
</p>
Now, here is the rule that indents the second paragraph
.indent {text-indent:3em;}

22.What are text pseudo-classes in CSS?

These pseudo-classes allow us to render either the first letter or the first line of
an element in a different way than the rest of that element. Both of these are
commonly used when laying out text.
The first-letter Pseudo-Class
The first-letter pseudo-class allows us to specify a rule just for the first letter of
an element. This is most commonly used on the first character of a new page,
either in some magazine style articles or in children’s books.
p.pageOne:first-letter {font-size:42px;}
The first-line Pseudo-Class
The first-line pseudo-class should allow us to render the first line of any
paragraph differently than the rest of the paragraph. Commonly this might be in
a bold font so that the reader can clearly see an introduction (for articles) or the
first line (for poems or hymns).
p:first-line {font-weight:bold;}

23.Explain the concept of selectors in CSS.

Universal Selector
The universal selector is an asterisk; it is like a wildcard and matches all
element types in the document.
*{}
If you want a rule to apply to all elements you can use this selector. Sometimes
it is used for default values, such as a font-family and font-size, that will apply
to the whole of the document (unless another more specific selector indicates an
element should use different values for these same properties).
The Type Selector
The type selector matches all of the elements specified in the comma-delimited
list. It allows you to apply the same rules to several elements. For example, the
following would match all page, heading, and paragraph elements.
page, heading, paragraph {}
The Class Selector
The class selector allows you to match a rule with an element carrying a class
attribute whose value you specify in the class selector. For example, imagine

Chaithra N Page 25
BSC Solved QB UNIT 2

you had a <p> element with a class attribute whose value was BackgroundNote,
like so:
<p class="BackgroundNote">This paragraph contains an aside.</p>
The ID Selector
The id selector works just like a class selector, but works on the value of id
attributes. But rather than using a period or full stop before the value of the id
attribute, you use a hash or pound sign (#). So, a <p> element with an id
attribute whose value is abstract could be identified with this selector.
p.#abstract
The Child Selector
The child selector matches an element that is a direct child of another. In this
case it matches any <b> elements that are direct children of <td> elements:
td > b {}
The Descendent Selector
The descendent selector matches an element type that is a descendent of another
specified element, at any level of nesting not just a direct child. In this case the
selector matches any <b> element that is a child of the <table> element, which
means it would apply to <b> elements both in <td> and <th> elements.
table b {}

24.Explain the different Border properties in CSS.

The border-color Property
The border-color property allows you to change the color of the border
surrounding a box. For example:
p {border-color:#ff0000;}
The value can be a hex code for the color or a color name like those you learned
about in Chapter 4. It can also be expressed as values for red, green, and blue;
between 0 and 255; or percentages of red green and blue. See the table that
follows for examples.

The border-style Property

The border-style property allows you to select one of the following styles of
border:
p {border-style:solid;}
The default value for this property is none, so no border shows automatically.
The table that follows shows the possible values.

Chaithra N Page 26
BSC Solved QB UNIT 2

The border-width Property

The border-width property allows you to set the width of your borders.
p {border-style:solid;}
border-width:4px;}
The value of the border-width attribute cannot be a percentage; it must be a
length (as discussed in the “Lengths” section earlier in the chapter) or one of the
following values:
❑ thin
❑ medium
❑ thick

25.Explain the Padding and margin properties in CSS.

The padding property allows you to specify how much space should appear
between the content of an element and its border:
td {padding:5px;}
The value of this attribute should be either a length, a percentage, or the word
inherit. If the value is inherit it will have the same padding as its parent element.
If a percentage is used, the percentage is of the containing box. So, if the rule
indicates the padding on the <body> element should be 10 percent, 5 percent of
the browser window’s width will be inside the content of the <body> element
on each side as padding.
The padding of an element will not inherit, so if the <body> element has a
padding property with a value of 50 pixels, this will not automatically apply to
all other elements inside it.
❑padding-bottom
❑padding-top
❑padding-left
❑padding-right
The padding attribute is especially helpful in creating whitespace between the
content of an element and any border it has.

26.Explain the different background properties in CSS.

Chaithra N Page 27
BSC Solved QB UNIT 2

The background-color Property

The background-color property allows you to specify a single solid color for the
background of your pages and the inside of any box created by CSS. The value
of this property can be a hex code, a color name, or an RGB value. For
example:
body {background-color:#cccccc; color:#000000;}
b {background-color:#FF0000; color:#FFFFFF;}
The background-image Property
The background-image property allows us to add an image to the background of
any box in CSS and its effect can be quite powerful. The value it takes is as
follows, starting with the letters url, and then holding the URL for the image in
brackets:
body {background-image: url(images/background.gif); }
The background-image property overrides the background-color property.
The background-repeat Property
By default, the background-image property repeats across the whole page,
creating what is affectionately known as wallpaper. The wallpaper is made up
of one image that is repeated over and over again, and which (if the image is
designed well) you will not see the edges of; therefore it is important that any
patterns should tessellate, or fit together, well.
Value Purpose
repeat ->This causes the image to repeat to cover the whole page.
repeat-x ->The image will be repeated horizontally across the page (not down
the whole page vertically).
repeat-y ->The image will be repeated vertically down the page (not across
horizontally).
no-repeat =>The image is displayed only once.
These different properties can have interesting effects.
body {
background-image: url(images/background_small.gif);
background-repeat: repeat-x;
background-color: #ffffff;}

27.Explain the different color properties in CSS

Chaithra N Page 28
BSC Solved QB UNIT 2

In CSS, there are several properties related to color, each serving a specific
purpose in styling elements on a webpage. Here are the main color-related
properties:
 color: This property sets the color of the text content. It accepts
color values in various formats such as keyword, hexadecimal,
RGB, RGBA, HSL, or HSLA.
color: blue;
 background-color: This property sets the background color of an
element. It works similarly to the color property, accepting various
color value formats.
background-color: #f0f0f0;
 border-color: This property sets the color of an element's border.
Like background-color, it accepts various color value formats.
border-color: red;
 outline-color: This property sets the color of an element's outline,
which is a line drawn around the outside of an element. It behaves
similarly to border-color.
outline-color: green;
 box-shadow: While not directly a color property, box-shadow
allows you to create a shadow effect around an element. It includes
a parameter for specifying the color of the shadow.
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
 text-shadow: Similar to box-shadow, text-shadow creates a
shadow effect around text. It also includes a parameter for
specifying the color of the shadow.
text-shadow: 2px 2px 2px #888888;

28.Explain the different types of exploring colors in CSS

CSS Colors are an essential part of web design, providing the ability to bring
your HTML elements to life. This feature allows developers to set the color
of various HTML elements, including font color, background color, and
more.
There are several ways to define the color of an element in CSS:
 Built-In Color: These are a set of predefined colors which are used by
their names. For example: red, blue, green etc.
h1 {
color: color-name;
}
 RGB Format: The RGB (Red, Green, Blue) format is used to define
the color of an HTML element by specifying the R, G, and B values
range between 0 to 255.
h1 {
color: rgb(R, G, B);
}

Chaithra N Page 29
BSC Solved QB UNIT 2

 RGBA Format: The RGBA format is similar to the RGB, but it

includes an Alpha component that specifies the transparency of
elements.
h1 {
color:rgba(R, G, B, A);
}
 Hexadecimal Notation: The hexadecimal notation begins with a #
symbol followed by 6 characters each ranging from 0 to F.
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
 HSL: HSL stands for Hue, Saturation, and Lightness respectively.
This format uses the cylindrical coordinate system.
h1 {
color:hsl(H, S, L);
}
 HSLA: The HSLA color property is similar to the HSL property, but it
includes an Alpha component that specifies the transparency of
elements.
h1 {
color:hsla(H, S, L, A);
}

29.Explain the different List properties in CSS

In CSS, there are several properties specifically designed for styling lists, such
as unordered lists (<ul>), ordered lists (<ol>), and list items (<li>). Here are the
main list properties:
 list-style-type: This property defines the appearance of the list item
marker, which is typically a bullet for unordered lists or a
number/letter for ordered lists. It accepts various values like "disc",
"circle", "square", "decimal", "lower-roman", "upper-alpha", etc.

 The list-style-position Property: The list-style-position property

indicates whether the marker should appear inside or outside of the
box containing the bullet points.
The real difference comes when a bullet points wraps onto more than
one line because this property sets whether the text on the new line

Chaithra N Page 30
BSC Solved QB UNIT 2

wraps underneath the bullet point or in line with the position of the
first line of text. There are two values for this property, as you can see
in the table that follows.

 The list-style-image Property: The list-style-image property allows

you to specify an image so that you can use your own bullet style. The
syntax is as follows, similar to the background-image property with
the letters url starting the value of the property followed by the URL
in brackets.
 list-style: This is a shorthand property that combines list-style-type,
list-style-image, and list-style-position into one declaration.
ul {
list-style: square inside url('bullet.png'); /* Shorthand */
}

30.How can tables be styled using CSS?

Sure, here's an explanation for each of the CSS properties used for styling
tables:

1. border-collapse: This property specifies whether table borders should be

collapsed into a single border or separated as distinct borders. Setting it to
`collapse` ensures a consistent appearance where adjacent cells share
borders.

2. width : Sets the width of the table. By setting it to `100%`, the table spans
the entire width of its containing element.

2. border: This property sets the border of elements. In this case, it's applied
to table headers (`th`) and table data cells (`td`). It includes the border
width, style, and color.

4. padding: Adds space between the content of an element and its border. It's
particularly useful for improving readability and aesthetics.

5. text-align: This property sets the horizontal alignment of text content

within table headers and data cells. Values like `left`, `center`, and `right` are
commonly used.

Chaithra N Page 31
BSC Solved QB UNIT 2

6. background-color: Sets the background color of an element. Here, it's

applied to table headers (`th`) to provide visual differentiation.

7. font-weight: Specifies the weight or thickness of the font. By setting it to

`bold`, table headers (`th`) are emphasized.

8. height: Sets the height of table headers (`th`) and data cells (`td`). In this
example, it's set to a fixed value, but it can also be set to `auto` or a
percentage value.

9. border-bottom: This property specifies the style, width, and color of the
bottom border of table headers (`th`). It's a way to differentiate header cells
visually.

10. :hover: This is a pseudo-class that applies styles to an element when it's
being hovered over by the cursor. Here, it's used to change the background
color of table rows (`tr`) when hovered, enhancing interactivity and visual
feedback for users.

These CSS properties, when used together, allow for comprehensive styling
of tables, enabling designers to create visually appealing and user-friendly
table layouts.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
</style>

31.Explain the different Position properties in CSS.

Chaithra N Page 32
BSC Solved QB UNIT 2

CSS offers several position properties that control how an element is

positioned within its parent container. Here are the main position
properties:

1. Static (`position: static;`):

- This is the default value.
- Elements with `position: static;` are positioned according to the
normal flow of the document.
- They are not affected by the `top`, `bottom`, `left`, and `right`
properties.

2. Relative (`position: relative;`):

- Positioned relative to its normal position in the document flow.
- Using `top`, `bottom`, `left`, and `right` properties, you can move it
from its original position.
- It maintains the space it would have taken up in the normal flow of the
document.

3. Absolute (`position: absolute;`):

- Positioned relative to the nearest positioned ancestor (an ancestor that
has a `position` value other than `static`) or the initial containing block if
there is no such ancestor.
- It's removed from the normal document flow, which means it doesn't
affect the layout of other elements.
- Using `top`, `bottom`, `left`, and `right` properties, you can position it
precisely where you want it.

4. Fixed (`position: fixed;`):

- Positioned relative to the viewport, meaning it always stays in the
same place even if the page is scrolled.
- Similar to absolute positioning in that it's removed from the normal
document flow and doesn't affect the layout of other elements.

Chaithra N Page 33
BSC Solved QB UNIT 2

- Useful for elements like navigation bars or banners that you want to
remain visible at all times.
<style>
/* Common styles */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
}

/* Static */
.static {
position: static;
}

/* Relative */
.relative {
position: relative;
left: 20px;
top: 20px;
}

/* Absolute */
.absolute {
position: absolute;
right: 20px;
bottom: 20px;
}

/* Fixed */
.fixed {
position: fixed;
right: 20px;
bottom: 20px;
}
<style>
5. The z-index Property
Absolutely positioned elements have a tendency to overlap other
elements. When this happens the default behavior is to have the first
elements underneath later ones. This is known as stacking context. If you

Chaithra N Page 34
BSC Solved QB UNIT 2

have boxes that are absolutely positioned, you can control which of the
absolutely positioned boxes appears on top using the z-index property to
alter the stacking context.

6. Floating Using the float Property

The float element allows you to take an element out of normal flow and
place it as far to the left or right of a containing box as possible within
that element’s padding. To indicate that you want a box floated either to
the left or the right of the containing box you set the float property.
<style>
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
font-size: 18px;
}

/* Floating boxes */
.float-left {
float: left;
}

.float-right {
float: right;
}

/* Z-index */
.z-index-1 {
position: relative;
z-index: 1;
}

.z-index-2 {
position: relative;
z-index: 2;
}
</style>

***********************************************************

Chaithra N Page 35