Scribd
Upload
26 views64 pages

WE Unit II

The document provides an overview of web design fundamentals, focusing on HTML and HTML5, including their structure, elements, and new features. It covers various HTML tags, form elements, multimedia support, and semantic elements introduced in HTML5. Additionally, it discusses the advantages and disadvantages of HTML5, as well as examples of how to use different HTML elements effectively.

Uploaded by

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

WE Unit II

The document provides an overview of web design fundamentals, focusing on HTML and HTML5, including their structure, elements, and new features. It covers various HTML tags, form elements, multimedia support, and semantic elements introduced in HTML5. Additionally, it discusses the advantages and disadvantages of HTML5, as well as examples of how to use different HTML elements effectively.

Uploaded by

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

UNIT II WEB DESIGNING

HTML – Form Elements - Input types and Media elements - CSS3 - Selectors,
BoxModel, Backgrounds and Borders, Text Effects, Animations, Multiple
Column Layout, User Interface.

HTML5
HTML stands for Hyper Text Markup Language, which is the most widely used language on
Web to develop web pages.
HTML describes the structure of a Web page
HTML is not a case sensitive language.
HTML program can be written in simple Notepad or WordPad text editors. The extension to
this program should be either html or him
HTML consists of a series of elements
HTML elements tell the browser how to display the content
Hyper Text Transfer protocol (HTTP) is a request/Response, stateless protocol for
communication, to transfer information on LAN and WWW
Features of HTML5.0
The HTML doctype is just impossible to memorize (! Doctype html public”...)
New HTML doctype is <! Doctype html>
There are new graphic elements such as <Canvas> and <svg> in HTML5.0
The support for multimedia elements such as
<audio> and <video>
It has support for <header>, <footer>, <article> and <section>
It has support for new form control such as Number, date, time, calendar and range.
It has a rich set of application program interface for geolocations, HTML drag and drop, local
storage comer, application catch and so on
HTML HTML 5
Doctype declaration in htmlis too long The DOCTYPE declaration in html5 is very
<!DOCPE HTML PUBLIC"-//W3C// DTD simple "<!DOCTYPE htmt>
HTML 4.01 //EN" "http://
www.w3.org/TR/html4/strict.dtd">
<audio> and <video>tagsare not supported. <audio> and <video> tags are supported for
playing audio and video files.
Finding out geographiclocation is impossible The HTML5 supports the API for
using HTML identifying the geographic location.

Web Essentials IT@AVCCE


It supports the tag such as <applet>, <big>, The tags that are removed from HTML5 are
<center>, <font>,<frame><strike> <applet>, <big>, <center>,<font>, <frame>,
<strike>
Does not allow javaScript to run in browser. It allow JavaScript to run inbackground
JavaScript runs in same thread as browser
interface.
There is no support for <canvas> The <canvas> tag is for 2D drawing
Need external plugin suchas flash The need for externalplugin is reduced.

HTML TAGS AND ELEMENTS


HTML is written in the form of HTML elements consisting of markup tags. These markup tags
are the fundamental characteristic of HTML. Every markup tag is composed of a keyword,
surrounded by angle brackets, such as <html>, <head>, <title>, <body>
An HTML tag is defined as a command that tells the web browser, how to display the text,
audio, video, and graphics on a web page when loaded.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
Example of HTML.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body> <!- SIMPLE HTML PROGRAM->
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)

Web Essentials IT@AVCCE


The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
The comment in HTML can be denoted as follow
<!-- it is a comment statement -->
Basic Element of HTML
 Heading
 Paragraph
 Line break
 Font
 Text alignment
 Font color
Heading
There are header tag which help to display the text as some header video.
The header tag is denoted by hl h2 and so on up to h6.
Example:
<h1>First Header</h1>
<h2>Second Header</h2>
<h3>Third Header</h3>
<h4>Fourth Header</h4>
<h5>Fifth Header</h5>
<h6>Sixth Header</h6>
Paragraph
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element
EX: <p> This is some text in a paragraph.</p>
Line break
The <br> tag inserts a single line break.
EX: <p>Hi<br> Welcome<br> Raja<br></p>

Web Essentials IT@AVCCE


