UNIT - 2

Introduction to XML: XML Syntax, XML Tree, Elements, Attributes, Namespace, Parser,
XSLT DOM, DTD, Schema.
Introduction to CSS, CSS syntax, CSS selectors, CSS Background Cursor, CSS text fonts, CSS-
List Tables, CSS Box Modeling, Display Positioning, Floats, CSS Gradients, Shadows, 2D and
3 Transform, Transitions, CSS Animations.

XML
- XML stands for Extensible Mark-up Language, developed by W3C in 1996. It is a text-based
mark-up language derived from Standard Generalized Mark-up Language (SGML). XML 1.0
was officially adopted as a W3C recommendation in 1998. XML was designed to carry data,
not to display data. XML is designed to be self-descriptive. XML is a subset of SGML that can
define your own tags. A Meta Language and tags describe the content. XML Supports CSS,
XSL, DOM. XML does not qualify to be a programming language as it does not performs any
computation or algorithms. It is usually stored in a simple text file and is processed by special
software that is capable of interpreting XML.
The Difference between XML and HTML
1. HTML is about displaying information, where as XML is about carrying information. In
other words, XML was created to structure, store, and transport information. HTML was
designed to display thedata.
2. Using XML, we can create own tags where as in HTML it is not possible instead it offers
several built intags.
3. XML is platform independent neutral and language independent.
4. XML tags and attribute names are case-sensitive where as in HTML it isnot.
5. XML attribute values must be single or double quoted where as in HTML it is not
compulsory.
6. XML elements must be properlynested.
7. All XML elements must have a closingtag.
Well Formed XML Documents
A "Well Formed" XML document must have the following correct XML syntax:
- XML documents must have a rootelement
- XML elements must have a closing tag(start tag must have matching endtag).
- XML tags are casesensitive
- XML elements must be properly nestedEx:<one><two>Hello</two></one>
- XML attribute values must bequoted
XML with correct syntax is "Well Formed" XML. XML validated against a DTD is "Valid"
XML.
An Example XML Document
The image above represents books in this XML:
--------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
XML documents are formed as element trees.
An XML tree starts at a root element and branches from the root to child elements.
All elements can have sub elements (child elements):
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
The terms parent, child, and sibling are used to describe the relationships between
elements.
Parents have children. Children have parents. Siblings are children on the same
level (brothers and sisters)

Attributes
An attribute specifies a single property for the element, using a name/value pair.
An XML-element can have one or more attributes. For example:
<a href="http://www.tutorialspoint.com/">Tutorialspoint!</a>
Here href is the attribute name and http://www.tutorialspoint.com/ is attribute
value.
Syntax Rules for XML Attributes
Attribute names in XML (unlike HTML) are case sensitive. That is, HREF and href are
considered two different XML attributes.
Same attribute cannot have two values in a syntax. The following example shows
incorrect syntax because the attribute b is specified twice:
<a b="x" c="y" b="z">....</a>
Attribute names are defined without quotation marks, whereas attribute values must
always appear in quotation marks. Following example demonstrates incorrect xml
syntax:
<a b=x>....</a>
In the above syntax, the attribute value is not defined in quotation marks
XML Namespace
XML document allows us to create our own XML elements with our own element names.
This can result in naming collision i.e., different XML elements can have the same name in one
XML document. For example:
<?xml version=”1.0”>
<college>
<staff>
<name>aaa</name>
<dept>CSE</dept>
</staff>
<student>
<name>bbb</name>
<dept>CSE</dept>
</student>
</college>
In the above example the XML elements <name> and <dept> of both staff and student have
the common element names. This could provide naming collisions. To solve such problems in
XML
documents, we use the “XML Namespaces”. The XML namespaces allows us to prevent
collision
by differentiating the elements with same names by using namespace prefixes.
The xmlns attribute:
XML namespaces use the keyword xmlns to create namespace prefixes and assign
corresponding URI that uniquely identifies the namespace. For the above example we can
define the
namespace prefixes to avoid naming collisions.
<?xml version=”1.0”>
<college xmlns:staff=”web technologies:staffInfo”
xmlns:student=”web technologies:studentInfo”>
<staff>
< staff:name>aaa</ staff:name>
< staff:dept>CSE</ staff:dept>
</staff>
<student>
< student:name>bbb</ student:name>
< student:dept>CSE</ student:dept>
</student>
</college>
XML Parsers
An XML parser converts an XML document into an XML DOM object - which can then be
manipulated with a JavaScript.
Two types of XML parsers:
➢ ValidatingParser
• It requires document type declaration
• It generates error if document doesnot
o Conform with DTDand
o Meet XML validityconstraints
➢ Non-validating Parser
• It checks well-formedness for xmldocument
• It can ignore externalDTD
What is XML Parser?
XML Parser provides way how to access or modify data present in an XML document. Java
provides multiple options to parse XML document. Following are various types of parsers
which are commonly used to parse XML documents.
Types of parsers:
• Dom Parser - Parses the document by loading the complete contents of the document and
creating its complete hiearchical tree inmemory.
• SAX Parser - Parses the document on event based triggers. Does not load the complete
document into thememory.
• JDOM Parser - Parses the document in similar fashion to DOM parser but in more easier
way.
• StAX Parser - Parses the document in similar fashion to SAX parser but in more efficient
way.
• XPath Parser - Parses the XML based on expression and is used extensively in
conjuction withXSLT.
• DOM4J Parser - A java library to parse XML, XPath and XSLT using Java Collections
Framework , provides support for DOM, SAX andJAXP
XSL:
XSL (EXtensible Stylesheet Language) is a styling language for XML.
XSLT stands for XSL Transformations. CSS = Style Sheets for HTML
HTML uses predefined tags. The meaning of, and how to display each tag is well
understood.
CSS is used to add styles to HTML elements.
XSL = Style Sheets for XML
XML does not use predefined tags, and therefore the meaning of each tag is not well
understood.
A <table> element could indicate an HTML table, a piece of furniture, or something else -
and browsers do not know how to display it!
So, XSL describes how the XML elements should be displayed.
What is XSLT?
XSLT stands for XSL Transformations
XSLT is the most important part of XSL
XSLT transforms an XML document into another XML document
XSLT uses XPath to navigate in XML documents
XSLT is a W3C Recommendation
Example:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="book.xsl"?>
<book_store>
<book>
<title>JAVA</title>
<author>James</author>
</book>
<book>
<title>DBMS</title>
<author>Raghu</author>
</book>
</book_store>
Save the above code as “book.xml” and prepare the style sheet for this xml file.
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Book Details</h2>
<table border="1">
<tr>
<th>Title</th>
<th>Author</th>
</tr>
<xsl:for-each select="book_store/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Save the above file as “book.xsl”
Now open “book.xml” file through any browser, observe the output as given below
Title Author
Java James
DBMS Raghu

