Scribd
Upload
41 views

Edited Uint2

unit2

Uploaded by

soumyak958
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

Edited Uint2

unit2

Uploaded by

soumyak958
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 87

UNIT 2

Introduction to XML

XML is a software- and hardware-independent tool for storing and transporting data.

What is XML?

 Xml (eXtensible Markup Language) is a mark up language.


 XML is designed to store and transport data.
 Xml was released in late 90’s. it was created to provide an easy to use and store self
describing data.
 XML became a W3C Recommendation on February 10, 1998.
 XML is not a replacement for HTML.
 XML is designed to be self-descriptive.
 XML is designed to carry data, not to display data.
 XML tags are not predefined. You must define your own tags.
 XML is platform independent and language independent.

The Difference Between XML and HTML

XML and HTML were designed with different goals:

 XML was designed to carry data - with focus on what data is


 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

XML Does Not Use Predefined Tags

The XML language has no predefined tags.

The tags in the example above (like <to> and <from>) are not defined in any XML standard.
These tags are "invented" by the author of the XML document.

HTML works with predefined tags like <p>, <h1>, <table>, etc.

With XML, the author must define both the tags and the document structure.
XML is Extensible

Most XML applications will work as expected even if new data is added (or removed).

Imagine an application designed to display the original version of note.xml (<to> <from>
<heading> <body>).

Then imagine a newer version of note.xml with added <date> and <hour> elements, and a
removed <heading>.

The way XML is constructed, older version of the application can still work:

<note>
<date>2015-09-01</date>
<hour>08:30</hour>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>

OUTPUT:
Old Version
Note

To: Tove

From: Jani

Reminder

Don't forget me this weekend!

New Version
Note

To: Tove

From: Jani

Date: 2015-09-01 08:30

Don't forget me this weekend!


XML Syntax

The syntax rules of XML are very simple and logical. The rules are easy to learn, and easy to
use.

XM
L Documents Must Have a Root Element

XML documents must contain one root element that is the parent of all other elements:

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

In this example <note> is the root element:

<?xml version="1.0" encoding="UTF-8"?>


<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Output:
Note

To: Tove

From: Jani

Date: 2015-09-01 08:30

Don't forget me this weekend!

The XML Prolog

This line is called the XML prolog:

<?xml version="1.0" encoding="UTF-8"?>

The XML prolog is optional. If it exists, it must come first in the document.
XML documents can contain international characters, like Norwegian øæå or French êèé.

To avoid errors, you should specify the encoding used, or save your XML files as UTF-8.

UTF-8 is the default character encoding for XML documents.

XML Tree
XML documents form a tree structure that starts at "the root" and branches to "the leaves".

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).

All elements can have text content (Harry Potter) and attributes (category="cooking").
XML Elements
An XML document contains XML Elements. What is an XML Element?

An XML element is everything from (including) the element's start tag to (including) the
element's end tag.

<price>29.99</price>

An element can contain:

 text
 attributes
 other elements
 or a mix of the above

<bookstore>
<book category="children">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

In the example above:

<title>, <author>, <year>, and <price> have text content because they contain text (like 29.99).

<bookstore> and <book> have element contents, because they contain elements.

<book> has an attribute (category="children").

Empty XML Elements

An element with no content is said to be empty.

In XML, you can indicate an empty element like this:


<element></element>

You can also use a so called self-closing tag:

<element />

XML Attributes
Attributes are designed to contain data related to a specific element.

XML Attributes Must be Quoted

Attribute values must always be quoted. Either single or double quotes can be used.

For a person's gender, the <person> element can be written like this:

<person gender="female">

or like this:

<person gender='female'>

If the attribute value itself contains double quotes you can use single quotes, like in this example:

<gangster name='George "Shotgun" Ziegler'>

or you can use character entities:

<gangster name="George &quot;Shotgun&quot; Ziegler">

XML Namespaces
XML Namespaces provide a method to avoid element name conflicts.
Name Conflicts

In XML, element names are defined by the developer. This often results in a conflict when trying
to mix XML documents from different XML applications.

This XML carries HTML table information:

<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>

This XML carries information about a table (a piece of furniture):

<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>

If these XML fragments were added together, there would be a name conflict. Both contain a
<table> element, but the elements have different content and meaning.