Font style
1. Bold
2. Strong
3. Italic
Bold
The HTML <b> element defines bold text, without any extra importance.
EX: <b>This text is bold</b>
Strong
The HTML <strong> element defines text with strong importance. The content is typically
displayed in bold.
EX: <strong>This text is important!</strong>
Italic
The HTML <i> element displayed in italic.
EX: <i>This text is italic</i>
Text alignment
The text-align property specifies the horizontal alignment of text in an element.
EX:
<div align="center">Center</div>
<div align="left">left align</div>
<div align="right">right</div>
Font color
The HTML <font> face Attribute is used to specify the font family of the text inside <font>
element.
The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
EX:
<body>
<font face="arial" size="20" color="green"/> Hi bro...
</body>
Hyperlink
HTML links are hyperlinks. By click on a link and jump to another document.
Use hyperlink by using a tag <a> and by specifying the URL for href.
The value assigned to href specifies the target of the link.

Web Essentials IT@AVCCE


The <a> means beginning of the web link and </a> means end of the web link.
EX: <a href="https://www.google.com/">Google!</a>
<a href="home.html">Home</a>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns. The HTML tables
allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. The elements under <td> are regular and left
aligned by default.
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. To background bgcolor attribute "You can set background
color for whole table or just for one cell.
<table border="1 bgcolor="yellow">
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = “1" bgcolor="yellow">
<tr>
<th>Name</th>
<th>Mark</th>
</tr>
<tr>
<td>kala</td>
<td>50</td>
</tr>
<tr>
<td>Mala</td>
<td>70</td>
</tr>
</table>
</body>
</html>

Web Essentials IT@AVCCE


Output

Col span and Row span


The colspan attribute defines the number of columns a cell should span (or merge)
horizontally.
The rowspan attribute specifies the number of rows a cell should span vertically.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green">
<tr>
<th colspan="2">Items</th>
<th>Price</th>
</tr>
<tr>
<th>Shirt</th>
<th>Pant</th>
<td rowspan="2">1000</td>
/tr>
<tr>
<td>400</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output

Web Essentials IT@AVCCE


Lists
List is nothing but the collections of item or element. HTML Lists are used to specify lists of
information. All lists may contain one or more list elements.
There are two types of lists:
1. unordered list
2. ordered lists.
unordered list
<ul>"An unordered list. This will list items using plain bullets.
<ul type="square">
<ul type="disc">
<ul type="circle">
Example:
<!DOCTYPE html>
<html>
<head><title>HTML Unordered List</title></head>
<body>
<ul type="square">
<li>Sachin</li>
<li>Dhoni</li>
<li>Kohli</li>
</ul>
</body>
</html>
Output

ordered list
<ol>"An ordered list. This will use different schemes ofnumbers to list your items.
<ol type="1">- Default-Case Numerals.
<ol type="I">- Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Web Essentials IT@AVCCE


Example:
<!DOCTYPE html>
<html>
<head><title>HTML Unordered List</title></head>
<body>
<ol type = "a">
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ol>
</body> </html>
Output

Image
To display image <img> tag and src attribute is used.
<img src="">within the double quotes image file should be mentioned. Normally .gif or .jpg
file are used to display the image.
The src attribute suggests us to give the image file name.
The alt attribute displays the text when it is not possible to display the image.
Example:
<!DOCTYPE html>
<html>
<head><title>Image</title></head>
<body>
<h1>India</h1>
<img src=”Flag.jpg" alt="symbol" width="290"height="170"/>
</body>
</html>
New Added Elements in HTML 5
<article>: The <article> tag is used to represent an article. More specifically, the content within
the <article> tag is independent from the other content of the site (even though it can be related).
<aside>: The <aside> tag is used to describe the main object of the web page in a shorter way
like a highlighter. It basically identifies the content that is related to the primary content of the
web page but does not constitute the main intent of the primary page. The <aside> tag contains
mainly author information, links, related content and so on.

Web Essentials IT@AVCCE


