Scribd
Upload
36 views45 pages

Web Unit 2 (Nep)

Uploaded by

Nishath Ashraf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views45 pages

Web Unit 2 (Nep)

Uploaded by

Nishath Ashraf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

UNIT II
INTRODUCTION TO XML
Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. The
design goals of XML focus on simplicity, generality, and usability across the Internet. It is a
textual data format with strong support via Unicode for different human languages. Although
the design of XML focuses on documents, the language is widely used for the representation
of arbitrary data structures such as those used in web services.
1. XML stands for extensible Markup Language
2. XML is a markup language like HTML
3. XML is designed to store and transport data
4. XML is designed to be self-descriptive

Differences between XML and HTML


XML and HTML were designed with different goals:
 XML is designed to carry data emphasizing on what type of data it is.
 HTML is designed to display data emphasizing on how data looks
 XML tags are not predefined like HTML tags.
 HTML is a markup language whereas XML provides a framework for defining markup
languages.
 HTML is about displaying data, hence it is static whereas XML is about carrying
information, which makes it dynamic.

EXAMPLE: XML code for a note is given below

HTML code for the note is given below


<!DOCTYPE html>
<html>
<h1>Note</h1>
<body>
<p>To:RAJ
NANDINI S D, GFGCW, H N PURA Page 1
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<br>
From:RAVI
</p>
<h1>Reminder</h1>
<p>Meeting at 8am</p>
</body>
</html>

Output:

Note: The output in both the cases is same but while using HTML we have used predefined
tags like p tag and h1 tag whereas while using XML we have used self defined tags like “To”
tag and “from” tag.

SYNTAX OF XML
XML imposes two distinct levels of syntax:
o There is a general low level syntax that is appreciable on all XML documents
o The other syntactic level is specified by DTD (Document Type Definition) or XML schemas.
The DTDs and XML schemas specify a set of tag and attribute that can appear in a particular
document or collection of documents.
They also specify the order of occurrence in the document.
The XML documents consists of data elements which form the statements of XML
document.
The XML document might also consists of markup declaration, which act as instructions to
the XML parser
All XML documents begin with an XML declaration. This declaration identifies that the
document is a XML document and also specifies version number of XML standard.
It also specifies encoding standard.
<?xml version = “1.0” encoding = “utf-8”?>
Comments in XML is similar to HTML
XML names are used to name elements and attributes.
XML names are case-sensitive.
There is no limitation on the length of the names.
NANDINI S D, GFGCW, H N PURA Page 2
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

All XML document contains a single root element whose opening tag appears on first line of
the code
All other tags must be nested inside the root element
As in case of XHTML, XML tags can also have attributes
The values for the attributes must be in single or double quotation

Example:
1. <?xml version = “1.0” encoding = “utf-8”?>
<student>
<name>Santhosh B S</name>
<usn>1RN10CS090</usn>
</student>

2. Tags with attributes


The above code can be also written as
<student name = “Santhosh B S” usn = “1RN10CS090”>
</student>

XML DOCUMENT STRUCTURE


An XML document often consists of 2 files:
o One of the document – that specifies its tag set
o The other specifies the structural syntactic role and one that contains a style sheet to describe
how content of the document is to be printed
The structural roles are given as either a DTD or an XML schema
An XML document consists of logically related collection of information known as entities
The document entity is the physical file that represent the document itself
The document is normally divided into multiple entities.
One of the advantage dividing document into multiple entities is managing the document
becomes simple
If the same data appears in more than one place, defining it as an entity allows number of
references to a single copy of the data
Many documents include information that cannot be represented as text. Ex: images
Such information units are stored as binary data
These binary data must be a separate unit to be able to include in XML document
These entities are called as Binary entities
When an XML processor encounters the name of a non-binary entity in a document, it
replaces the name with value it references
Binary entities can be handled only by browsers
XML processor or parsers can only deal with text
Entity names can be of any length. They must begin with a letter, dash or a colon

NANDINI S D, GFGCW, H N PURA Page 3


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

A reference to an entity is its name with a prepended ampersand and an appended semicolon
Example: if stud_name is the name of entity, &stud_name; is a reference to it
One of the use of entities is to allow characters used as markup delimiters to appears as
themselves
The entity references are normally placed in CDATA section
Syntax: <! [CDATA[ content ] ] >
For example, instead of
The last word of the line is &gt;&gt;&gt; here &lt;&lt;&lt;. the following could be used:
<![CDATA[The last word of the line is >>> here <<<]]>

DOCUMENT TYPE DEFINITIONS


A DTD is a set of structural rules called declarations which specify a set of elements that can
appear in the document. It also specifies how and where these elements appear
DTD also specify entity definitions
DTD is more useful when the same tag set definition is used by collection of documents
A DTD can be embedded in XML document whose syntax rules it describes
In this case, a DTD is called as internal DTD or a separate file can be created which can be
linked to XML file. In this case the DTD is called as External DTD
An external DTD can be used with more than one XML file
Syntactically, a DTD is a sequence of declarations. Each declaration has the form of markup
declaration
Example: <!keyword...>
Four possible keywords can be used in a declaration:
o ELEMENT, used to define tags;
o ATTLIST, used to define tag attributes;
o ENTITY, used to define entities; and
o NOTATION, used to define data type notations.

DECLARING ELEMENTS
DTD follows rules of context-free grammar for element declaration
A DTD describes the syntactic structure of a particular set of documents
Each element declaration in a DTD specifies the structure of one category of elements
An element is a node in such a tree either a leaf node or an internal node
If element is leaf node, its syntactic description is its character pattern
If the element is internal node, its syntactic description is a list of its child element
The form of an element declaration for elements that contain elements is as follows:

<!ELEMENT element_name (list of names of child elements)>

For example, consider the following declaration:

NANDINI S D, GFGCW, H N PURA Page 4


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<!ELEMENT memo (from, to, date, re, body)>


This element declaration would describe the document tree structure shown in Figure 7.1.

In many cases, it is necessary to specify the number of times that a child element may appear.
This can be done in a DTD declaration by adding a modifier to the child element specification.
These modifiers, described in Table 7.1, are borrowed from regular expressions.
Any child element specification can be followed by one of the modifiers.

Modifier Meaning

Consider the following DTD declaration:


<!ELEMENT person (parent+, age, spouse?, sibling*)>
In this example, a person element is specified to have the following child elements: one or
more parent elements, one age element, possibly a spouse element, and zero or more sibling
elements.
The leaf nodes of a DTD specify the data types of the content of their parent nodes, which are
elements.
In most cases, the content of an element is type PCDATA, for parsable character data.
Parsable character data is a string of any printable characters except “less than” (<), “greater
than” (>), and the ampersand (&).
Two other content types can be specified: EMPTY and ANY.
The EMPTY type specifies that the element has no content; it is used for elements similar to
the XHTML img element.
The ANY type is used when the element may contain literally any content.
The form of a leaf element declaration is as follows:
NANDINI S D, GFGCW, H N PURA Page 5
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<!ELEMENT element_name (#PCDATA)>

DECLARING ATTRIBUTES
The attributes of an element are declared separately from the element declaration in a DTD. An
attribute declaration must include the name of the element to which the attribute belongs, the
attribute’s name, its type, and a default option. The general form of an attribute declaration is as
follows:
<!ATTLIST element_name attribute_name attribute type default_option>
If more than one attribute is declared for a given element, the declarations can be combined, as
in the following element:

The default option in an attribute declaration can specify either an actual value or a requirement
for the value of the attribute in the XML document.

For example, suppose the DTD included the following attribute specifications:

NANDINI S D, GFGCW, H N PURA Page 6


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Then the following XML element would be valid for this DTD:
<airplane places = “10” engine_type = “jet”> </airplane>

DECLARING ENTITIES
Entities can be defined so that they can be referenced anywhere in the content of an XML
document, in which case they are called general entities. The predefined entities are all general
entities.
Entities can also be defined so that they can be referenced only in DTDs, in which case they
are called parameter entities.
The form of an entity declaration is
<!ENTITY [%] entity_name “entity_value”>
When the optional percent sign (%) is present in an entity declaration, it specifies that the
entity is a parameter entity rather than a general entity.
Example:
<!ENTITY sbs “Santhosh B Suresh”>
When an entity is longer than a few words, its text is defined outside the DTD. In such cases,
the entity is called an external text entity. The form of the declaration of an external text entity
is
<!ENTITY entity_name SYSTEM “file_location”>

A Sample DTD

NANDINI S D, GFGCW, H N PURA Page 7


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

1. Some XML parsers check documents that have DTDs in order to ensure that the
documents conform to the structure specified in the DTDs. These parsers are called
validating parsers.
2. If an XML document specifies a DTD and is parsed by a validating XML parser, and the
parser determines that the document conforms to the DTD, the document is called valid.
3. Handwritten XML documents often are not well formed, which means that they do not
follow XML’s syntactic rules.
4. Any errors they contain are detected by all XML parsers, which must report them.
5. XML parsers are not allowed to either repair or ignore errors.
6. Validating XML parsers detect and report all inconsistencies in documents relative to
their DTDs.

INTERNAL AND EXTERNAL DTDs

Internal DTD Example:


NANDINI S D, GFGCW, H N PURA Page 8
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

External DTD Example: [assuming that the DTD is stored in the file named planes.dtd]
<!DOCTYPE planes_for_sale SYSTEM “planes.dtd”>

//sampleDTD.xml
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE vtu_stud_info SYSTEM "vtu.dtd">
<VTU>
<students>
<USN> 1RN10CS090 </USN>
<name> Santhosh B S</name>
<college> RNSIT </college>
<branch> CSE </branch>
<year> 2010 </year>
<email> [email protected] </email>
</students>
<students>
<USN> 1RN0IS016 </USN>
<name> Divya K </name>
<college> RNSIT </college>
<branch> ISE </branch>
<year> 2009 </year>
<email> [email protected] </email>
</students>
</VTU>

NAMESPACES
One problem with using different markup vocabularies in the same document is that
collisions between names that are defined in two or more of those tag sets could result.
An example of this situation is having a <table> tag for a category of furniture and a <table>
tag from XHTML for information tables.
Clearly, software systems that process XML documents must be capable of unambiguously
recognizing the element names in those documents.
To deal with this problem, the W3C has developed a standard for XML namespaces (at
http://www.w3.org/TR/REC-xml-names).
NANDINI S D, GFGCW, H N PURA Page 9
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

An XML namespace is a collection of element and attribute names used in XML documents.
The name of a namespace usually has the form of a uniform resource identifier (URI).
A namespace for the elements and attributes of the hierarchy rooted at a particular element is
declared as the value of the attribute xmlns.

The form of a namespace declaration for an element is


<element_name xmlns[:prefix] = URI>
The square brackets indicate that what is within them is optional. The prefix, if included, is
the name that must be attached to the names in the declared namespace.
If the prefix is not included, the namespace is the default for the document.
A prefix is used for two reasons. First, most URIs are too long to be typed on every
occurrence of every name from the namespace. Second, a URI includes characters that are
invalid in XML.
Note that the element for which a namespace is declared is usually the root of a document.
For ex: all XHTML documents in this notes declare the xmlns namespace on the root
element, html:
<html xmlns = “http://www.w3.org/1999/xhtml”>
This declaration defines the default namespace for XHTML documents, which is
http://www.w3.org/1999/xhtml.
The next example declares two namespaces. The first is declared to be the default
namespace; the second defines the prefix, cap:

XML SCHEMAS
XML schemas is similar to DTD i.e. schemas are used to define the structure of the document
DTDs had several disadvantages:
The syntax of the DTD was un-related to XML, therefore they cannot be analysed with an
XML processor
It was very difficult for the programmers to deal with 2 different types of syntaxes
NANDINI S D, GFGCW, H N PURA Page 10
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

DTDs does not support the datatype of content of the tag. All of them are specified as text
Hence, schemas were introduced

SCHEMA FUNDAMENTALS
Schemas can be considered as a class in object oriented programming
A XML document that conforms to the standard or to the structure of the schema is similar to
an object
The XML schemas have 2 primary purposes.
o They are used to specify the structure of its instance of XML document, including which
elements and attributes may appear in instance document. It also specifies where and how often
the elements may appear
o The schema specifies the datatype of every element and attributes of XML
The XML schemas are namespace-centric

DEFINING A SCHEMA
Schemas themselves are written with the use of a collection of tags, or a vocabulary, from a
namespace that is, in effect, a schema of schemas. The name of this namespace is
http://www.w3.org/2001/XMLSchema.
Every schema has schema as its root element. This namespace specification appears as
follows:
xmlns:xsd = “http://www.w3.org/2001/XMLSchema”
The name of the namespace defined by a schema must be specified with the targetNamespace
attribute of the schema element.
targetNamespace = “http://cs.uccs.edu/planeSchema”
If the elements and attributes that are not defined directly in the schema element are to be
included in the target namespace, schema’s elementFormDefault must be set to qualified, as
follows:
elementFormDefault = “qualified”
The default namespace, which is the source of the unprefixed names in the schema, is given
with another xmlns specification, but this time without the prefix:
xmlns = http://cs.uccs.edu/planeSchema
DEFINING A SCHEMA INSTANCE
An instance document normally defines its default namespace to be the one defined in its
schema.
For example, if the root element is planes, we could have
<planes
xmlns = “http://cs.uccs.edu/planeSchema” ... >
The second attribute specification in the root element of an instance document is for the
schemaLocation attribute. This attribute is used to name the standard namespace for instances,
which includes the name XMLSchema-instance.

NANDINI S D, GFGCW, H N PURA Page 11


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

xmlns:xsi = “http://www.w3.org/2001/XMLSchema-instance”
Third, the instance document must specify the filename of the schema in which the default
namespace is defined. This is accomplished with the schemaLocation attribute, which takes two
values: the namespace of the schema and the filename of the schema.

Combining everything, we get,

AN OVERVIEW OF DATA TYPES


There are two categories of user-defined schema data types: simple and complex.
A simple data type is a data type whose content is restricted to strings. A simple type cannot
have attributes or include nested elements.
A complex type can have attributes and include other data types as child elements.
Data declarations in an XML schema can be either local or global.
A local declaration is a declaration that appears inside an element that is a child of the
schema element.
A global declaration is a declaration that appears as a child of the schema element. Global
elements are visible in the whole schema in which they are declared.
SIMPLE TYPES
Elements are defined in an XML schema with the element tag.
<xsd:element name = “engine” type = “xsd:string” />
An instance of the schema in which the engine element is defined could have the following
element:
<engine> inline six cylinder fuel injected </engine>
An element can be given a default value with the default attribute:
Constant values are given with the fixed attribute, as in the following example:
A simple user-defined data type is described in a simpleType element with the use of facets.
Facets must be specified in the content of a restriction element, which gives the base type
name.
The facets themselves are given in elements named for the facets: the value attribute specifies
the value of the facet.

NANDINI S D, GFGCW, H N PURA Page 12


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

COMPLEX TYPES
Complex types are defined with the complexType tag. The elements that are the content of an
element-only element must be contained in an ordered group, an unordered group, a choice, or a
named group. The sequence element is used to contain an ordered group of elements. Example:

A complex type whose elements are an unordered group is defined in an all element. Elements
in all and sequence groups can include the minOccurs and maxOccurs attributes to specify the
numbers of occurrences. Example:
<?xml version = “1.0” encoding = “utf-8”?>

VALIDATING INSTANCES OF SCHEMAS

XSV is an abbreviation for XML Schema Validator. If the schema and the instance document
are available on the Web, xsv can be used online, like the XHTML validation tool at the W3C
Web site. This tool can also be downloaded and run on any computer. The Web site for xsv is
http://www.w3.org/XML/Schema#XSV. The output of xsv is an XML document. When the
tool is run from the command line, the output document appears on the screen with no
formatting, so it is a bit difficult to read. The following is the output of xsv run on planes.xml:

NANDINI S D, GFGCW, H N PURA Page 13


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

XSLT STYLE SHEETS


The eXtensible Stylesheet Language (XSL) is a family of recommendations for defining the
presentation and transformations of XML documents.
It consists of three related standards:
o XSL Transformations (XSLT),
o XML Path Language (XPath), and
o XSL Formatting Objects (XSL-FO).
XSLT style sheets are used to transform XML documents into different forms or formats,
perhaps using different DTDs.
One common use for XSLT is to transform XML documents into XHTML documents,
primarily for display. In the transformation of an XML document, the content of elements can
be moved, modified, sorted, and converted to attribute values, among other things.
XSLT style sheets are XML documents, so they can be validated against DTDs.
They can even be transformed with the use of other XSLT style sheets.
The XSLT standard is given at http://www.w3.org/TR/xslt.
XPath is a language for expressions, which are often used to identify parts of XML
documents, such as specific elements that are in specific positions in the document or elements
that have particular attribute values.
XPath is also used for XML document querying languages, such as XQL, and to build new
XML document structures with XPointer. The XPath standard is given at
http://www.w3.org/TR/xpath.

OVERVIEW OF XSLT
XSLT is actually a simple functional-style programming language.
NANDINI S D, GFGCW, H N PURA Page 14
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Included in XSLT are functions, parameters, names to which values can be bound, selection
constructs, and conditional expressions for multiple selection.
XSLT processors take both an XML document and an XSLT document as input. T
he XSLT document is the program to be executed; the XML document is the input data to the
program.
Parts of the XML document are selected, possibly modified, and merged with parts of the
XSLT document to form a new document, which is sometimes called an XSL document.
The transformation process used by an XSLT processor is shown in Figure 7.5.

An XSLT document consists primarily of one or more templates.


Each template describes a function that is executed whenever the XSLT processor finds a
match to the template’s pattern.
One XSLT model of processing XML data is called the template-driven model, which works
well when the data consists of multiple instances of highly regular data collections, as with files
containing records.
XSLT can also deal with irregular and recursive data, using template fragments in what is
called the data-driven model.
A single XSLT style sheet can include the mechanisms for both the template- and data-driven
models.

NANDINI S D, GFGCW, H N PURA Page 15


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

INTRODUCTION TO CSS

CASCADING STYLE SHEETS


XHTML style sheets are called cascading style sheets because they can be defined at three
different levels to specify the style of a document. 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.

LEVELS OF STYLE SHEETS


The three levels of style sheets, in order from lowest level to highest level, are inline,
document level, and external.
Inline style sheets apply to the content of a single XHTML element.
Document-level style sheets apply to the whole body of a document.
External style sheets can apply to the bodies of any number of documents.
Inline style sheets have precedence over document style sheets, which have precedence over
external style sheets.
Inline style specifications appear within the opening tag and apply only to the content of that
tag.
Document-level style specifications appear in the document head section and apply to the
entire body of the document.
External style sheets stored separately and are referenced in all documents that use them.
External style sheets are written as text files with the MIME type text/css.
They can be stored on any computer on the Web. The browser fetches external style sheets
just as it fetches documents.
The <link> tag is used to specify external style sheets. Within <link>, the rel attribute is used
to specify the relationship of the linked-to document to the document in which the link appears.
The href attribute of <link> is used to specify the URL of the style sheet document.

EXAMPLE WHICH USES EXTERNAL Style1.css


STYLE SHEET <html> h1
<head> {
<title>Sample CSS</title> font-family: 'Lucida Handwriting'; font-size:
<link rel = "stylesheet" type = "text/css" href 50pt; color: Red;
= "Style1.css" /> }
</head>
<h1>Puneeth Rajkumar</h1>
</html>

NANDINI S D, GFGCW, H N PURA Page 16


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

EXAMPLE WHICH USES DOCUMENT LEVEL STYLE SHEET


<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
h1
{
font-family: 'Lucida Handwriting'; font-size: 50pt; color: Red;
}
</style>
</head>
<h1>Puneeth Rajkumar</h1>
</html>

EXAMPLE WHICH USES INLINE STYLE SHEET


<html>
<head>
<title>Sample CSS</title>
</head>
<h1 style ="font-family: 'Lucida Handwriting'; font-size: 50pt; color: Red;"> Puneeth Rajkumar
</h1>
</html>

NANDINI S D, GFGCW, H N PURA Page 17


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

STYLE SPECIFICATION FORMATS


Inline Style Specification:
Style = “Property1 : Value1; Property2 : Value2; Property3 : Value3; .................. Property_n :
Value_n;”
Document Style Specification:
<style type = “text/css”>
Rule list
</style>

Each style rule in a rule list has two parts: a selector, which indicates the tag or tags 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 { Property1 : Value1; Property2 : Value2; Property3 : Value3; ..................


Property_n : Value_n; } [For examples on all three levels of style sheets along with
specifications, Please refer the previous examples]

SELECTOR FORMS
Simple Selector Forms:
In case of simple selector, a tag is used. If the properties of the tag are changed, then it reflects
at all the places when used in the program. The selector can be any tag. If the new properties for
a tag are not mentioned within the rule list, then the browser uses default behaviour of a tag.
<html> }
<head> </style>
<title>Sample CSS</title> </head>
<style type = "text/css"> <body>
p <p>Puneeth Rajkumar</p>
{ <p>Mahesh Babu</p>
font-family: 'Lucida Handwriting'; <p>Suriya</p>
font-size: 50pt; </body>
color: Red; </html>

NANDINI S D, GFGCW, H N PURA Page 18


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Class Selectors:
In class selector, it is possible to give different properties for different elements
<html> font-family: 'Monotype Corsiva';
<head> font-size: 50pt;
<title>Sample CSS</title> color: green;
<style type = "text/css"> }
p.one </style>
{ </head>
font-family: 'Lucida Handwriting'; <body>
font-size: 25pt; <p class = "one">Puneeth Rajkumar</p>
color: Red; <p class = "two">Puneeth Rajkumar</p>
} </body>
p.two </html>
{

Generic Selectors:
In case of generic selector, when the class is created, it would not be associated to any particular
tag. In other words, it is generic in nature.
<html> </style>
<head> </head>
<title>Sample CSS</title> <body>
<style type = "text/css"> <p class = "one">Puneeth Rajkumar</p>
.one <h1 class = "one">Puneeth Rajkumar</h1>
{ <h6 class = "one">Puneeth Rajkumar</h6>
font-family: 'Monotype Corsiva'; </body>
color: green; </html>
}

NANDINI S D, GFGCW, H N PURA Page 19


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

id Selectors:
An id selector allows the application of a style to one specific element.
<html> font-family: 'comic sans ms';
<head> color: orange;
<title>Sample CSS</title> }
<style type = "text/css"> </style>
#one </head>
{ <body>
font-family: 'lucida calligraphy'; <p id = "two">Puneeth Rajkumar</p>
color: purple; <h1 id = "one">Puneeth Rajkumar</h1>
} </body>
#two </html>
{

Universal Selectors:
The universal selector, denoted by an asterisk (*), applies its style to all elements in a
document.
<html> </style>
<head> </head>
<title>Sample CSS</title> <body>
<style type = "text/css"> <h1>Puneeth Rajkumar</h1>
* <h2>Puneeth Rajkumar</h2>
{ <h3>Puneeth Rajkumar</h3>
font-family: 'lucida calligraphy'; <p>Puneeth Rajkumar</p>
color: purple; </body>
} </html>

NANDINI S D, GFGCW, H N PURA Page 20


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Pseudo Classes:
Pseudo class selectors are used if the properties are to be changed dynamically.
For example: when mouse movement happens, in other words, hover happens or focus happens.
<html> </html>
<head>
<title>Sample CSS</title> STEP 1: Initial
<style type = "text/css">
input:focus
{
font-family: 'lucida calligraphy';
color: purple;
font-size:100;
}
input:hover
{
font-family: 'lucida handwriting'; STEP 2:After placing mouse pointer on
color: violet; text area
font-size:40;
}
</style>
</head>
<body>
<form action = " ">
<p>
<label> NAME:
<input type = "text" />
</label>
</p> STEP 3: Enter the data
</form>
</body>

NANDINI S D, GFGCW, H N PURA Page 21


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

STEP 4: After taking away the mouse


pointer

FONT PROPERTIES

Font Families:
The font-family property is used to specify a list of font names. The browser uses the first font
in the list that it supports. For example, the property:

font-family: Arial, Helvetica, Futura


tells the browser to use Arial if it supports that font. If not, it will use Helvetica if it supports it.
If the browser supports neither Arial nor Helvetica, it will use Futura if it can. If the browser
does not support any of the specified fonts, it will use an alternative of its choosing. If a font
name has more than one word, the whole name should be delimited by single quotes, as in the
following example:
font-family: ‘Times New Roman’

Font Sizes:
The font-size property does what its name implies. For example, the following property
specification sets the font size for text to 10 points:
font-size: 10pt
Many relative font-size values are defined, including xx-small, x-small, small, medium, large,
x-large, and xx-large. In addition, smaller or larger can be specified. Furthermore, the value can
be a percentage relative to the current font size.

Font Variants:
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. These characters
are all uppercase, but the letters that are normally uppercase are somewhat larger than those that
are normally lowercase.

Font Styles:
NANDINI S D, GFGCW, H N PURA Page 22
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

The font-style property is most commonly used to specify italic, as in


font-style: italic

Font Weights:
The font-weight property is used to specify the degree of boldness, as in
font-weight: bold Besides bold, the values normal, bolder, and lighter can be specified.
Specific numbers also can be given in multiples of 100 from 100 to 900, where 400 is the same
as normal and 700 is the same as bold.

Font Shorthands:
If more than one font property must be specified, the values can be stated in a list as the value of
the font property. The order in which the property values are given in a font value list is
important. The order must be as follows: The font names must be last, the font size must be
second to last, and the font style, font variant, and font weight, when they are included, can be
in any order but must precede the font size and font names.
font: bold 14pt ‘Times New Roman’

<html> font-style:italics;
<head> }
<title>Font Properties</title> p.three
<style type = "text/css"> {
p.one font: small-caps italic bold 50pt 'times new
{ roman'
font-family: 'lucida calligraphy'; }
font-weight:bold; </style>
font-size:75pt; </head>
color: purple; <body>
} <p class = "one">Puneeth Rajkumar</p>
h1.two <h1 class = "two">Puneeth Rajkumar</h1>
{ <p class = "three">Puneeth Rajkumar</p>
font-family: 'cambria'; </body>
color: violet; </html>

NANDINI S D, GFGCW, H N PURA Page 23


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Text Decoration:
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.

<html> </style>
<head> </head>
<title>Text Decoration</title> <body>
<style type = "text/css"> <h1 class = "one">Puneeth Rajkumar</h1>
h1.one <p>[This is line-through]</p>
{ <br/>
text-decoration: line-through; <h1 class = "two">Puneeth Rajkumar</h1>
} <p>[This is overline]</p>
h1.two <br/>
{ <h1 class = "three">Puneeth
text-decoration: overline; Rajkumar</h1>
} <p>[This is underline]</p>
h1.three <br/>
{ </body>
text-decoration: underline; </html>
}

LIST PROPERTIES
Two presentation details of lists can be specified in XHTML 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. The list-
style-type property of an unordered list can be set to disc, circle, square, or none.
<html> li.one
<head> {
<title>CSS Bullets</title> list-style-type:disc
<style type = "text/css"> }
NANDINI S D, GFGCW, H N PURA Page 24
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

li.two <body>
{ <h3>South Indian Kings</h3>
list-style-type:square <ul>
} <li class = "one"> Puneeth Rajkumar</li>
li.three <li class = "two"> Mahesh Babu</li>
{ <li class = "three"> Suriya</li>
list-style-type:circle </ul>
} </body>
</style> </html>
</head>

Bullets in unordered lists are not limited to discs, squares, and circles. Any image can be used in
a list item bullet. Such a bullet is specified with the list-style-image property, whose value is
specified with the url form.
<html> </head>
<head> <body>
<title>CSS Bullets-Image</title> <h1>South Indian Kings</h1>
<style type = "text/css"> <ul>
li.image <li class = "image"> Puneeth Rajkumar</li>
{ <li class = "image"> Mahesh Babu</li>
list-style-image: url(bullet.png); <li class = "image"> Suriya</li>
font-size:25pt; </ul>
} </body>
</style> </html>

NANDINI S D, GFGCW, H N PURA Page 25


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

COLOR

Color Groups:
Three levels of collections of colours might be used by an XHTML document. The smallest
useful set of colours includes only those that have standard names and are guaranteed to be
correctly displayable by all browsers on all color monitors. This collection of 17 colours is
called the named colours.

Larger set of colors, called the Web palette, consists of 216 colors. The colors of the Web
palette can be viewed at http://www.web-source.net/216_color_chart.htm
Color Properties:
The color property is used to specify the foreground color of XHTML elements.
<html> p.three
<head> {
<title>Colours</title> background-color:#99FF00;
<style type = "text/css"> }
p.one </style>
{color: pink; </head>
} <body>
p.two <p class = "one">Puneeth Rajkumar</p>
{ <p class = "two">Puneeth Rajkumar</p>
color: # 9900FF; <p class = "three">Puneeth Rajkumar</p>
} </body>

NANDINI S D, GFGCW, H N PURA Page 26


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

</html>

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. The text-align property, for which the possible keyword
values are left, center, right, and justify, is used to arrange text horizontally.
The float property is used to specify that text should flow around some element, often an
image or a table. The possible values for float are left, right, and none, which is the default.

<html> </p>
<head> <p class = "two">Kannadada Kotyadhipathi
<title>Text Alignment</title> is a Kannada primetime quiz show hosted by
<style type = "text/css"> the power star of Kannada cinema Mr.
h1.one Puneet Rajkumar. This is the biggest game
{ show ever on Kannada Television. This
text-align: center show will be aired on Suvarna TV. This
} show gives the common man an opportunity
p.two to win Rs 1 crore. Kannadada Kotyadipathi
{ is a Kannada primetime quiz and human
text-indent: 0.5in; drama show hosted by matinee idol Puneeth
text-align: justify; Rajkumar on Suvarna TV. Contestants
} participate in a game that allows them to win
img{float:right up to Rs. 1 crore. Short-listed contestants
} play a ‘Fastest Finger First’ round to make it
</style> to the main game. From there on, they play
</head> rounds with increasing levels of difficulty,
<body> and winning higher amounts of money,
<h1 class = "one">Kannadada culminating in the Rs. 1 crore prize.
Kotyadhipathi</h1> Contestants can stop at any time having
<p> viewed the next question. Or they can avail
<img src = "kk.jpg" alt="error"/> of a 'Lifeline' and play on. Welcome to the

NANDINI S D, GFGCW, H N PURA Page 27


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

world of high stakes chills and thrills! </body>


Welcome to the world of the crorepati! </html>
</p>

THE BOX MODEL


On a given web page or a document, all the elements can have borders.
The borders have various styles, color and width.
The amount of space between the content of the element and its border is known as padding.
The space between border and adjacent element is known as margin.

Borders:
Border-style

NANDINI S D, GFGCW, H N PURA Page 28


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

It can be dotted, dashed, double


Border-top-style
Border-bottom-style
Border-left-style
Border-right-style

Border-width
It can be thin, medium, thick or any length value
Border-top-width
Border-bottom-width
Border-left-width
Border-right-width

Border-color
Border-top-color
Border-bottom-color
Border-left-color
Border-right-color

<html> </style>
<head> </head>
<title> Table with border effects </title> <body>
<style type = "text/css"> <table border = "border">
table <caption>PARAMATHMA </caption>
{ <tr>
border-width:thick; <td> Puneeth Rajkumar </td>
border-top-color:red; <td> <img src = "puneeth.jpg" alt = "cant
border-left-color:orange; display"/>
border-bottom-color:violet; </td>
border-right-color:green; </tr>
border-top-style:dashed; </table>
border-bottom-style:double; </body>
border-right-style:dotted; </html>
}

NANDINI S D, GFGCW, H N PURA Page 29


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

BACKGROUND IMAGES
The background-image property is used to place an image in the background of an element.
<html> be aired on Suvarna TV. This show gives
<head> the common man an opportunity to win Rs 1
<title>Background Image</title> crore. Kannadada Kotyadipathi is a Kannada
<style type = "text/css"> primetime quiz and human drama show
body hosted by matinee idol Puneeth Rajkumar on
{ Suvarna TV. Contestants participate in a
background-image:url(bg3.jpg); game that allows them to win up to Rs. 1
} crore. Short-listed contestants play a ‘Fastest
p Finger First’ round to make it to the main
{ game. From there on, they play rounds with
text-align: justify; color:white;font- increasing levels of difficulty, and winning
size:25pt; higher amounts of money, culminating in
} the Rs. 1 crore prize. Contestants can stop at
</style> any time having viewed the next question.
</head> Or they can avail of a 'Lifeline' and play on.
<body> Welcome to the world of high stakes chills
<p > and thrills! Welcome to the world of the
Kannadada Kotyadhipathi is a Kannada crorepati!
primetime quiz show hosted by the power </p>
star of Kannada cinema Mr. Puneet </body>
Rajkumar. This is the biggest game show </html>
ever on Kannada Television. This show will

NANDINI S D, GFGCW, H N PURA Page 30


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Display positioning in css:


The position property in CSS tells about the method of positioning for an element or an
HTML entity and the positioning of an element can be done using the top, right, bottom, and
left properties. These specify the distance of an HTML element from the edge of the
viewport.
There are five different types of position properties available in CSS:
 Fixed position: Any HTML element with position: fixed property will be positioned
relative to the viewport. An element with fixed positioning allows it to remain in the same
position even we scroll the page. We can set the position of the element using the top,
right, bottom, and left.
 Static: This method of positioning is set by default. If we don’t mention the method of
positioning for any element, the element has the position: static method by default. By
defining Static, the top, right, bottom, and left will not have any control over the element.
The element will be positioned with the normal flow of the page.
 Relative: An element with position: relative is positioned relatively with the other
elements which are sitting on top of it. If we set its top, right, bottom, or left, other
elements will not fill up the gap left by this element. An element with its position set to
relative and when adjusted using top, bottom, left, and right will be positioned relative to
its original position.
 Absolute: An element with position: absolute will be positioned with respect to
its nearest Non-static ancestor. The positioning of this element does not depend upon its
siblings or the elements which are at the same level.

NANDINI S D, GFGCW, H N PURA Page 31


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

 Sticky: Element with position: sticky and top:0 played a role between fixed &
relative based on the position where it is placed. If the element is placed in the middle of
the document then when the user scrolls the document, the sticky element start scrolling
until it touched the top. When it touches the top, it will be fixed at the top place in spite of
further scrolling. we can stick the element at the bottom, with the bottom property.
Example 1: The below example illustrates the CSS positioning element by using the position:
fixed property.
<!DOCTYPE html> <pre>
<html> Learn the most common Data Structures &
Algorithms to solve coding problems. Enrol
<head> now! Master core Data Structures &
<title> CSS Positioning Element</title> Algorithms to ace interviews from IIT &
<style> Stanford Alumni. TA Support. Placements
body { in Companies. Get Certified. 350+
margin: 0; Problems.A data structure is a particular
padding: 20px; way of organizing data in a computer so
font-family: sans-serif; that it can be used effectively. Learn the
background: #efefef; most common Data Structures &
} Algorithms to solve coding problems. Enrol
now! Master core Data Structures &
.fixed { Algorithms to ace interviews from IIT &
position: fixed; Stanford Alumni. TA Support. Placements
background: #cc0000; in Companies. Get Certified. 350+
color: #ffffff; Problems.A data structure is a particular
padding: 30px; way of organizing data in a computer so
top: 50; that it can be used effectively.
left: 10; Learn the most common Data Structures &
} Algorithms to solve coding problems. Enrol
now! Master core Data Structures &
span { Algorithms to ace interviews from IIT &
padding: 5px; Stanford Alumni. TA Support. Placements
border: 1px #ffffff dotted; in Companies. Get Certified. 350+
} Problems.A data structure is a particular
</style> way of organizing data in a computer so
</head> that it can be used effectively. Learn the
most common Data Structures &
<body> Algorithms to solve coding problems. Enrol
<div class="fixed">This div has now! Master core Data Structures &
<span>position: fixed;</span> Algorithms to ace interviews from IIT &
</div> Stanford Alumni. TA Support. Placements

NANDINI S D, GFGCW, H N PURA Page 32


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

in Companies. Get Certified. 350+ </pre>


Problems.A data structure is a particular </body>
way of organizing data in a computer so </html>
that it can be used effectively.

Output:

CSS floats:
The float CSS property is used to position the elements to the left, right, of its container along
with permitting the text and inline elements to wrap around it. The float property defines the
flow of content in the page. The remaining elements will be part of the flow if the element is
removed from the normal flow of the content. This property is ignored by the absolutely
positioned elements. It can be written in a CSS file or can be directly specified in the style of
an element.
Syntax:
float: none|left|right|initial|inherit;
Property values:
 none: This is the default value & the element does not float.
 left: Element floats on the left side of the container.
 right: Element floats on the right side of the container.
 initial Element will be set to its default value.
 inherit: Element inherits floating property of its parent property.
We will use the above property values & understand their usage through the example.
left: The element will be positioned to the left side of its containing block.
right: The element will be positioned to the right side of its containing block.
NANDINI S D, GFGCW, H N PURA Page 33
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<!DOCTYPE html> GFGCW


<html> </div>
<head> <div class="GFGCW"
<title>Float</title> style="font-size:40px;
</head> color:#006400;
<body> float:right;">
<div class="GFGCW" GFGCW
style="font-size:40px; </div>
color:#006400; </body>
float:left;"> </html>

none: The element remains the same as it is declared ie it will no effect on the element & this
is the default value.
inherit: It is used to inherit a property to an element from its parent element property value.
<!DOCTYPE html> </div>
<html> <div style="float:right">
<head> <div class="GFGCW"
<title>Float</title> style="font-size:40px;
</head> color:#006400;
<body> float:inherit;">
<div class="GFGCW" GFGCW
style="font-size:40px; </div>
color:#006400; </body>
float:none;"> </html>
GFGCW

NANDINI S D, GFGCW, H N PURA Page 34


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

CSS Gradients
The Gradient in CSS is a special type of image that is made up of progressive & smooth
transition between two or more colors. CSS is the way to add style to various web documents.
By using the gradient in CSS, we can create variants styling of images which can help to make
an attractive webpage.
The Gradients can be categorized into 2 types:

The linear-gradient can be implemented in the following ways:


Top to Bottom: In this image, the transition started with white color and ended with green
color. On exchanging the color sequence, the transition will start with green and will end with
white.
Left to Right: In this image, the transition started from left to right. It starts from white
transitioning to green.
Diagonal: This transition started from top-left to bottom-right. It starts with the green
transition to white. For the diagonal gradient, need to specify both horizontal and vertical
starting positions.
Repeating Linear Gradient: CSS allows the user to implement multiple linear gradients
using a single function repeating-linear-gradient(). The image here contains 3 colors in each
transition with some percentage value.

Angles on Linear Gradients: CSS allows the user to implement directions in Linear
Gradients rather than restricting themselves to predefined directions.

Example: This example illustrates the linear-gradient that starts from the top & ends at the
bottom, initiating from the white color, transitioning to the green color.
<!DOCTYPE html> <head>
<html> <title>CSS Gradients</title>
NANDINI S D, GFGCW, H N PURA Page 35
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<style> font-size: 17px;


#main { text-align: center;
height: 200px; }
background-color: white; </style>
background-image: linear- </head>
gradient(white, green); <body>
} <div id="main">
.gfg { <div class="gfg">GFGCW</div>
text-align: center; <div class="geeks">
font-size: 40px; A computer science portal for gfgcw
font-weight: bold; </div>
padding-top: 80px; </div>
} </body>
.geeks { </html>

Linear Gradients: It includes the smooth color transitions to going up, down, left, right, and
diagonally. The minimum two-color required to create a linear gradient. More than two color
elements can be possible in linear gradients. The starting point and the direction are needed
for the gradient effect
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS Radial Gradients: A radial gradient differs from a linear gradient. It starts at a single
point and emanates outward. By default, the gradient will be elliptical shape, the size will be
farthest-corner the first color starts at the center position of the element and then fades to the
end color towards the edge of the element. Fade happens at an equal rate until specified.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

The radial-gradient can be implemented in the following ways:


Radial Gradient – evenly spaced color stops: In CSS, by default, the fade happens at an
equal rate. The following figure shows the Radial Gradient with even color stops.
Color stops: Color stops inform the browsers that what color to use, at the starting point of
the gradient & where to stop. By default, they are equally spaced but we can overrule it by
providing the specific color stops.

NANDINI S D, GFGCW, H N PURA Page 36


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Example: This example illustrates the radial-gradient having evenly spaced color stops.
<!DOCTYPE html> }
<html>
<head> .geeks {
<title>CSS Gradients</title> font-size: 17px;
<style> text-align: center;
#main { }
height: 350px; </style>
width: 700px; </head>
background-color: white;
background-image: radial- <body>
gradient(#090, <div id="main">
#fff, #2a4f32); <div class="gfgcw">GFGCW</div>
} <div class="gfgcw">
computer science portal for gfgcw
.gfg { </div>
text-align: center; </div>
font-size: 40px; </body>
font-weight: bold; </html>
padding-top: 80px;

Radial Gradient- unevenly spaced color stops: CSS allows the user to have variation in
spacing of color stops while applying the radial-gradient feature.
Example: This example illustrates the radial-gradient having unevenly spaced color stops.
<!DOCTYPE html> width: 100%;
<html> background-color: white;
<head> background-image: radial-
<title>CSS Gradients</title> gradient(#090
<style> 40%, #fff, #2a4f32);
#main { }
height: 350px;
NANDINI S D, GFGCW, H N PURA Page 37
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

.gfg { </head>
text-align: center; <body>
font-size: 40px; <div id="main">
font-weight: bold; <div class="gfg">GFGCW</div>
padding-top: 80px; <div class="GFG">
} A computer science portal for
.GFGCW { GFGCW
font-size: 17px; </div>
text-align: center; </div>
} </body>
</style> </html>

SHADOWS:
Shadows having to types
Box Shadow
Drop Shadow

Box Shadow
 Box shadow is a CSS property that allows you to add shadow effects to elements on a web
page.
 This property allows you to specify the horizontal and vertical offset of the shadow, the
blur radius, and the color of the shadow. You can also specify multiple shadows, which can
be used to create more complex effects.
Syntax:
box-shadow: h-offset v-offset blur spread color;

 Parameters:
 Horizontal offset: The distance the shadow is offset to the right of the element.
 Vertical offset: The distance the shadow is offset below the element.
 Blur radius: The amount of blur applied to the shadow.
 Spread radius: The amount by which the shadow is spread out.

NANDINI S D, GFGCW, H N PURA Page 38


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

 Color: The color of the shadow.

Example of Box Shadow: This example illustrates the use of the box-shadow property where
properties such as h-offset, v-offset, blur, spread & color are applied along with their values.
<!DOCTYPE html> <h4>GFGCW</h4>
<html lang="en"> </div>
<div class="box-2">
<head> <h4>GFGCW</h4>
<meta charset="UTF-8"> </div>
<meta name="viewport" <div class="box-3">
content="width=device-width, <h4>GFGCW</h4>
initial-scale=1.0"> </div>
<title>Box-Shadow Example</title> <div class="box-4">
<link rel="stylesheet" href="./style.css"> <h4>GFGCW</h4>
</head> </div>
</body>
<body>
<div class="box-1"> </html>

Drop Shadow
 A drop shadow is a specific type of box shadow that is used to give an element the
appearance of being elevated above the page or other elements.drop-shadow() is CSS
filter function that creates a shadow that conforms to the shape
 Drop shadows have offset values but no blur or spread, so they appear as a dark shape
directly below/behind the element casting the shadow.
Syntax:
drop-shadow(<shadow>)

 Parameters:
 Horizontal offset: The distance the shadow is offset to the right of the element.
 Vertical offset: The distance the shadow is offset below the element.
 Blur radius: The amount of blur applied to the shadow.
 Color: The color of the shadow.

NANDINI S D, GFGCW, H N PURA Page 39


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Example of Drop-Shadow: This example illustrates the use of the drop-shadow property
where properties such as h-offset, v-offset, blur, & color are applied along with their values.
<!DOCTYPE html> <h4>GFGCW</h4>
<html lang="en"> </div>
<head> <div class="box-3">
<meta charset="UTF-8"> <h4>GFGCW</h4>
<meta name="viewport" </div>
content="width=device-width, <div class="box-4">
initial-scale=1.0"> <h4>GFGCW</h4>
<title>Document</title> </div>
<link rel="stylesheet" href="./style.css"> </body>
</head> </html>
<body>
<div class="box-2">

2D and 3 Transform
CSS 2D Transforms
A transformation in CSS is used to modify an element by its shape, size and position. It
transforms the elements along the X-axis and Y-axis. There are 6 main types of transformation
which are listed below:
 translate()
 rotate()
 scale()
 skewX()
 skewY()
 matrix()
We will implement all these functions & will understand their concepts through the examples.
translate() Method: The translate() method is used to move the element from its actual
position along the X-axis and Y-axis.
rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise
according to a given degree. The degree is given in the parenthesis.
Counter-clockwise rotation: Use negative values to rotate the element counter clockwise.

NANDINI S D, GFGCW, H N PURA Page 40


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

scale() Method: It is used to increase or decrease the size of an element according to the
parameter given for the width and height.
skewX() Method: This method is used to skew an element in the given angle along the X-
axis.
skewY() Method: This method is used to skew an element in the given angle along the Y-
axis.
skew() Method: This method skews an element in the given angle along the X-axis and the
Y-axis. The following example skews the element 20 degrees along the X-axis and 10 degrees
along the Y-axis.
matrix() Method: This method combines all the 2D transform property into a single property.
The matrix transform property accepts six parameters as matrix( scaleX(), skewY(), skewX(),
scaleY(), translateX(), translateY() ).

CSS 3D Transforms
It allows changing elements using 3D transformations. In 3D transformation, the elements are
rotated along X-axis, Y-axis, and Z-axis. There are three main types of transformation which
are listed below:
 rotateX()
 rotateY()
 rotateZ()
The rotateX() Method: This rotation is used to rotate an element around X-axis at a given
degree.
The rotateY() Method: This method is used to rotate an element around Y-axis at given
degrees.
The rotateZ() Method: This method is used to rotate an element around Z-axis at a given
degree.

CSS Transitions
Transitions in CSS allow us to control the way in which transition takes place between the two
states of the element. For example, when hovering your mouse over a button, you can change
the background color of the element with help of CSS selector and pseudo-class. We can
change any other or combination of properties, though. The transition allows us to determine
how the change in color takes place. We can use the transitions to animate the changes and
make the changes visually appealing to the user and hence, giving a better user experience and
interactivity. In this article, we will show you how to animate the transition between the CSS
properties. There are four CSS properties that you should use, all or in part (at least two,
transition-property and transition-duration, is a must), to animate the transition. All these
properties must be placed along with other CSS properties of the initial state of the element:

NANDINI S D, GFGCW, H N PURA Page 41


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

1. transition-property: This property allows you to select the CSS properties which you want
to animate during the transition(change).
Syntax:
transition-property: none | all | property | property1,
property2, ..., propertyN;

 Values:
 none is used to specify that no property should be selected.
 all is used to specify all the properties to be selected, though not all properties are
animate-able, only the properties which are animate-able will be influenced.
 We can specify a single property or a set of comma-separated
properties property1, property2, …, propertyN.

2. transition-duration: This property allows you to determine how long it will take to
complete the transition from one CSS property to the other.
Syntax:
transition-duration: time;
 Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the
number (without quotes).

3. transition-timing-function: This property allows you to determine the speed of change and
the manner of change, during the transition. Like, the change should be fast at the beginning
and slow at the end, etc.
Syntax:
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;

4. transition-delay: This property allows you to determine the amount of time to wait before
the transition actually starts to take place.
Syntax:
transition-delay: time;
 Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’
after the number (without quotes).

The Shorthand Property You can combine all the four transition properties mentioned
above, into one single shorthand property, according to the syntax given below. This saves us
from writing long codes and prevents from getting messy. Note the ordering of property, it has
significance.
Syntax:
transition: (property name) | (duration) | (timing function) | (delay);

NANDINI S D, GFGCW, H N PURA Page 42


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

The value is taken by are same as mentioned above. This property must be placed with other
CSS properties, if any, of the initial state. You should use at least, property
name and duration to get any animate-able effect. Also, the ordering of the values matters.
The first value is of the property name, second for the duration and so on, as listed above. So,
if only one number is mentioned, it will be taken up as duration, and not as a delay.

CSS Animations
CSS Animation: CSS Animations is a technique to change the appearance and behavior of
various elements in web pages. It is used to control the elements by changing their motions or
display. It has two parts, one contains the CSS properties which describe the animation of the
elements and the other contains certain keyframes which indicate the animation properties of
the element and the specific time intervals at which those have to occur.
What is a Keyframe?
Keyframes are the foundations with the help of which CSS Animations work. They define the
display of the animation at the respective stages of its whole duration. For example: In the
first example code, the paragraph changes its color with time. At 0% completion, it is red, at
50% completion it is of orange color and at full completion i.e. at 100%, it is brown.
Syntax:
/*property-name*/: /*value*/;

Animation Properties:
There are certain animation properties given below:
 animation-name: It is used to specify the name of the @keyframes describing the
animation.
 animation-duration: It is used to specify the time duration it takes animation to complete
one cycle.
 animation-timing-function: It specifies how animations make transitions through
keyframes. There are several presets available in CSS which are used as the value for the
animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out.
 animation-delay: It specifies the delay of the start of an animation.
 animation-iteration-count: This specifies the number of times the animation will be
repeated.
 animation-direction: It defines the direction of the animation. animation direction can
be normal, reverse, alternate, and alternate-reverse.
 animation-fill-mode: It defines how styles are applied before and after animation. The
animation fill mode can be none, forwards, backwards, or both.
 animation-play-state: This property specifies whether the animation is running or paused.

Example : This example describes the CSS Animation Properties using the animation-
timing-function property.

NANDINI S D, GFGCW, H N PURA Page 43


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<!DOCTYPE html> }
<html> #four {
<head> animation-timing-function: ease-
<style> out;
.gfgcw { }
font-size: 40px; #five {
text-align: center; animation-timing-function: ease-in-
font-weight: bold; out;
color: #090; }
padding-bottom: 5px; @keyframes text {
font-family: Times New Roman; from {
} margin-left: 60%;
.gfgcw1 { }
font-size: 17px;
font-weight: bold; to {
text-align: center; margin-left: 0%;
font-family: Times New Roman; }
} }
h2 { </style>
width: 350px; </head>
animation-name: text; <body>
animation-duration: 4s; <div class="gfgcw">GFGCW</div>
animation-iteration-count: infinite; <div class="gfgcw1">A computer
background-color: rgb(255, 210, science portal</div>
85); <h2 id="one">This text is ease.</h2>
} <h2 id="two">This text is linear.</h2>
#one { <h2 id="three">This text is ease-
animation-timing-function: ease; in.</h2>
} <h2 id="four">This text is ease-
#two { out.</h2>
animation-timing-function: linear; <h2 id="five">This text is ease-in-
} out.</h2>
#three { </body>
animation-timing-function: ease-in; </html>

NANDINI S D, GFGCW, H N PURA Page 44


WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

NANDINI S D, GFGCW, H N PURA Page 45

You might also like