XML Namespaces - The xmlns Attribute

When using prefixes in XML, a namespace for the prefix must be defined.

The namespace can be defined by an xmlns attribute in the start tag of an element.

The namespace declaration has the following syntax. xmlns:prefix="URI".

<root xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="https://www.w3schools.com/furniture">

<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

</root>

OUTPUT:

<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">


<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>

In the example above:

The xmlns attribute in the first <table> element gives the h: prefix a qualified namespace.

The xmlns attribute in the second <table> element gives the f: prefix a qualified namespace.

When a namespace is defined for an element, all child elements with the same prefix are
associated with the same namespace.

Namespaces can also be declared in the XML root element:

Note: The namespace URI is not used by the parser to look up information.

The purpose of using an URI is to give the namespace a unique name.

XML Parsers

An XML parser is a software library or package that provides interfaces for client applications to
work with an XML document. The XML Parser is designed to read the XML and create a way
for programs to use XML.

XML parser validates the document and check that the document is well formatted.

Let's understand the working of XML parser by the figure given below:
Types of XML Parsers

These are the two main types of XML Parsers:

1. DOM
2. SAX

DOM (Document Object Model)

A DOM document is an object which contains all the information of an XML document. It is
composed like a tree structure. The DOM Parser implements a DOM API. This API is very
simple to use.

Features of DOM Parser

A DOM Parser creates an internal structure in memory which is a DOM document object and the
client applications get information of the original XML document by invoking methods on this
document object.

DOM Parser has a tree based structure.

Advantages

1) It supports both read and write operations and the API is very simple to use.

2) It is preferred when random access to widely separated parts of a document is required.

Disadvantages

1) It is memory inefficient. (consumes more memory because the whole XML document needs
to loaded into memory).
2) It is comparatively slower than other parsers.

SAX (Simple API for XML)

A SAX Parser implements SAX API. This API is an event based API and less intuitive.

Features of SAX Parser

It does not create any internal structure.

Clients does not know what methods to call, they just overrides the methods of the API and place
his own code inside method.

It is an event based parser, it works like an event handler in Java.

Advantages

1) It is simple and memory efficient.

2) It is very fast and works for huge documents.

Disadvantages

1) It is event-based so its API is less intuitive.

2) Clients never know the full information because the data is broken into pieces.

XSLT
XSL (eXtensible Stylesheet Language) is a styling language for XML.

XSLT stands for XSL Transformations.

XSLT is a language for transforming XML documents.

XPath is a language for navigating in XML documents.

XQuery is a language for querying XML documents.

XML CODE

<?xml version="1.0" encoding="UTF-8"?>


<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

<cd>

<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>

<country>UK</country>

<company>CBS Records</company>

<price>9.90</price>

<year>1988</year>

</cd>

<cd>

<title>One night only</title>

<artist>Bee Gees</artist>

<country>UK</country>

<company>Polydor</company>

<price>10.90</price>

<year>1998</year>
</cd>

<cd>

<title>Private Dancer</title>

<artist>Tina Turner</artist>

<country>UK</country>

<company>Capitol</company>

<price>8.90</price>

<year>1983</year>

</cd>

<cd>

<title>Midt om natten</title>

<artist>Kim Larsen</artist>

<country>EU</country>

<company>Medley</company>

<price>7.80</price>

<year>1983</year>

</cd>

<cd>

<title>Picture book</title>

<artist>Simply Red</artist>

<country>EU</country>

<company>Elektra</company>

<price>7.20</price>

<year>1985</year>

</cd>
<cd>

<title>Red</title>

<artist>The Communards</artist>

<country>UK</country>

<company>London</company>

<price>7.80</price>

<year>1987</year>

</cd>

<cd>

<title>Unchain my heart</title>

<artist>Joe Cocker</artist>

<country>USA</country>

<company>EMI</company>

<price>8.20</price>

<year>1987</year>

</cd>

</catalog>

XSLT CODE

<?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>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT:

My CD Collection
Title Artist

Empire Burlesque Bob Dylan

Hide your heart Bonnie Tyler

Greatest Hits Dolly Parton

Still got the blues Gary Moore

Eros Eros Ramazzotti

One night only Bee Gees

Sylvias Mother Dr.Hook