<figcaption>: The <figurecaption> tag in HTML is used to set a caption to the figure element
in a document.
<figure>: The <figure> tag in HTML is used to add self-contained content like illustrations,
diagrams, photos or codes listing in a document. It is related to main flow but it can be used in
any position of a document and the figure goes with the flow of the document and if remove it
then it should not affect the flow of the document.
<header>: It contains the section heading as well as other content, such as a navigation links,
table of contents, etc.
<footer>: The <footer> tag in HTML is used to define a footer of HTML document. This
section contains the footer information (author information, copyright information, carriers
etc). The footer tag are used within body tag. The <footer> tag is new in the HTML 5. The
footer elements require a start tag as well as an end tag.
<main>: Delineates the main content of the body of a document or web app.
<mark>: The <mark> tag in HTML is used to define the marked text. It is used to highlight
the part of the text in the paragraph.
<nav>: The <nav> tag is used to declaring the navigational section in HTML documents.
Websites typically have sections dedicated to navigational links, which enables user to navigate
the site. These links can be placed inside a nav tag.
<section>: It demarcates a thematic grouping of content.
<details>: The <details> tag is used for the content/information which is initially hidden but
could be displayed if the user wishes to see it. This tag is used to create interactive widget
which user can open or close it. The content of details tag is visible when open the set attributes.
<summary>: The <summary> tag in HTML is used to define a summary for the <details>
element. The <summary> element is used along with the <details> element and provides a
summary visible to the user. When the summary is clicked by the user, the content placed inside
the <details> element becomes visible which was previously hidden. The <summary> tag was
added in HTMI 5. The <summary> tag requires both starting and ending tag.
<time>: The <time> tag is used to display the human-readable data/time. It can also be used
to encode dates and times in a machine-readable form. The main advantage for users is that
they can offer to add birthday reminders or scheduled events in their calender's and search
engines can produce smarter search results.
<bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from other
text that may be formatted in different direction. This tag is used when a user generated text
with an unknown directions.
<wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define the
position within the text which is treated as a line break by the browser. It is mostly used when
the used word is too long and there chances that the browser may break lines at the wrong place
for fitting the text. are

Web Essentials IT@AVCCE


<datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files. It
can be used with input tag, so that users can easily fill the data in the forms using select the
data.
<keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a form.
The purpose of <keygen> element is to provide a secure way to authenticate users. When a
from is submitted then two keys are generated, private key and public key. The private key
stored locally, and the public key is sent to the server. The public key is used to generate client
certificate to authenticate user for future.
<output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.
<progress>: It is used to represent the progress of a task. It is also defined that how much work
is done and how much is left to download a things. It is not used to represent the disk space or
relevant query.
<svg>: It is the Scalable Vector Graphics.
<canvas>: The <canvas> tag in HTML is used to draw graphics on web page using JavaScript.
It can be used to draw paths, boxes, texts, gradient and adding images. By default, it does not
contains border and text.
<audio>: It defines the music or audio content.
<embed>: Defines containers for external applications (usually a video player).
<source>: It defines the sources for <video> and <audio
<track>: It defines the tracks for <video> and <audio>.
<video>: It defines the video content.
Advantages
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc can help build beautiful websites.
Disadvantages
 Long codes have to be written which is time consuming.
 Only modern browsers support it.

Semantic Element
1. A semantic element clearly describes its meaning to both the browser and the developer.
2. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
3. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its

Web Essentials IT@AVCCE


content.
<header>
<nav>
<section>
<aside>
<article>
<footer>

Section:
The <section> element defines a section in a document.
According to HTML5 documentation: "A section is a thematic grouping of content, typically
with a heading."
A home page could normally be split into sections for introduction, content, and contact
information.
Examples of where a <section> element can be used:
 Chapters
 News items
Example:
<body>
<section>
<h1>HTML</h1>
<p>HyperText Markup Language</p>
</section>
<section>
<h1>CSS</h1>
<p>Cascading Style Sheet</p>
</section>
</body>

Output:

Web Essentials IT@AVCCE


Article
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently
from the rest of the web site.
Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
Example
<body>
<article>
<section>
<h1>HTML</h1>
<p>HyperText Markup Language</p>
</section>
<section>
<h1>CSS</h1>
<p>Cascading Style Sheet</p>
</section>
</article>
</body>

Output:

Header
The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content. The following
example defines a header for an article:
Example:
<article>
<header>
<h1>What Does HTML Do?</h1>

Web Essentials IT@AVCCE


<p>HTML</p>
</header>
<p>Create Webpage</p>
</article>
Output:

Footer
The <footer> element defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms
of use, contact information, etc.
Example:
<footer>
<p>Author: John</p>
<p>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</footer>

Output:

nav
The <nav> element defines a set of navigation links.
Example:
<nav>
<a href="/html/">HTML</a>| <a href="/css/">CSS</a>
</nav>