DOM-Document Object Model

The Document Object Model protocol converts an XML document into a collection of
objects in your program. XML documents have a hierarchy of informational units called
nodes; this hierarchy allows a developer to navigate through the tree looking for specific
information. Because it is based on a hierarchy of information, the DOM is said to be tree
based. DOM is a way of describing those nodes and the relationships between them.
You can then manipulate the object model in any way that makes sense. This mechanism is
also known as the "random access" protocol, because you can visit any part of the data at any
time. You can then modify the data, remove it, or insert new data.
The XML DOM, on the other hand, also provides an API that allows a developer to add, edit,
move, or remove nodes in the tree at any point in order to create an application. A DOM
parser creates a tree structure in memory from the input document and then waits for requests
from client. A DOM parser always serves the client application with the entire document no
matter how much is actually needed by the client. With DOM parser, method calls in client
application have to be explicit and forms a kind of chained method calls.
Document Object Model is for defining the standard for accessing and manipulating XML
documents. XML DOM is used for
• Loading the xmldocument
• Accessing the xmldocument
• Deleting the elements of xmldocument
• Changing the elements of xml document
According to the DOM, everything in an XML document is a node. It considers
• The entire document is a documentnode
• Every XML element is an elementnode
• The text in the XML elements are textnodes
• Every attribute is an attributenode
• Comments are comment nodes
The W3C DOM specification is divided into three major parts:
DOM Core- This portion defines the basic set of interfaces and objects for any structured
documents.
XML DOM- This part specifies the standard set of objects and interfaces for XML
documents only.
HTML DOM- This part specifies the objects and interfaces for HTML documents only.
DOM Levels
• Level 1 Core: W3C Recommendation, October1998
✓ It has feature for primitive navigation and manipulation of XMLtrees
✓ other Level 1 features are: All HTMLfeatures
• Level 2 Core: W3C Recommendation, November2000
✓ It adds Namespace support and minor newfeatures

✓ other Level 2 features are: Events, Views, Style, Traversal andRange

• Level 3 Core: W3C Working Draft, April2002
✓ It supports: Schemas, XPath, XSL, XSLT
We can access and parse the XML document in two ways:
➢ Parsingusing DOM (treebased)
➢ Parsing using SAX (Eventbased)
Parsing the XML doc. using DOM methods and properties are called as tree based approach
whereas using SAX (Simple Api for Xml) methods and properties are called as event based
approach.
DOM Document Object
✓ There are12 types of nodes in a DOM Documentobject
1. Document node
2. Elementnode
3. Textnode
4. Attributenode
5. Processing instructionnode
6. CDATA Sectionnode
7. EntityReferencenode
8. Entitynode
9. Commentnode
10. DocumentTypenode
11. DocumentFragmentnode
12. Notationnode
- Store the entire document in memory, It is memoryinefficient
- AsDomwaswrittenforanylanguage,methodnamingconventionsdon‘tfollowstandard java
Programming conventions
DOM or SAX
DOM
- Suitable forsmalldocuments
- Easily modifydocument
- Memory intensive;Load the complete XMLdocument
SAX
- Suitable for large documents; saves significant amounts ofmemory
- Only traverse document once, start toend
- Eventdriven
- Limited standardfunctions.