Maggie May Rod Stewart

Romanza Andrea Bocelli

When a man loves a woman Percy Sledge

Black angel Savage Ros


XML DOM

What is the DOM?

The Document Object Model (DOM) defines a standard for accessing and manipulating
documents:

The HTML DOM defines a standard way for accessing and manipulating HTML documents. It
presents an HTML document as a tree-structure.

The XML DOM defines a standard way for accessing and manipulating XML documents. It
presents an XML document as a tree-structure.

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

The XML DOM is a standard for how to get, change, add, and delete XML elements.

XML DTD

DTD stands for Document Type Definition. It defines the legal building blocks of an XML
document. It is used to define document structure with a list of legal elements and attributes.

Its main purpose is to define the structure of an XML document. It contains a list of legal
elements and define the structure with the help of them.

The purpose of a DTD is to define the structure and the legal elements and attributes of an XML
document:

Note.dtd:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:


 !DOCTYPE note - Defines that the root element of the document is note
 !ELEMENT note - Defines that the note element must contain the elements: "to, from,
heading, body"
 !ELEMENT to - Defines the to element to be of type "#PCDATA"
 !ELEMENT from - Defines the from element to be of type "#PCDATA"
 !ELEMENT heading - Defines the heading element to be of type "#PCDATA"
 !ELEMENT body - Defines the body element to be of type "#PCDATA"

Using DTD for Entity Declaration

A DOCTYPE declaration can also be used to define special characters or strings, used in the
document:

Example
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note [
<!ENTITY nbsp "&#xA0;">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">
]>

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<footer>&writer;&nbsp;&copyright;</footer>
</note>

OUTPUT:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<footer>Writer: Donald Duck. Copyright: W3Schools.</footer>
</note>

Tip: An entity has three parts: it starts with an ampersand (&), then comes the entity name, and it
ends with a semicolon (;).

XML Schema

An XML Schema describes the structure of an XML document, just like a DTD.
An XML document with correct syntax is called "Well Formed".

An XML document validated against an XML Schema is both "Well Formed" and "Valid".

XML Schema is an XML-based alternative to DTD:

<xs:element name="note">

<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>

</xs:element>

The Schema above is interpreted like this:

 <xs:element name="note"> defines the element called "note"


 <xs:complexType> the "note" element is a complex type
 <xs:sequence> the complex type is a sequence of elements
 <xs:element name="to" type="xs:string"> the element "to" is of type string (text)
 <xs:element name="from" type="xs:string"> the element "from" is of type string
 <xs:element name="heading" type="xs:string"> the element "heading" is of type string
 <xs:element name="body" type="xs:string"> the element "body" is of type string

CSS Introduction
What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files.
CSS Syntax

The CSS provides the style to the HTML element, which the browser interprets. After being
interpreted by the browser, the CSS style property will be applied to all the elements of the
HTML. We can provide style property to the HTML element in three parts. These three parts are
as follows.

1. Selector

It is an HTML tag. All the style properties of the CSS will be applied to the selector. The selector
tag like <h1> or <table> etc.

2. Property

It is a type of attribute that is present in HTML tags. All the attributes of the HTML will be
converted to the CSS properties. The CSS properties like color, border, etc.

3. Value

In HTML, these are assigned to the properties. For example, the color property can have a value
of either red or #F1F1F1, etc.

Syntax:
1. selector { property: value }

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

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
Example

In this example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

</body>

</html>

OUTPUT:

Hello World!

These paragraphs are styled with CSS.

Example Explained

 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: blue;

</style>

</head>

<body>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>


<p>And me!</p>

</body>

</html>

OUTPUT:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
OUTPUT:

Hello Javatpoint.com

This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: blue;

</style>

</head>

<body>

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body>

</html>

OUTPUT:
This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html>

<html>

<head>

<style>

*{

color: green;

font-size: 20px;

</style>

</head>

<body>

<h2>This is heading</h2>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

OUTPUT:

This is heading

This style will be applied on every paragraph.

Me too!
And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.

Let's see the CSS code without group selector.

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello Javatpoint.com</h1>

<h2>Hello Javatpoint.com (In smaller font)</h2>

<p>This is a paragraph.</p>

</body>

</html>

OUTPUT:
Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)

This is a paragraph.