Output:

Web Essentials IT@AVCCE


Aside
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
The <aside> content should be related to the surrounding content.
Example:
<p>India is a country with great culture.</p>
<aside>
<h3>Note</h3>
<p>India</p>
</aside>
Output:

Figure and figcaption


The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can
be placed as the firstor as the last child of a <figure> element.
Example:
<h1>India</h1>
<img src="bike.jpg" alt="symbol" width="190"height="70"/>
<figcaption>Fig. 1 Yamaha Bike</figcaption>
Output

Why Semantic Elements?


 With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
 This made it impossible for search engines to identify the correct web page content.

Web Essentials IT@AVCCE


 With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
 According to the W3C, a Semantic Web: "Allows data to be shared and reused across
applications, enterprises, and communities."
Semantic Elements in HTML5
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
Drag and Drop
Drag and drop is a very common feature. It is when you grab an object and drag it to a different
location.
Events & Description
Drag start: Fire when the user starts dragging of the object.
Drag enter: Fired when the mouse is first moved over the target element while a drag is
occurring.
Dragover: This event is fired as the mouse is moved over an element when a drag is occurring.
Drag leave: This event is fired when the mouse leaves an element while a drag is occurring.
Drag: Fires every time the mouse is moved while the object is being dragged.
Drop: The drop event is fired on the element where the drop was occurred at the end of the
drag operation
Dragend: Fires when the user releases the mouse button while dragging an object.

Web Essentials IT@AVCCE


Example:
<!DOCTYPE HTML>
<html>
<head>
<style>#div {
width: 350px; height: 70px; padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<br>
<img id="drag1" src="bike.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="69">
</body>
</html>
Output:

Web Essentials IT@AVCCE


HTML FORM ELEMENTS
A form is an area that can contain form elements
The syntax is: <form parameters> ...form elements... </form>
Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc.
Other kinds of tags can be mixed in with the form elements
A form usually contains a Submit button to send the information in the form elements to the
server form
The form's parameters tell JavaScript how to send the information to the server there are two
different ways it could be sent) serve
Forms can be used for other things, such as a GUI for simple programs
Tags Description
<form> To define a HTML form for user inputs
<input> To define input control
<datalist> To specify a list of pre-defined options
<fieldset> To define group related elements
<keygen> To define a secure input
<label> To define a label of input
<legend> To define a caption for fieldset
<optgroup> To define a group of similar options.
<option> To define an option for the drop-down.
<output> To define a result
<select> To define a list of the drop-down.
<textarea> To define a multiline input area.

Web Essentials IT@AVCCE


SYNTAX AND EXAMPLE
Some syntaxes and examples of HTML Form Elements with outputs are discussed below:
1. "<form>" element
This element can contain many other elements as well including the below:
 <input>
 <output>
 <label>
 <select>
 <button>
 <option>
 <textarea>
 <optgroup>
 <fieldset>
Example for a "<form>" element with input and submit button:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/test_page.php">
Your name: <input type="text" name="Name" value="Raju"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

2. "<input>" element
This element is an inline element and belongs to the form-element group.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Input name: <input type="text" name="name" value=""><br>
Input age: <input type="text" name="age" value=""><br>
<input type="submit" value="Submit">
</form> </body> </html>

Web Essentials IT@AVCCE


Output:

3.<datalist> element
It usually specifies a pre-defined list of inputs for <input> element where users can choose any
option from the pre-defined list.
Example:
<DOCTYPE html>
<html>
<body>
<form action="/test_page.php" method="get">
<input list ="fruits" name="fruit">
<datalist id="fruits">
<option value="Mango">
<option value="Apple">
<option value="Banana">
<option value="Pomegranate">
<option value="Pineapple">
</datalist>
<input type="submit">
</form>
</body>
</html>
Output:

4. <fieldset> ”element
This element is basically used to group related elements in forms and draws a box around
similar elements.
Example:
<!DOCTYPE html>
<html>

Web Essentials IT@AVCCE


<body>
<form>
<fieldset>
<legend>Celebrity:</legend>
Name: <input type="text"><br>
Phone: <input type="number"><br>
Age: <input type="text">
</fieldset>
</form>
</body>
</html>
Output:

5. <keygen>" element
This element may be located outside the form, but it might still be a part of the form. Usually,
this element is used to specify one or more forms. This element is newly used in the HTML5
version to generate an encryption key to pass encrypted data over a form in a website based on
HTML.
Syntax:
<keygen form=”form_id”>
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/test_page.php" method="get" id="secureform">
Username: <input type="text" name="user_name">
<input type="submit">
</form>
<p>The below mentioned keygen field is outside of the form, but it's still a part of the above
form.</p>
Encryption: <keygen name="security" form="secureform">
</body>
</html>

Web Essentials IT@AVCCE


Output:

6. <label>" element
This element basically gives a name for the input form to make the understand what input data
it should be. It acts as an indicator for users. Syntax:
Syntax:
<label for="control id"> ... </label>
Example:
<!DOCTYPE html>
<head>
<title>Example of HTML label tag</title>
</head>
<body>
<form>
<input type="radio" name="gender" value="boy" id="boy">
<label for="boy">Boy</label>
<input type="radio" name="gender" value="girl" id="girl"> <label for="girl">Girl</label>
</form>
</body>
</html>
Output:

7. <legend> element
This element actually defines a caption for a <fieldset> element. It's kind of a supporting
element for another element, a part of the group element.
Example:
<!DOCTYPE html>
<head>
<title>Example of HTML legend tag</title>
</head>
<body>
<form>
<fieldset>
<legend>Celebrity:</legend>

Web Essentials IT@AVCCE


Name: <input type="text"><br>
Phone: <input type="number"><br>
Age: <input type="text">
</fieldset>
</form>
</body>
</html>
Output:

8. <optgroup> element
This element is a group-related element used for options in a drop-down list in an HTML form.
It helps the users to handle a long list easily.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML legend tag</title>
</head>
<body>
<select>
<optgroup label="Kawasaki Bikes">
<option value="ninja300">Ninja 300</option>
<option value="ninja450">Ninja 450</option>
</optgroup>
<optgroup label="Bajaj Bikes">
<option value="pulsar200">Pulsar 200</option>
<option value="pulsar 150">Pulsar 150</option>
</optgroup>
</select>
</body> </html>
Output:

Web Essentials IT@AVCCE


9. "<option>" element
This element is used to represent an option from a dropdown list under <select> element; the
dropdown list must contain at least one option.
Syntax:
<option value="option-value"> ... </option>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML option tag</title>
</head>
<body>
<form>
<select>
<option value="Bikes"> Bikes </option>
<option value="Cars"> Cars </option>
<option value="Buses"> Buses </option>
</select>
</form>
</body>
</html>
Output:

10. "<output>" element


This element is basically used to show the output of a calculation (e.g. in a scripted calculation).
Syntax:
<output> ... </output>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML output Tag</title>
</head>
<body>

Web Essentials IT@AVCCE


<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
<input type="range" id="x" value="50"> +
<input type="number" id="y" value="100">=
<output name="result" for="x y"></output>
</form>
</body>
</html>
Output:

11. "<select>" element


This element is used to make a selection from a list within a form.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML select Tag</title>
</head>
<body>
<form>
<select>
<option value="Bike">Bike</option>
<option value="Car">Car</option>
<option value="Bus">Bus</option>
</select>
</form>
</body> </html>
Output:

12. "<textarea>" element


This element is used to define multi-line text inputs (e.g. for address).
Syntax:
<textarea cols="50" rows="6">Put here...</textarea>

Web Essentials IT@AVCCE


Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML textarea Tag</title>
</head>
<body>
<form>
<p> Put your Comment:
<textarea cols="30" rows="4">Put here...</textarea>
</p>
</form>
</body>
</html>
Output:

Media Elements
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see,
like images, music, sound, videos; records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color. Later
came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv,
and .avi.
Common Video Formats
There are many video formats out there. The MP4, WebM, and Ogg formats are supported by
HTML.

Web Essentials IT@AVCCE


The MP4 format is recommended by Youtube.
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert
Group. The first popular video format on the web. Not
.mpeg
supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by
Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but not
in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by
Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but not
in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in
video cameras and TV hardware. Plays well on Apple
computers, but not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video
streaming with low bandwidths. Does not play in web
.ram
browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an
extra component (plug-in) to play in web browsers.
.flv
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation.
Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and
Google. Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert
Group. Commonly used in video cameras and TV
Or MP4
browsers and hardware. Supported by all
recommended by YouTube.