DTD
XML DTD: (Document Type Definition)
An XML document with correct syntax is called "Well Formed".
An XML document validated against a DTD is both "Well Formed" and "Valid".
A "Valid" XML document is a "Well Formed" XML document, which also conforms to
the rules of a DTD.
DTD is the basic building block of XML.
The purpose of a DTD is to define the structure of an XML document. It defines the
structure with a list of legal elements.

There are two different document type definitions that can be used with XML:
DTD - The original Document Type Definition
XML Schema - An XML-based alternative to DTD
A document type definition defines the rules and the legal elements and attributes for an
XML document.
Syntax of DTD:
<!DOCTYPE ROOTELEMENT[
<!ELEMENT ELEMENT_NAME1(subelement1,subelement2….)>
<!ELEMENT ELEMENT_NAME2(subelement1,subelement2….)>
.
.
<!ELEMENT ELEMENT_NAMEn(subelement1,subelement2….)>
]>
There are two types of DTD:
1. Internal DTD.
2. External DTD.
Internal DTD is the one in which we specify the DTD within the XML document. The scope
of Internal DTD is limited to one document only.
Example:
<?xml version=”1.0”?>
<!DOCTYPE document[
<!ELEMENT document (customer)*>
<!ELEMENT customer (name,date,orders)>
<!ELEMENT name (firstname,lastname)>
<!ELEMENT firstname(#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT orders (item)*>
<!ELEMENT item (product,number,price)>
<!ELEMENT product (#PCDATA)>
<!ELEMENT number (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<document>
<customer>
<name>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</name>
<date>01 jan 2017</date>
<orders>
<item>
<product>Chocolates</product>
<number>777</number>
<price>250</price>
</item>
<item>
<product>Sweets</product>
<number>888</number>
<price>450</price>
</item>
</orders>
</customer>
</document>

External DTD is the one where DTD is specified as a separate file and is saved with .dtd
extension and contains only set of rules. To import the DTD file into XML we include the
below
statement in XML file:
<!DOCTYPE ROOT_ELEMENT SYSTEM “filename.dtd”>
Example:
Extern.dtd:
<!ELEMENT document (customer)*>
<!ELEMENT customer (name,date,orders)>
<!ELEMENT name (firstname,lastname)>
<!ELEMENT firstname(#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT orders (item)*>
<!ELEMENT item (product,number,price)>
<!ELEMENT product (#PCDATA)>
<!ELEMENT number (#PCDATA)>
<!ELEMENT price (#PCDATA)>
Cust.xml:
<?xml version=”1.0”?>
<!DOCTYPE document SYSTEM “extern.dtd”>
<document>
<customer>
<name>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</name>
<date>01 jan 2017</date>
<orders>
<item>
<product>Chocolates</product>
<number>777</number>
<price>250</price>
</item>
<item>
<product>Sweets</product>
<number>888</number>
<price>450</price>
</item>
</orders>
</customer>
</document>
Specifying attributes in a DTD:
We can specify the attributes of the elements in DTD by using <!ATTLIST> element. This
element holds a list of attributes for an element. We can specify default values for the attribute
and
also can specify whether the attribute is necessary for an element or not. The format of defining
an
attribute in DTD is:
<!ATTLIST ELEMENT_NAME ATTRIBUTE_NAME TYPE DEFAULT_VALUE>
The value supplied for attribute can be:
Value – The default value of an attribute.
#REQUIRED – The attribute is required.
#IMPLIED – The attribute is not required.
#FIXEDVALUE – The attribute value is fixed.
The default type used for attributes is unparsed character data.
Example:
<?xml version=”1.0”?>
<!DOCTYPE document[
<!ELEMENT document (customer)*>
<!ELEMENT customer (name,date,orders)>
<!ELEMENT name (firstname,lastname)>
<!ELEMENT firstname(#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT orders (item)*>
<!ELEMENT item (product,number,price)>
<!ELEMENT product (#PCDATA)>
<!ELEMENT number (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ATTLIST customer nationality CDATA “INDIAN”
Age CDATA #IMPLIED
Type CDATA #REQUIRED>
]>
<document>
<customer>
<name>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</name>
<date>01 jan 2017</date>
<orders>
<item>
<product>Chocolates</product>
<number>777</number>
<price>250</price>
</item>
<item>
<product>Sweets</product>
<number>888</number>
<price>450</price>
</item>
</orders>
</customer>
</document>
XML Schema:
An XML schema describes the structure of an XML document. XML schema is an XML-based
alternative to DTD.
Limitations of DTD:
1. DTD’s do not have the angled bracket syntax.
2. We cannot use multiple DTD’s to validate one XML document.
3. DTD’s have very limited basic types.
4. DTD’s are not object oriented.
An XML schema language is also referred to as “XML Schema Definition(XSD)”. An XML
schema begins by declaring the XML schema namespace as follows:
<xsd:schema xmlns:xsd=http://www.w3.org/2001/XMLSchema>
Defining an Element:
There are two types of elements defined in an XML schema. They are:
1. Simple elements.
2. Complex elements.
1. Simple Elements:
Simple elements can contain only data and they cannot have sub elements or attributes.
The text they contain can be of various data types. The format for defining a simple element
is:
<xsd:element name=”element_name” type=”xsd:type”/>
2. Complex Elements:
Complex elements can contain sub elements or attributes. The complex elements are
made up of simple elements. The format of defining a complex element is:
<xsd:complexType name=”element_name”>
<xsd:sequence>
<xsd:element name=”element_name” type=”xsd:type”/>
<xsd:element name=”element_name” type=”xsd:type”/>
</xsd:sequence>
</xsd:complexType>
Example of XML schema:
St.xsd:
<?xml version=”1.0”?>
<xsd:schema xmlns:xsd=http://www.w3.org/2001/XMLSchema>
<xsd:complexType name=”student”>
<xsd:sequence>
<xsd:complexType name=”studentType”>
<xsd:sequence>
<xsd:element name=”rollnumber” type=”xsd:string”/>
<xsd:element name=”name” type=”xsd:string”/>
<xsd:element name=”marks” type=”xsd:integer”/>
<xsd:element name=”result” type=”xsd:string”/>
</xsd:sequence>
</xsd:complexType>
</xsd:sequence>
</xsd:complexType>
</xsd:schema>
studentInfo.xml:
<?xml version=”1.0”?>
<rootxmlns:xsi=http://www.w3.org/2000.10.XMLSchema-instance
xsi:schemalocation=”st.xsd”>
<student>
<studentType>
<rollno>95A0</rollno>
<name>aaa</name>
<marks>500</marks>
<result>Firstclass</result>
</studentType>
<studentType>
<rollno>95A1</rollno>
<name>bbb</name>
<marks>450</marks>
<result>Firstclass</result>
</studentType>
</student>
studentInfo.xml:
<?xml version=”1.0”?>
<root xmlns:xsi=http://www.w3.org/2000.10.XMLSchema-instance
xsi:schemalocation=”st.xsd”>
<student>
<studentType>
<rollno>95A0</rollno>
<name>aaa</name>
<marks>500</marks>
<result>Firstclass</result>
</studentType>
<studentType>
<rollno>95A1</rollno>
<name>bbb</name>
<marks>450</marks>
<result>Firstclass</result>
</studentType>
</student>
 Introduction to CSS
Cascading Style Sheets:
Style sheets represent the World Wide Web consortium‟s effort to improve on the tag
andattribute based style of formatting. Style sheets provide a way of customizing whole pages
all at once and in much richer detail than the simple use of tags and attributes. The format of
style sheet will be:
<style type=”text/css”>
selector{property:value;property:value;}
selector{property:value;property:value;}
</style>
Every line in <style> tag is called as a „Rule‟ and a style rule has two parts:
a. Selector.
b. Set of declarations.
A selector is used to create a link between the rule and the HTML tag. The declaration has two
parts
again:
a. Property.
b. Value.
A property specifies additional information and value specifies property value. For example:
<style type=”text/css”>
body {background-color: #d0e4fe;}
h1 {
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
If we add above code in the <head> element of web page , entire web page will be displayed
in various styles given in style element.
Style sheets are implemented with cascading style sheets specification. Conventionally styles
are
cascaded i.e., we don‟t have to use just a single set of styles inside a document, but we can
import
as many styles as we like.
CSS SYNTAX :
There are three mechanisms (types of css) by which we can apply styles to our
HTML documents:
1. Inline Style sheets.(Inline CSS)
2. Internal Style sheets.(Internal CSS)
3. External Style sheets.(External CSS)

1. Inline Style sheets.( Inline CSS)

Inline CSS is used to apply a unique style to a single HTML element. It is added using the
style attribute directly inside the HTML tag
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head> <title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red; text-align: center;">This is an Inline CSS Heading</h1>
<p style="font-size: 18px; color: blue;">This paragraph is styled with inline CSS.</p>
</body>
</html>
2. Internal Style sheets.( Internal CSS)
Internal CSS is written inside a <style> tag in the <head> section of the HTML document. It
is used when you want to style elements on a single page only.
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head> <title>Internal CSS Example</title>
<style>
h1 {
color: darkgreen;
text-align: center;
}
p{
font-size: 18px;
color: purple;
}
</style>
</head>
<body>
<h1>This is an Internal CSS Heading</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
3. External Style sheets.( External CSS)
External CSS is written in a separate .css file. It is linked to the HTML file using the <link>
tag. This type is best when the same styles are used on multiple pages.
#Index.html
<!DOCTYPE html>
<html lang="en">
<head><title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is an External CSS Heading</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
#style.css
h1 {
color: navy;
text-align: center;
}
p{
font-size: 18px;
color: darkorange;
}
Parts of style sheet
CSS selectors

You can also specify that only specific HTML elements should be affected by a class. In the
example below, all p elements with class="center" will be center-aligned:
example p.center {text-align:center;}
Some of the other selectors are used in CSS, they are

CSS Background Cursor

CSS Background & Cursor -
1. CSS Background Properties
CSS background properties allow web developers to enhance the visual appearance of
webpages by styling
the background of HTML elements. Understanding each property provides fine control over
layout and
design.
Common Background Properties:- background-color: Defines the background color of an
element.
Example:
body {
background-color: lightblue;
}- background-image: Adds an image as the background.
Example:
body {
background-image: url("image.jpg");
}- background-repeat: Controls how background images repeat.
Values: repeat, no-repeat, repeat-x, repeat-y
Example:
background-repeat: no-repeat;- background-position: Specifies where the background image is
placed.
Values: top, center, bottom, left, right, or coordinates like 50% 50%
Example:
background-position: center;- background-size: Defines the size of the background image.
Values: cover, contain, or specific dimensions (e.g., 100px 100px)
Example:
background-size: cover;- background-attachment: Determines whether the background scrolls
with the page.
Values: scroll, fixed
Example:
background-attachment: fixed;- Shorthand Property: background
Combines all background properties into one.
Example:
background: lightblue url("image.jpg") no-repeat center center / cover fixed;
Example:
body {
background-color: lightblue;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
2. CSS Cursor Property
The cursor property defines the type of mouse pointer that is displayed when the user hovers
over an
element. This helps improve interactivity and user experience.
Common Cursor Values:- default: Standard arrow pointer- pointer: Hand icon, typically used
on clickable items like links and buttons- text: I-beam cursor used for text editing- wait: Shows
a loading/waiting icon (e.g., spinning wheel)
crosshair: Precision crosshair- move: Move icon for drag-and-drop features- not-allowed:
Shows a circle with a line through it, indicating restricted actions- url("image.cur"): Custom
cursor using a specific image
Examples:
button {
cursor: pointer;
}
.loading {
cursor: wait;
}
.editable {
cursor: text;
}
.canvas {
cursor: crosshair;
}
3. Custom Cursor
You can enhance the user interface by using custom cursor images. This is especially useful in
games or
creative designs.
Syntax:
.custom {
cursor: url("my-cursor.cur"), auto;
}
Tip: Use .cur or .ani formats for best cross-browser support.
Always include a fallback after the custom cursor.
4. Cursor on Background
To apply a cursor style over a full-page background:
body {
background-image: url("bg.jpg");
background-size: cover;
cursor: crosshair;
}
CSS text fonts
1. CSS Text Properties
CSS text properties are used to control the appearance of text in HTML elements. These
properties affect
alignment, spacing, decoration, transformation, and more.
Common Text Properties:- color: Sets the color of the text.
Example:
p{
color: darkblue;
}- text-align: Aligns the text inside an element.
Values: left, right, center, justify
Example:
h1 {
text-align: center;
}- text-decoration: Adds or removes decoration from text.
Values: none, underline, overline, line-through
Example:
a{
text-decoration: none;
}- text-transform: Controls capitalization of text.
Values: uppercase, lowercase, capitalize, none
Example:
h2 {
text-transform: uppercase;
}
letter-spacing: Controls the space between characters.
Example:
p{
letter-spacing: 1px;
}- word-spacing: Controls the space between words.
Example:
p{
word-spacing: 5px;
}- line-height: Sets the height between lines of text.
Example:
p{
line-height: 1.6;
}- text-indent: Indents the first line of text.
Example:
p{
text-indent: 50px;
}- direction: Sets the text direction.
Values: ltr (left-to-right), rtl (right-to-left)
Example:
div {
direction: rtl;
}
2. CSS Font Properties
CSS font properties are used to define the style, weight, size, and family of fonts used in HTML
elements.
Common Font Properties:- font-family: Specifies the typeface of text.
Best to use a list of fonts for fallback.
Example:
body {
font-family: Arial, Helvetica, sans-serif;
}- font-size: Defines the size of the text.
Units: px, em, rem, %, etc.
Example:
h1 {
font-size: 32px;
}- font-weight: Controls the boldness of text.
Values: normal, bold, lighter, bolder, or numeric (100 to 900)
Example:
strong {
font-weight: bold;
}- font-style: Sets text style.
Values: normal, italic, oblique
Example:
em {
font-style: italic;
}
- font-variant: Controls use of small caps.
Values: normal, small-caps
Example:
p{
font-variant: small-caps;
}- Shorthand Property: font
Combines font-style, font-variant, font-weight, font-size, line-height, and font-family.
Example:
p{
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}
3. Web Safe Fonts
Web safe fonts are fonts that are generally available on all major operating systems.
Examples:- Arial- Times New Roman- Courier New- Verdana- Georgia- Tahoma
Always provide fallback fonts using a comma-separated list in font-family.
4. Google Fonts
You can also use web fonts from sources like Google Fonts. Include them in your HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
Then use it in your CSS:
body {
font-family: 'Roboto', sans-serif;
}

CSS lists Tables

CSS lists help you display information in a structured format, such as unordered lists (bullets),
ordered lists (numbers), or custom icons.
Common List Properties:
list-style-type
Specifies the type of list marker.
Values include:

disc (default)
circle
square
decimal
lower-alpha
upper-roman
Example
ul {
list-style-type: square;
}

List-style-position
Defines whether the marker is placed inside or outside the list item’s content box.
Values: inside, outside (default)
Example
ol {
list-style-position: inside;
}
list-style-image
Replaces the default marker with an image.
Example
ul {
list-style-image: url('bullet.png');
}

Removing Bullets and Spacing

Used for custom menus or horizontal nav bars.

Example:
ul {
list-style: none;
margin: 0;
padding: 0;
}
CSS Tables
CSS table properties help you design professional-looking tables with better layout, spacing,
and readability.

Common Table Properties:

border
Adds borders to the table, rows, and cells.

Example:
table, th, td {
border: 1px solid black;
}
CSS Box Modeling
The CSS box model is a fundamental concept that defines how the element's dimensions and
spacing are calculated.
The box model treats every HTML element as a rectangular box consisting of content, padding,
border, and margin.
The components of the box model are:
• content: actual text or image that is displayed in the element
• padding: transparent space between the content and the border of an element
• border: line that surrounds the padding and content within the element
 • margin: transparent area added outside the border
The primary purpose of the box model is to explain how the dimensions and spacing of
elements are calculated and how they relate to each other.
Width and Height of an Element with Box Model
The box model is important for understanding how the width and height of an element are
calculated.
The width and height of the element are applied only to the content of the element by default.
Hence, the actual size of the element is calculated by adding the padding and border along with
the specified width and height of the element.
Example:
#html file
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<title>CSS Box Model</title>
</head>
<body>
<div>
The CSS box model is a way of describing the layout of an HTML
element.
</div>
</body>
</html>

#Css file
div {
width: 400px;
height: 80px;
border: 10px solid black;
padding: 15px;
background-color: greenyellow;
/* clips the background color to content only */
background-clip: content-box;
}

O/P:
Display Positioning
The CSS position property is used to align the different elements in the HTML page.
CSS position property plays an important role to make high-quality web pages. The
CSS position property is used to define the position of the element on the web page. By using
the top, left, bottom, right, and z-index, we can identify the exact position of the element.
There are 5 position properties in CSS:
• static (default)
• relative
• absolute
• fixed
• sticky
1.Static (Default)
Behavior: Elements are positioned according to the normal flow of the document.
Effect of top, right, bottom, left: These properties have no effect.
Use Case: Default positioning; elements appear in the order they are written in the HTML.

2. relative
Behavior: Elements are positioned relative to their normal position.
Effect of top, right, bottom, left: These properties shift the element from its original position
without affecting other elements.
Use Case: Slight adjustments to an element's position; establishing a reference point for
absolutely positioned child elements.

3. absolute
Behavior: Elements are removed from the normal document flow and positioned relative to the
nearest positioned ancestor (an ancestor with a position other than static). If no such ancestor
exists, they are positioned relative to the initial containing block.
Effect of top, right, bottom, left: These properties specify the exact position of the element.
Use Case: Creating dropdowns, tooltips, or placing elements at specific locations within a
container.
4. fixed
Behavior: Elements are removed from the normal document flow and positioned relative to the
viewport. They remain in the same position even when the page is scrolled.
Effect of top, right, bottom, left: These properties specify the position relative to the viewport.
Use Case: Creating persistent headers, footers, or navigation menus that stay visible during
scrolling.

5. sticky
Behavior: Elements toggle between relative and fixed positioning based on the user's scroll
position. They act as relative until a specified offset is met, then behave as fixed.
Effect of top, right, bottom, left: These properties define the threshold at which the element
becomes fixed.
Use Case: Creating headers or table columns that remain visible within their parent container
during scrolling.

#Example:
<<!DOCTYPE html>
<head>
<style>
.purple {
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: purple;
}
.cyan {
position: static;
font-size: 1.5rem;
padding: 10px;
height: 200px;
width: 200px;
background-color: cyan;
}

</style>
</head>
<body>
<div class="purple">
I am reference
</div>
<div class="cyan">
I am static element
</div>
</body>
</html>

O/P :
CSS Floats
The CSS float property is used to position elements to the left or right within their container,
allowing text and inline elements to wrap around them.
This technique is commonly used for creating layouts where, for example, an image is aligned
to one side and text flows around it.
Syntax
.element {
float: left | right | none | inherit;
}
left: Floats the element to the left of its container.
right: Floats the element to the right of its container.
none: The element does not float (default behavior).
inherit: The element inherits the float value from its parent
Example:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS Float Example</title>
<style>
.float-left {
float: left;
margin-right: 15px;
margin-bottom: 10px;
width: 150px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<img src="https://via.placeholder.com/150" alt="Sample Image" class="float-left">
<p>
EXAMPLE USING CSS FLOATS!!!!!!
</p>
</div>
</body>
</html>

CSS Gradients
CSS gradients enable smooth transitions between two or more colors, enhancing the visual
appeal of web elements without relying on images. They are defined using the background-
image property and come in three primary types: linear, radial, and conic.
Types of Gradients:
CSS3 defines two types of gradients:
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center) A) CSS3 Linear Gradients
An axial color gradient (sometimes also called a linear color gradient) is specified by two
points, and a color at each point.
The colors along the line through those points are calculated using linear interpolation, and
then extended perpendicular to that line.
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. You can also set a starting point and a direction
(or an angle) along with the gradient effect.
Linear Gradient
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.linear-gradient-box {
width: 300px;
height: 150px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
border: 2px solid #333;
text-align: center;
line-height: 150px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="linear-gradient-box">Linear Gradient</div>
</body>
</html>
Explanation of the above program:
• to right: the gradient goes from left to right.
• #ff7e5f: start color.
• #feb47b: end color.
• The gradient smoothly transitions between the two colors across the width of the box.

2. Radial Gradient

• Example:

<!DOCTYPE html>

<html>

<head>

<style>

.radial-gradient-box {

width: 300px;
 height: 150px;

background: radial-gradient(circle, #ff7e5f, #feb47b);

border: 2px solid #333;

text-align: center;

line-height: 150px;

color: white;

font-weight: bold;

</style>

</head>

<body>

<div class="radial-gradient-box">Radial Gradient</div>

</body>

</html>

Explanation of the above program:

• circle: makes the gradient circular (can also be ellipse).

• The gradient starts from the center and radiates outward.
• Starts with #ff7e5f in the center and transitions to #feb47b.
Shadows

1. Box Shadow:

box-shadow is used to add a shadow effect around an element’s box, like divs, buttons, etc.

Syntax:

box-shadow: offset-x offset-y blur-radius color;

offset-x: horizontal position of the shadow

offset-y: vertical position of the shadow

blur-radius: how blurry the shadow looks

color: the shadow’s color

Example

<!DOCTYPE html>

<html>

<head>

<style>

.box {

width: 200px;

height: 100px;

background-color: skyblue;

box-shadow: 5px 5px 10px gray;

text-align: center;
line-height: 100px;

font-weight: bold;

</style>

</head>

<body>

<div class="box">Box Shadow</div>

</body>

</html>

Explanation:

• 5px 5px: shadow appears 5px right and 5px down

• 10px: the shadow has a soft blur
• gray: shadow color

2. Text Shadow:

• Text-shadow adds a shadow to text to make it stand out or look stylish.

Syntax: text-shadow: offset-x offset-y blur-radius color;

Example :

<!DOCTYPE html>

<html>

<head>

<style>
 .text {

font-size: 30px;

color: white;

background-color: black;

padding: 20px;

text-shadow: 2px 2px 4px red;

</style>

</head>

<body>

<div class="text">Text Shadow</div>

</body>

</html>

Explanation:

• 2px 2px: shadow moves right and down slightly

• 4px: slight blur
• red: gives the text a red glowing effect

2D and 3 Transform

CSS 2D Transform allows you to move, rotate, scale, or skew an element on a 2D plane (X and
Y axes).

Example functions:
translate(x, y) — move

rotate(angle) — rotate

scale(x, y) — resize

skew(x, y) — distort

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.box-2d {

width: 100px;

height: 100px;

background-color: coral;

transform: rotate(45deg) translate(50px, 20px);

margin: 50px;

color: white;

text-align: center;

line-height: 100px;
}

</style>

</head>

<body>

<div class="box-2d">2D</div>

</body>

</html>

Explanation:

• rotate(45deg): rotates the box by 45 degrees

• translate(50px, 20px): moves it 50px right and 20px down

CSS 3D Transform allows you to move or rotate elements in 3D space, using the X, Y,
and Z axes to create depth and perspective.

Example functions:

rotateX(angle) — tilt up/down

rotateY(angle) — flip side-to-side

translateZ(z) — move forward/backward

perspective(n) — adds depth

Example:

<!DOCTYPE html>

<html>
<head>

<style>

.container {

perspective: 500px; /* enables 3D effect */

.box-3d {

width: 100px;

height: 100px;

background-color: mediumseagreen;

transform: rotateY(45deg) rotateX(20deg);

margin: 50px;

color: white;

text-align: center;

line-height: 100px;

</style>

</head>

<body>

<div class="container">
<div class="box-3d">3D</div>

</div>

</body>

</html>

Explanation:

• perspective(500px): sets the viewer’s distance for 3D space

• rotateY(45deg): rotates the element around the Y-axis (horizontal flip)
• rotateX(20deg): tilts the element along the X-axis

CSS Transitions:

CSS transitions are used to create smooth animations between two states of an element,
enhancing interactivity and user experience.
• Transitions can animate properties like color, size, and position.
• Use selectors and pseudo-classes (e.g., :hover) to trigger transitions.
• Key transition properties include transition-property, transition-duration, transition-
timing-function, and transition-delay.
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
}
.box:hover {
background-color: green;
}
</style>
 </head>
<body>
<div class="box"></div>
</body>
</html>
• The .box class defines a square <div> with a blue background and a transition effect for
the background-color property over 0.5 seconds.
• When the user hovers over the <div>, the :hover pseudo-class changes the background
color to green, triggering the transition

CSS Transition Properties

• To create effective transitions, you should use at least two of the four key
properties: transition-property and transition-duration. Here’s a detailed look at each
property:
Transition-property
• This property allows you to select the CSS properties that you want to animate
during the transition(change).
Syntax
transition-property: none | all | property | property1, property2, ..., propertyN;
• Values
o none is used to specify that no property should be selected.
o all is used to specify all the properties to be selected.
o We can specify a single property or a set of comma-separated
properties property1, property2, …, propertyN
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).
 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;

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;

CSS Animations
CSS animations allow elements to change styles over time using keyframes, without needing
JavaScript.
They enable you to animate one or more CSS properties — like size, color, position, or rotation
— in a smooth, controlled way.
Animations can start automatically, repeat, reverse, or even alternate between directions.
This makes them ideal for adding motion to websites, improving user experience, and drawing
attention to elements
How CSS Animations Work:
1. You define keyframes using @keyframes, which specify the stages of the animation.
2. You attach the animation to an element using the animation property.

Why Use CSS Animations?

• No JavaScript required
• Lightweight and performance-friendly
• Smooth and customizable
• Great for:
 o Buttons
o Loaders
o Banners
o Interactive effects
Two Main Parts of Animation:

• 1. @keyframes
• Defines what should happen at each stage of the animation.

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

2. animation Property

Controls how the animation behaves (duration, delay, repetition, etc.)

.my-element {

animation: fadeIn 2s ease-in-out 1s infinite alternate;

Advantages of CSS Animations

CSS animations offer several benefits over other animation techniques like JavaScript or Flash.
Here are some key advantages:

1. Performance and Speed

• Less CPU/GPU usage: CSS animations are handled by the browser’s compositor
thread, making them lighter and more efficient than JavaScript animations, which are
processed by the main thread.
 • Hardware acceleration: Many CSS animations, especially those involving transforms
(like translate, scale, rotate), benefit from hardware acceleration, providing smooth
and fast animations on most devices.

2. Ease of Use

• No need for JavaScript: CSS animations are easy to implement directly in CSS,
without relying on additional JavaScript, making them simple and quick to apply.
• Declarative syntax: The @keyframes rule is easy to understand and write. You can
directly define the start and end points of the animation in a clean, readable way.

3. Reduced Complexity

• Less code: CSS animations generally require fewer lines of code compared to
JavaScript animations for the same effects. It reduces the amount of custom logic
required.
• Automatic triggers: CSS animations can run automatically without needing to
manually trigger them with JavaScript events (although you can trigger animations via
hover, focus, etc.).

4. Better Browser Support

• Widely supported across browsers: Modern browsers (Chrome, Firefox, Edge,

Safari) have excellent support for CSS animations, ensuring a consistent experience
across platforms.

5. Smooth Transitions

• Smoother and more natural effects: CSS transitions and animations create seamless
motion that enhances the user experience by giving elements smooth changes in
properties (like color, size, and position).

6. Control and Flexibility

• Keyframe control: You can control the behavior of the animation at multiple stages
(e.g., 0%, 50%, 100%), allowing you to define complex animations that run over time.
 • Custom timing functions: Using timing-function (like ease, linear, ease-in-out), you
have full control over the pacing of the animation, making it feel natural or exaggerated
as needed.

7. No Dependencies

• No extra libraries: You don’t need to rely on any third-party libraries (e.g., jQuery,
GreenSock) for basic animations. Everything can be achieved with pure CSS, making
your codebase lighter and more maintainable.

8. Responsiveness

• Adaptability: CSS animations work across devices, and by controlling the animation-
duration or transform properties, you can make animations responsive to screen sizes,
ensuring they run smoothly on both desktop and mobile.

9. Accessibility

• User control: Since animations are built into CSS, users can disable them via their
browser settings if they prefer to reduce motion for accessibility reasons. This makes
animations more inclusive for people with motion sensitivities.