CSS Background

CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color

The background-color property is used to specify the background color of the element.

You can set the background color like this:

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>
Output:

My first CSS page.

Hello Javatpoint. This is an example of CSS background-color.

2) CSS background-image

The background-image property is used to set an image as a background of an element. By


default the image covers the entire element. You can set the background image for a page like
this.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

OUTPUT:
Hello Javatpoint.com

3) CSS background-repeat

By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("gradient-bg.png");

background-repeat: repeat-x;

</style>

</head>

<body>

<h1>Hello Javatpoint.com</h1>

</body>

</html>

OUTPUT:

Hello Javatpoint.com
4) CSS background-attachment

The background-attachment property is used to specify if the background image is fixed or scroll
with the rest of the page in browser window. If you set fixed the background image then the
image will not move during scrolling in the browser. Let?s take an example with fixed
background image.

1. background: white url('bbb.gif');


2. background-repeat: no-repeat;
3. background-attachment: fixed;

<!DOCTYPE html>

<html>

<head>
<style>

body {

background: white url('bbb.gif');

background-repeat: no-repeat;

background-attachment: fixed;

margin-left:200px;

</style>

</head>

<body>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>If you do not see any scrollbars, Resize the browser window.</p>

</body>

</html>

OUTPUT:

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.


This is a fixed background-image. Scroll down the page.

5) CSS background-position

The background-position property is used to define the initial position of the background image.
By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

<html>

<head>

<style>