HTML Video
The HTML <video> element is used to show a video on a web page.
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">

Web Essentials IT@AVCCE


Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p>
</body>
</html>
Autoplay
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as
<video> and <audio>
<track> Defines text tracks in media players

The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

Web Essentials IT@AVCCE


CASCADING STYLE SHEETS (CSS3)
CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for
describing the presentation (i.e. the layout and formatting) of the web pages. CSS3 is the latest
version of the CSS specification. CSS3 adds several new features and improvements to enhance
the web presentation capabilities. styling
Syntax:
selector { property : value }
Types:
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements -
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file The most common
way to add CSS, is to keep the styles in external CSS files.
CSS basic properties:
1. Font-family: Set the font for the given item.
Eg: h1 { font-family: Times New Roman;}
2. Font-size: Set the font for the given item.
Eg: p{ font-size: 30px;}
3. Color: Set the font color for the given item.
Eg: h1 {color: green;}
4. Background-color: Set the background color for the given item.
Eg: h1 {background-color: red;}
5. Text-align: Set the text alignment for the given item.
Eg: H1 {text-align: center;}
Some other property:
<p style="border-style: dotted">border</p>
<p style="margin: 35px">border</p>
<p style="padding: 15px; border: 1px solid">border with padding</p>
Inline
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses
the style attribute of an HTML element.
Example:
<!DOCTYPE html>

Web Essentials IT@AVCCE


<body>
<h1 style="color:blue;">cse lab</h1>
<p style="color:red;">IP</p>
</body>
</html>

Output:

Internal or Embedded or Document level style sheet


 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a <style>
element.
Example:
<!DOCTYPE html>
<html>
<head> <!— Embedded stylesheet ->
<style> hl
{
color: blue;
}
</style>
</head> <body>
<h1>CSS</h1>
<p>Cascading Style Sheet</p>
</body> </html>
Output

External Style
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each HTML page

Web Essentials IT@AVCCE


• The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
• With an external style sheet, you can change the look of an entire web site, by changing
one file
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="External.css">
</head>
<body>
<h1>External CSS</h1>
<p>External Cascading StyleSheet</p>
</body>
</html>

External.css
h1
{
color: blue;
}
р
{
color: red;
}
Output

Advantage:
• Easily apply same style rules on multiple elements.
• Control the presentation of multiple pages of a website with a single style sheet.
• Present the same page differently on different devices.

Web Essentials IT@AVCCE


CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output

Web Essentials IT@AVCCE


The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The CSS rule below will be applied to the HTML element with id="para1":
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {

Web Essentials IT@AVCCE


text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output

You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Output

Web Essentials IT@AVCCE


HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class="center" and to
class="large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
</body>
</html>
Output

Web Essentials IT@AVCCE


The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output

The CSS Grouping Selector


The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2{
text-align: center;
color: red;
}

Web Essentials IT@AVCCE


p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>
Output

The CSS Box Model


In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box
model:

Web Essentials IT@AVCCE


Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between
elements.
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green; padding: 50px;
margin: 20px;
}

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green; padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element It consists
of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. </div>
</body>
</html>

Web Essentials IT@AVCCE


Output

When multiple style sheets are used, the style sheets may fight over control of a particular
selector. In these situations, there must be rules as to which style sheet's rule will win out. The
following characteristics will determine the outcom of contradictory style sheets.! important
The important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that
specific property on that element!
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
color: green;
}
p{
color: red !important;
}
</style>
</head>
<body>
<p class="myclass">This is some text in a paragraph.</p>
</body>
</html>
Output:

Web Essentials IT@AVCCE


Inheritance
In CSS, if a property of an element has no associated declarations then using inheritance
technique the value for this property can be obtained.

In an HTML document, the tags have parent-child relationships. For example, <title> tag is
always inside the <head> tag, so the <head> tag is the parent of the <title> tag
Similarly <P> tag is defined inside the <body> tag. Then <body> becomes parent of <p> tag.
In cascading style sheets, inheritance is based on tree structure of the document itself.
An element inherits the value for its properties by checking the parent element. If the parent
has the value for the property demanded by the child then this property value can be inherited”
If L, parent down not have this value, then its parent (i.e. grandparent) is checked. If this parent
‘a no such property value then its parent is checked. This process is continued until a root
element is obtained.
Thus the search will be made in upward direction from the parent of the element to the root of
the tree or to the <html> tag of the document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inheritance Demo</title>
<style type="text/css">
p{
color: blue; background-color:yellow;
}
strong{
font-size:24px;
}
</style>
</head>
<body>
<center>
<p>This is a blue text <strong>with</strong> yellow background</p>
</center>
</body>
<html>