body {

background: white url('good-morning.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

</style>

</head>

<body>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>

<p>This is a fixed background-image. Scroll down the page.</p>


<p>If you do not see any scrollbars, Resize the browser window.</p>

</body>

</html>

OUTPUT:

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

This is a fixed background-image. Scroll down the page.

CSS Cursor

Every day, we already use customized cursors. This interaction is made possible by using
modified cursors, such as when you hover over buttons, the pointer cursor transforms into a
hand, or when you hover over the text and the cursor transforms into a text cursor.

These cursors provide options for action at the precise spot you are hovering over. Examples
include cursors that indicate you should click links, drag and drop elements, zoom in and out of
objects, and more.

CSS Cursor Property

Using photos as submit buttons on forms is a useful application of this capability. By default, a
hand appears instead of a pointer when a cursor is above a link. However, a form's submit button
does not cause it to change form. This serves as a visual cue that the picture is clickable anytime
someone hovers over an image that is a submit button.

This property is specified by zero or more <url> values separated by commas, followed by one
keyword value as required, and each <url> will refer to the image file.

Syntax

cursor: value;
<!DOCTYPE html>
<html>
<head>
<title> CSS cursor property </title>
<style>
.wait {
cursor: wait;
}
h1 {
color: red;
}
</style>
</head>

<body>
<center>
<h1>Welcome to the page</h1>
<p>To change the mouse cursor, move the mouse over the text</p>

<p class="wait">wait until next suggestion</p>

</center>
</body>
</html>

Output
CSS Text
Text Color

The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

<!DOCTYPE html>

<html>

<head>

<style>

body {

color: blue;

h1 {

color: green;

</style>

</head>

<body>

<h1>This is heading 1</h1>


<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the
body selector.</p>

<p>Another paragraph.</p>

</body>

</html>

OUTPUT:

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body
selector.

Another paragraph.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is
default if text direction is left-to-right, and right alignment is default if text direction is right-to-
left):

When the text-align property is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers):

div {
text-align: justify;
}

Example:

<!DOCTYPE html>

<html>

<head>
<style>

h1 {

text-align: center;

h2 {

text-align: left;

h3 {

text-align: right;

div {

border: 1px solid black;

padding: 10px;

width: 200px;

height: 200px;

text-align: justify;

</style>

</head>

<body>

<h1>Heading 1 (center)</h1>

<h2>Heading 2 (left)</h2>

<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world
haven't had the advantages that you've had.'

</div>

</body>

</html>

OUTPUT:

Heading 1 (center)
Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

Text Decoration

In this chapter you will learn about the following properties:

 text-decoration-line
 text-decoration-color
 text-decoration-style
 text-decoration-thickness
 text-decoration

Add
a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both
over and under a text.

Example:

<!DOCTYPE html>

<html>
<head>

<style>

h1 {

text-decoration: overline;

h2 {

text-decoration: line-through;

h3 {

text-decoration: underline;

p.ex {

text-decoration: overline underline;

</style>

</head>

<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>

<h3>Underline text decoration</h3>

<p class="ex">Overline and underline text decoration.</p>

<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses

the reader.</p>

</body>

</html>
OUTPUT:

Overline text decoration


Line-through text decoration

Underline text decoration

Overline and underline text decoration.

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration-line: overline;

text-decoration-color: red;

h2 {

text-decoration-line: line-through;

text-decoration-color: blue;

h3 {

text-decoration-line: underline;

text-decoration-color: green;

}
p{

text-decoration-line: overline underline;

text-decoration-color: purple;

</style>

</head>

<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>

<h3>Underline text decoration</h3>

<p>Overline and underline text decoration.</p>

</body>

</html>

OUTPUT:

Overline text decoration


Line-through text decoration
Underline text decoration

Overline and underline text decoration.

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word:

Example
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
Text Spacing

In this chapter you will learn about the following properties:

 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:
Example
p{
text-indent: 50px;
}
Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example
h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}
Line Height

The line-height property is used to specify the space between lines:

Example
p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}
Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example
p{
white-space: nowrap;
}
Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Text shadow effect!


Example
h1 {
text-shadow: 2px 2px;
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px red;
}

CSS Font

CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more. You have already studied how to make text bold or
underlined. Here, you will also know how to resize your font using percentage.

These are some important font attributes:


1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It
is used to change the color of the text.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is heading 1

This is heading 2

This is a paragraph

2) CSS Font Family

CSS font family can be divided in two types:

o Generic family: It includes Serif, Sans-serif, and Monospace.


o Font family: It specifies the font family name like Arial, New Times Roman etc.

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new
roman, Georgia etc.

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of
Sans-serif: Arial, Verdana etc.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

Output:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.

3) CSS Font Size

CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

Small used to display small text size.

Medium used to display medium text size.

Large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.


Smaller used to display comparatively smaller text size.

Larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

<html>

<head>

<title>Practice CSS font-size property</title>

</head>

<body>

<p style="font-size:xx-small;"> This font size is extremely small.</p>

<p style="font-size:x-small;"> This font size is extra small</p>

<p style="font-size:small;"> This font size is small</p>

<p style="font-size:medium;"> This font size is medium. </p>

<p style="font-size:large;"> This font size is large. </p>

<p style="font-size:x-large;"> This font size is extra large. </p>

<p style="font-size:xx-large;"> This font size is extremely large. </p>

<p style="font-size:smaller;"> This font size is smaller. </p>

<p style="font-size:larger;"> This font size is larger. </p>

<p style="font-size:200%;"> This font size is set on 200%. </p>

<p style="font-size:20px;"> This font size is 20 pixels. </p>

</body>

</html>

OUTPUT:
This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

This font size is large.

This font size is extra large.

This font size is extremely


large.
This font size is smaller.

This font size is larger.

This font size is set on 200%.


This font size is 20 pixels.

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique,
or normal.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

Output:

This heading is shown in italic font.

This heading is shown in oblique font.

This heading is shown in normal font.

5) CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It may be normal and
small-caps.

<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

Output:

This heading is shown in normal font.

THIS PARAGRAPH IS SHOWN IN SMALL FONT.

6) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font is. The
possible values of font weight may be normal, bold, bolder, lighter or number (100, 200..... upto
900).

<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

Output:

This font is bold.


This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

CSS Lists

The CSS list properties allow you to:

 Set different list item markers for ordered lists


 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {

list-style-type: circle;

ul.b {

list-style-type: square;

ol.c {

list-style-type: upper-roman;

ol.d {

list-style-type: lower-alpha;

</style>

</head>

<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>

<ul class="a">

<li>Coffee</li>
<li>Tea</li>

<li>Coca Cola</li>

</ul>

<ul class="b">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Example of ordered lists:</p>

<ol class="c">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ol class="d">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>

OUTPUT:

The list-style-type Property

Example of unordered lists:


o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Example of ordered lists:

I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola

CSS Tables
Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td> elements:

Firstname Lastname

Peter Griffin

Lois Griffin

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid;


}

</style>

</head>

<body>

<h2>Add a border to a table:</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

OUTPUT:
Add a border to a table:
Firstname Lastname

Peter Griffin

Lois Griffin

CSS Box Model

The components that can be depicted on the web page consist of one or more than one
rectangular box.

A CSS box model is a compartment that includes numerous assets, such as edge, border, padding
and material. It is used to develop the design and structure of a web page. It can be used as a set
of tools to personalize the layout of different components. According to the CSS box model, the
web browser supplies each element as a square prism.

The following diagram illustrates how the CSS properties


of width, height, padding, border and margin dictate that how much space an attribute will
occupy on a web page.

The CSS box model contains the different properties in CSS. These are listed below.
o Border
o Margin
o Padding
o Content

Now, we are going to determine the properties one by one in detail.

Border Field

It is a region between the padding-box and the margin. Its proportions are determined by the
width and height of the boundary.

Margin Field

This segment consists of the area between the boundary and the edge of the border.

The proportion of the margin region is equal to the margin-box width and height. It is better to
separate the product from its neighbor nodes.

Padding Field

This field requires the padding of the component. In essence, this area is the space around the
subject area and inside the border-box. The height and the width of the padding box decide its
proportions.

Content Field

Material such as text, photographs, or other digital media is included in this area.

It is constrained by the information edge, and its proportions are dictated by the width and height
of the content enclosure.

Elements of the width and height

Typically, when you assign the width and height of an attribute using the CSS width and height
assets, it means you just positioned the height and width of the subject areas of that component.
The additional height and width of the unit box is based on a range of influences.

The specific area that an element box may occupy on a web page is measured as follows-

Size of the Properties of CSS


box
Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top +
margin-bottom

Width width + padding-left + padding-right + border-left + border-right + margin-left +


margin-right

<!DOCTYPE html>

<head>

<title>CSS Box Model</title>

<style>

.main

font-size:30px;

font-weight:bold;

Text-align:center;

.gfg

margin-left:50px;

border:50px solid Purple;

width:300px;

height:200px;

text-align:center;

padding:50px;

.gfg1

font-size:40px;

font-weight:bold;

color:black;

margin-top:60px;
background-color:purple;

.gfg2

font-size:20px;

font-weight:bold;

background-color:white;

</style>

</head>

<body>

<div class = "main">CSS Box-Model Property</div>

<div class = "gfg">

<div class = "gfg1">JavaTpoint</div>

<div class = "gfg2">A best portal for learn Technologies</div>

</div>

</body>

</html>

OUTPUT:

CSS Box-Model Property


JavaTpoint
A best portal for learn Technologies

CSS position

The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an element.
There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

<!DOCTYPE html>

<html>

<head>

<style>

div.static {

position: static;

border: 3px solid #73AD21;

</style>

</head>

<body>

<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the
normal flow of the page:</p>

<div class="static">

This div element has position: static;

</div>

</body>

</html>

OUTPUT:

position: static;

An element with position: static; is not positioned in any special way; it is always positioned according to
the normal flow of the page:

This div element has position: static;

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it
to be adjusted away from its normal position. Other content will not be adjusted to fit into any
gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are
used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
This <div> element has position: fixed;

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document
body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.

Here is a simple example:

This <div> element has position: relative;


This <div> element has position: absolute;

Here is the CSS that is used:


Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place
(like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see
example below). You must also specify at least one of top, right, bottom or left for sticky
positioning to work.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll
position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
CSS float
The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the
text in a container.

The float property can have one of the following values:

 left - The element floats to the left of its container


 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in the text). This
is default
 inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Example - float: right;

The following example specifies that an image should float to the right in a text:

Lorem ipsum dolor sit amet, consectetur


adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac...
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>

<h2>Float Right</h2>

<p>In this example, the image will float to the right in the paragraph, and the text in the
paragraph will wrap around the image.</p>

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-


left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

CSS Gradients
Gradient Backgrounds
CSS
gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

 Linear Gradients (goes down/up/left/right/diagonally)


 Radial Gradients (defined by their center)
 Conic Gradients (rotated around a center point)

CSS Linear Gradients

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.

Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to
yellow:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

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


<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

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

</body>
</html>
OUTPUT:

top to bottom (default)

Example
#grad {
background-image: linear-gradient(red, yellow);
}

Direction - Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning
to yellow:

left to right
Example
#grad {
background-image: linear-gradient(to right, red , yellow);
}

CSS Shadow Effects

With CSS you can add shadow to text and to elements.

In these chapters you will learn about the following properties:

 text-shadow
 box-shadow

<!DOCTYPE html>

<html>

<head>
<style>

h1 {

text-shadow: 2px 2px;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

OUTPUT:

Text-shadow effect!
Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated list of shadows.

The following example shows a red and blue neon glow shadow:

Text shadow effect!


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>
OUTPUT:

Text-shadow with red and blue neon glow!

CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements.

Mouse over the element below to see a 2D transformation:

CSS 2D Transforms Methods

With the CSS transform property you can use the following 2D transformation methods:

 translate()
 rotate()
 scaleX()
 scaleY()
 scale()
 skewX()
 skewY()
 skew()
 matrix()

The translate() Method

The translate() method moves an element from its current position (according to the parameters
given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down
from its current position:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>


<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>
OUTPUT:
The translate() Method

The translate() method moves an element from its current position:

This div element is moved 50 pixels to the right, and 100 pixels down from its current position.

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given


degree.

The following example rotates the <div> element clockwise with 20 degrees:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>
OUTPUT:

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise.

This a normal div element.


This div element is rotated clockwise 20 degrees.
The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters
given for the width and height).

The following example increases the <div> element to be two times of its original width, and
three times of its original height:

Example
div {
transform: scale(2, 3);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>
<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>
OUTPUT:

The scale() Method

The scale() method increases or decreases the size of an element.

This div element is two times of its original width, and three times of its original
height.

The scaleX() Method

The scaleX() method increases or decreases the width of an element.

The following example increases the <div> element to be two times of its original width:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>
OUTPUT:

The scaleX() Method

The scaleX() method increases or decreases the width of an element.

This div element is two times of its original width.


The scaleY() Method

The scaleY() method increases or decreases the height of an element.

The following example increases the <div> element to be three times of its original height:

Example
div {
transform: scaleY(3);
}
The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees along the X-axis:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>
<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>
OUTPUT:

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

This a normal div element.


This div element is skewed 20 degrees along the X-axis.

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 20 degrees along the Y-axis:
Example
div {
transform: skewY(20deg);
}
The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees
along the Y-axis:

Example
div {
transform: skew(20deg, 10deg);
}
The matrix() Method

The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to
rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(),


translateY())

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>
OUTPUT:

The matrix() Method

The matrix() method combines all the 2D transform methods into one.

This a normal div element.


Using the matrix() method.
Another use of the matrix() method.

CSS 3D Transforms

CSS also supports 3D transformations.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:

2D rotate
3D rotate
CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation methods:

 rotateX()
 rotateY()
 rotateZ()
The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>
OUTPUT:

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree.

This a normal div element.


This div element is rotated 150 degrees.

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

Example
#myDiv {
transform: rotateY(150deg);
}
The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:
Example
#myDiv {
transform: rotateZ(90deg);
}

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

CSS
How to Use CSS Transitions?

To create a transition effect, you must specify two things:

 the CSS property you want to add an effect to


 the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default
value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has also
specified a transition effect for the width property, with a duration of 2 seconds:

Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div>
element:

<!DOCTYPE html>

<html>

<head>
<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

div:hover {

width: 300px;

</style>

</head>

<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>

</html>

OUTPUT:

The transition Property

Hover over the div element below, to see the transition effect:

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:

 ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
 linear - specifies a transition effect with the same speed from start to end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

width: 300px;
}

</style>

</head>

<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>

<div id="div2">ease</div><br>

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div><br>

</body>

</html>

OUTPUT:

The transition-timing-function Property

Hover over the div elements below, to see the different speed curves:

linear

ease

ease-in
ease-out

ease-in-out

CSS Animations

CSS allows animation of HTML elements without using JavaScript!

CSS

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will
last for 4 seconds, and it will gradually change the background-color of the <div> element from
"red" to "yellow":

<!DOCTYPE html>

<html>

<head>
<style>

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>

</html>

OUTPUT:

CSS Animation

Note: When an animation is finished, it goes back to its original style.

You might also like