Output

Web Essentials IT@AVCCE


BACKGROUNDS
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated
both vertically and horizontally.
The CSS background properties are used to add background effects for elements.
The following CSS background properties are:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)
CSS background-color
The background-color property specifies the background color of an element.
Example
The background color of a page is set like this:
body {
background-color: lightblue;
}

CSS background-image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}
CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
If the image above is repeated only horizontally (background-repeat: repeat-x;), the
background will look better:

Web Essentials IT@AVCCE


Example

Web Essentials IT@AVCCE


Example

Web Essentials IT@AVCCE


Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the background-repeat
property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

CSS background-position
The background-position property is used to specify the position of the background image.
Example
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("tree.jpg");
background-repeat:no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>The background-image</h1>

Web Essentials IT@AVCCE


</body>
</html>

Output

CSS Background Attachment


The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page):
Example
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Example
Specify that the background image should scroll with the rest of the page:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

Web Essentials IT@AVCCE


CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:
Example
Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("tree.jpg") no-repeat right top;
}

BORDER
The CSS border properties allow you to specify the style, width, and color of an element's
border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Web Essentials IT@AVCCE


Example
Demonstration of the different border styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:

CSS Border Width


The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
Example
Demonstration of the different border widths:
p.one {
border-style: solid;

Web Essentials IT@AVCCE


border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
Result

Specific Side Widths


The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border):
Example
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
 name - specify a color name, like "red"

Web Essentials IT@AVCCE


 HEX - specify a HEX value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 transparent
If border-color is not set, it inherits the color of the element.
Example
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: green;
}
p.two {
border-style: dotted;
border-color: blue;
}
Result

Specific Side Colors


The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border).
Example
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

CSS Border - Individual Sides


It is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):
Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;

Web Essentials IT@AVCCE


border-left-style: solid;
}
Result:

CSS Border - Shorthand Property


To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
 border-width
 border-style (required)
 border-color
Example
p{
border: 5px solid red;
}
Result

Border Images
The border-image property allows you to specify an image to be used as the border around an
element.
The border-image property is a shorthand property for: border-image-source border-image-
slice border-image-width border-image-outset border-image-repeat
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30
round; }
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p id="borderimg1">Border image</p>
</body>
</html>

Web Essentials IT@AVCCE


Output

Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:gray;">Hello World</h1>
<h1 style="color:#FF5733;">Hello World</h1>
</body>
</html>

Output:

Shadows
With CSS shadow is added to text and elements. The shadow effects in css3 are in two
categories.
1. Text-shadow
2. Box-shadow
Text-shadow:
The text-shadow property applies shadow to the text
Example:
<!DOCTYPE html>
<html>
<head>
<style>
hl{
text-shadow: 2px 2px;
}
</style></head>

Web Essentials IT@AVCCE


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

Output:

Box-shadow
The CSS box-shadow property is used to apply one or more shadows to an element.
Example:
<!DOCTYPE html>
<html>
<head> <style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style> </head>
<body>
<div>Box-shadow</div>
</body>
</html>

Output:

Web Essentials IT@AVCCE


TEXT
CSS Text Effects:
Word Wrapping:
The CSS word-wrap property allows long words to be able to be broken and wrap onto the next
line.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<p class="test">Hi...Everyone.. Welcome you all...</p>
</body>
</html>
Output:

Text-shadow:
The text-shadow property adds shadow to text.
This property accepts a comma-separated list of shadows to be applied to th text.
Example:
<!DOCTYPE html>
<html><head>
<style>
hl{
text-shadow: 2px 2px #FF0000;
}
</style>
</head>

Web Essentials IT@AVCCE


<body>
<h1>The text-shadow Property</h1>
</body>
</html>

Output:

Transformations
The transform property applies a 2D or 3D transformation to an element. This property allows
you to rotate, scale, move, skew, etc., elements.
2D transformation:
 CSS transforms allow you to move, rotate, scale, and skew elements.
 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)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px; height: 50px;
background-color: yellow; border: 1px solid black;
transform: translate(50px,60px);
}
</style>
</head>
<body>
<h1>The translate() Method</h1>
<div>
This div element is moved 50 px to the right, and 60 px down from its current
position. </div>
</body>
</html>

Web Essentials IT@AVCCE


Output

3D transformation:
CSS also supports 3D transformations.
The rotateX() Method:
The rotateX() method rotates an element around its X-axis
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px; height: 50px;
background-color: yellow; border: 1px solid black;
}
#myDiv {
transform:rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>

Web Essentials IT@AVCCE


</body>
</html>
Output:

Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
Example:
<!DOCTYPE html>
<html> <head>
<style>
div{ width: 100px; height: 50px; background: red; transition:width 2s;
}
div:hover{
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<div></div>
</body> </html>

Output

Web Essentials IT@AVCCE


ANIMATIONS
CSS allows animation of HTML elements without using JavaScript
An animation lets an element gradually change from one style to another.
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.
CSS Animation Properties
The following table lists the @keyframes rule and all the CSS animation properties:
Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards,
backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete
one cycle
animation-fill-mode Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing- Specifies the speed curve of the animation
function

Web Essentials IT@AVCCE


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":
Example:
<!DOCTYPE html>
<html><head>
<style>
div {
width: 100px; height: 30px;
animation-name: example; animation-duration: 4s;
}
@keyframes example {
from {background-color: red;} to {background-color: yellow;}
}
</style>
</head>
<body>
<h3>CSS Animation</h3>
<div></div>
</body>
</html>

The animation-duration property defines how long an animation should take to complete. If
the animation-duration property is not specified, no animation will occur, because the
default value is 0s (0 seconds).
Example
<!DOCTYPE html>
<html> <head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

Web Essentials IT@AVCCE


</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>

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</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>

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.
The following example has a 2 seconds delay before starting the animation:

Web Essentials IT@AVCCE


Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The
following example has a 2 seconds delay before starting the animation:</p>
<div></div>
</body>
</html>

Set How Many Times an Animation Should Run


The animation-iteration-count property specifies the number of times an animation should
run.
The following example will run the animation 3 times before it stops:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;

Web Essentials IT@AVCCE


height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation
should run. The following example will run the animation 3 times before it stops:</p>
<div></div>
</body>
</html>
The following example uses the value "infinite" to make the animation continue for ever:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

CSS MULTI-COLUMN LAYOUT


CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts.
Support is included for establishing the number of columns in a layout, as well as how content
should flow from column to column, gap sizes between columns, and column dividing lines
(known as column rules) along with their appearance.

Web Essentials IT@AVCCE


Multi-column properties
 column-count
 column-gap
 column-rule-style
 column-rule-width
 column-rule-color
 column-rule
 column-span
 column-width
Property Description
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column- rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns.
columns A shorthand property for setting column-width and column-count

Example
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
</style>
</head>
<body>
<h1>Create Multiple Columns</h1>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel

Web Essentials IT@AVCCE


illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</div>
</body>
</html>

CSS USER INTERFACE


The following CSS user interface properties:
 resize
 outline-offset
The following table lists all the user interface properties:
Property Description
resize Specifies whether or not an element is resizable by the user
outline-offset Adds space between an outline and the edge or border of an
element

CSS Resizing
The resize property specifies if (and how) an element should be resizable by the user.
Example
div {
resize: horizontal;
overflow: auto;
}
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
The following example lets the user resize only the width of a <div> element:
<!DOCTYPE html>
<html><head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}

Web Essentials IT@AVCCE


</style> </head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>

The following example lets the user resize only the height of a <div> element:
Example
div {
resize: vertical;
overflow: auto;
}
The following example lets the user resize both the height and width of a <div> element:
Example
div {
resize: both;
overflow: auto;
}
In many browsers, <textarea> is resizable by default. Here, we have used the resize property
to disable the resizability:
Example
textarea {
resize: none;
}

CSS Outline Offset


The outline-offset property adds space between an outline and the edge or border of an element.
The following example uses the outline-offset property to add space between the border
and the outline:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;

Web Essentials IT@AVCCE


border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}

div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border
edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border
edge.</div>

</body>
</html>

Web Essentials IT@AVCCE

You might also like