It3401 Web Essentials Unit 2 Notes

lOMoARcPSD|39184047
IT3401 WEB Essentials UNIT 2

lOMoARcPSD|39184047
UNIT – II
WEB DESIGNING
HTML – Form Elements - Input types and Media elements - CSS3 - Selectors, Box
Model, Backgrounds and Borders, Text Effects, Animations, Multiple Column
Layout, User Interface.
2.1. HTML:
2.1.1. Introduction to HTML
 HTML stands for HyperText Markup Language. Hypertext is simply a piece of text that works
as a link.
 Markup Language is language of writing layout information within documents.
 Basically an HTML document is a plain text file.
 It contains rich text. The rich text means text with tags.
 HTML is not a case sensitive language.
 Any HTML program can be written in simple Notepad or WordPad text editors. The extension
to this program should be either html or htm.
 This program then can be opened in some web browser and the corresponding web page can be
viewed. Let us create our first web page using HTML.
2
lOMoARcPSD|39184047
2.1.2. HTML Document

<html>
<head>
<title>My webpage</title>
</head>
<body>
This is my first Web Page!!!
</body>
</html>
Script Explanation
1) Note that the program consists of some strings enclosed within angular brackets.
Such strings are called tags.
2) The HTML program should be written within <html> and </html>. The <html> indicates
the start of html program and </html> denotes end of html program. Use of slash (/) in the
angular bracket indicates end of that particular tag.
3) Any HTML program has two prominent parts : head and body. The head part acts as a header of a
file and contains some information like setting the title of web page.
2.1.3. Comments in HTML
 The comment in HTML can be denoted as follows -
 
 There should not be a space between angular bracket and exclamation mark. This comment is
beginning with . Also note one thing that there should not be any -- inside
the comment.
2.1.4. Some Fundamental HTML Elements
 In all HTML/XHTML documents the root element is <html> which has two children : head
and body.
 Any text contained within the head element does not appear directly in the client area of web
browser. The head element is used for providing certain information to web browser. The <title>
element is used to give title to the web page. Note that this title does not appear in client area.
Rather it appears at the top of web browser.
 The <body> element contains the information which is to be displayed in the client area of
web browser.
 The body element can contain several fundamental elements such as <p>, <h1>, <div>,
<a>, <hr>, <br> and so on. The elements within the body part is for deciding the layout of your
web page.
2.1.5. Heading
 There are header tags which help to display the text as some header.
 The header tag is denoted by h1, h2 and so on upto h6.
3
lOMoARcPSD|39184047
 Following HTML document along with its output is itself self explanatory.
HTML Document [headerDemo.html]
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is a first header </h1>
<h2> This is a second header </h2>
<h3> This is a third header </h3>
<h4> This is a forth header </h4>
<h5> This is a fifth header </h5>
<h6> This is a sixth header </h6>
</body>
</html>
OUTPUT
2.1.6. Paragraphs
Following are the tags that are used for creating paragraphs
Tag Meaning
<p> This tag should be put at the end of every paragraph.
<pre> This tag is used to preserve the white spaces and lines in the text.
<div> This tag is used to make division of sections in the XHTML document.
Table 2.1. Paragraph Tags
For example
HTML Document[TextFormat.html]
<!DOCTYPE html>
<html >
4
lOMoARcPSD|39184047
<head>
</head>
<body>
<p>
Once upon a time, there was a king who kept a monkey as a pet The monkey served the king by all
the possible ways.
</p>
<div>
It was very hot in those days. So one day, when the king was sleeping, monkey was
fanning the king. Suddenly monkey noticed a fly on the chest of the king. The monkey
tried to swish it away. But fly would go away for one moment and come back again.
</div>
<div> So monkey decided to teach a lesson to the fly.</div>
<pre>
The monkey then looked for something to hit a
fly. It then found a stick.
It picked up the stick and tried to beat the fly using stick.
Hmmm at last it found a fly and
with all the force it hit the fly as a result of which the king died.
Lesson from the story:Never keep a fool servant !!!

</pre>
</body>
</html>
OUTPUT
5
lOMoARcPSD|39184047
2.1.7. Line Break

Output
For the line break the <br/> tag is used. This is a single line break tag. Generally this tag is
kept at the end of every line.
For example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Demo</title>
</head>
<body>
<p>
Here the line breaks <br/> and new line
starts. Again line breaks<br/> Bye.
</p>
</body>
</html>
OUTPUT
2.1.8. Setting Font Style

The font style can be of various types such as boldface, italics, and strikethrough.
6
lOMoARcPSD|39184047
Tag Purpose
<b> </b> Displays the text in bold
<i> </i> Displays the text in
italics
<strong> Displays the text in bold
</strong>
<strike> </strike> Displays the text with
strike
Table 2.2. Font Style Tags
HTML Document [FontStyle.html]

<!DOCTYPE html>
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<b> This is a bold text </b> <br/>
<i> This is in italics</i> <br/>
<strong> This is strongly emphasized text</strong> <br/>
<strike> This is striked text </strike>
<center> This will appear at the center</center> <br/>
</body>
</html>
OUTPUT
7
lOMoARcPSD|39184047
2.1.9. Text Alignment
We can align the text at left, right or at the center using a <div> tag. Here is a HTML program
which shows the text aligned left, right and centre.
HTML Document[TextAlign.html]
<!DOCTYPE html >
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<div align="center">This line is aligned at center</div>
<div align="left">This line is aligned at left</div>
<div align="right">This line is aligned at right</div>
</body>
</html>
OUTPUT
2.1.10 Setting the Font and Color
We can set the font, size and color of the text in the web page. The tag <basefont> is used for
this purpose. The optional attributes used with <basefont> tag are as given below:
Attribute Value Purpose
color Color value such as “red”, It displays the text with specified
“yellow” color.
and so on.
8
lOMoARcPSD|39184047
face Font-family such as “arial”, It displays the text with

“verdana”,”sans-serif” and specific font family.
so
on.
Size Number The text of specified size will be
displayed
using this attribute value.
Table 2.3. Font Color, Face & Size
Example:
HTML Document[SetFont.html]
<!DOCTYPE html>
<html >
<head>
<title>Setting the Text </title>
</head>
<body>
<basefont face="arial" size="10">
Varsha is sweet and <br/>
Jayashree is very naughty!!<br/>
But Sachin is a serious guy<br/>
And Rashmi is a new-comer in this group
</body>
</html>
OUTPUT
2.1.11 Background Color
HTML Document[BgColor.html]
<!DOCTYPE html>
9
lOMoARcPSD|39184047
<html>
<head>
<title>Coloring the background</title>
</head>
<body bgcolor="#FFFF00">
<h3>This document has colored background</h3>
</body>
</html>
OUTPUT
Example:
CREATION OF INTERACTIVE WEB SITES - DESIGN USING HTML AND AUTHORING

TOOLS
SOURCE CODE:
mainpage.html
<html>
<head></head>
<frameset rows="15%,*">
<frame src="top.html" />
<frame src="bottom.html" />
10
lOMoARcPSD|39184047
</frameset>
</html>
top.html
<html>
<body bgcolor="blue">
<font face="verdhana" size="20" color="pink">
<center><b>IT COMPUTER CENTRE</b><center>
</font>
<font color="pink">
<marquee scrolldelay="100" width="50%">(A Government approved Private Computer
centre)</marquee>
</font>
</body>
</html>
bottom.html
<html>
<head />
<frameset cols="21%,50%,*" border="2">
<frame src="col1.html" name="col1"/>
<frame src="col2.html" name="col2"/>
<frame src="col3.html" name="col3" />
</frameset>
</html
col1.html
<html>
<head>
<font color="red"><center><b>ADVERTISEMENT</b></center></font>
</head>
11
lOMoARcPSD|39184047
<body bgcolor="navy">
<br/><br/><br/>
<font color="lime"><img src="mobile.jpg" alt="Not able to display" /></font>

</body>
</html>
col2.html
<html>
<head><center><font color="orange"><h1>
<marquee width="40%" behavior="alternate">WELCOME TO IT COMPUTER CENTER
!!!</marquee>
</h1></font></center>
</head>
<body bgcolor="olive">
<h2>
<ul>
<li><a href="about.html" target="col2">About Us</a> <br/><br/><br/> </li>
<li><a href="Course_Details.html" target="col2">Course Details</a> <br/><br/><br/> </li>
<li><a href="features.html" target="col2">Features</a> <br/><br/><br/></li>
<li><a href="contact.html" target="col2">Contact Us</a> <br/><br/><br/> </li>
</ul>
</h2>
</body>
</html>
about.html
<html>
<head><font color="blue"><h2>ABOUT US</h2></font></head>

<body bgcolor="cyan">
<hr/>
12
lOMoARcPSD|39184047
<h3>IT COMPUTER CENTER</h3>was started in 2010 with its first branch at

AVADI, Chennai-54.<br/>
Now, there are more than 20 coaching centres allover Chennai city.<br/><br/><br/>
Our motto is: <br/><font color="blue"><center><h3>" TO PROVIDE BEST KNOWLEDGE
"</h3></center></font>
</body>
</html>
course_details.html
<html>
<head><font color="blue"><h2>COUSE DETAILS</h2></font></head>
<hr/>
The following courses are provided:-
<br/><br/><br/>
<font color="blue"><center>
<table border="2" width="60%">
<thead>
<tr><th><h3>Course</h3></th>
<th><h3>Duration</h3>(in months) </th>
</tr>
</thead>
<tbody align="left">
<tr>
<td>BLOCK CHAIN TECHNOLOGY</td>

<td align="center">4</td>
</tr>
<tr>
<td>PHYTHON PROGRAMMING</td>
13
lOMoARcPSD|39184047
</tr>
<tr>
<td>R PROGRAMMING</td>
</tr>
<tr>
<td>PROGRAMMING IN C (PLACEMENT ORIENTED)</td>
</tr>
<tr>
<td>ASP.NET / VB.NET</td>
</tr>
<tr>
<td>ORACLE / SQL SERVER DBA</td>

</tr>
<tr>
<td>COMPUTER SERVICING</td>
</tr>
<tr>
<td>CORE JAVA</td>
</tr>
<tr>
<td>J2EE</td>
lOMoARcPSD|39184047
</tr>
</tbody>
</table>
</center></font>
</body>
</html>
features.html
<html>
<head><font color="blue"><h2>FEATURES</h2></font></head>
<body bgcolor="orange">
<hr/>The following features are provided by us in all coaching centres.<br/><br/>
<h3><font color="blue">
<ul>
<li> Best Classroom Teacing with best Faculty Members</li>
<li> More pratical based training</li>
<li> Online quiz, assignment, and study materials</li>
<li> Scholarship for meritorious students</li>
<li> Industry based Projects</li>
<li> Reputed certificates </li>
</ul>and more.......
</font></h3>
</body>
</html>
contact.html
<html>
<head><font color="red"><h2>CONTACT US</h2></font></head>
15
lOMoARcPSD|39184047
<hr/>For futher details contact us:<br/><br/><br/>
<pre><b>
Main Branch Address:<font color="blue"><h3>
NO. 100, CK Towers,
2<sup>st</sup> Floor,
MTH Road,
AVADI,
CHENNAI - 600 054.</B>

</h3></font></pre>
Contact Number:
<pre><font color="blue"><h3>
Mobile :<i>+91 9894300344</i>
</h3></font></pre>
</body>
</html>
col3.html
<html>
<head />
<frameset rows="45%,*">
<frame src="login.html" />
<frame src="new.html" />

</frameset>
</html>
login.html
<html>
<head><font color="YELLOW"><center>LOGIN PAGE</center></font></head>
<body bgcolor="teal">
16
lOMoARcPSD|39184047
<form method="get" action="result1.html"><BR><BR>

USER NAME:<input type="text" size="25" /> <br><BR>
PASSWORD :<input type="password" size="25" /> <br /><br />
<center>
<input type="submit" value="LOGIN" />
<input type="reset" value="RESET" />
</center> </form>
<font color="red"><u><a href="join.html" target="col3">Join as a member</a></u></font>
</body>
</html>
result1.html
<head />
<body>
<h2><font color="blue"><pre>
"LOGGED IN
SUCCESSFULLY"
</pre></font></h2>
</body>
</html>
join.html
<html>
<head><font color="orange"><center><b>JOIN AS A
MEMBER</b></center></font></head>
<pre><form method="get" action="result2.html">
Enter your Name : <input type="text" size="20"/><br>
Enter your Email-ID: <input type="text"
size="20"/><br>
Enter your Password: <input type="password" size="15"><br>
17
lOMoARcPSD|39184047
You are a:
<input type="radio" name="c1" value="School student" /> School Student
<input type="radio" name="c1" value="College student" /> College Student

<input type="radio" name="c1" value="Working" /> Working
<input type="radio" name="c1" value="Others" /> Others
<BR>Interested in:
<input type="checkbox" name="r1" > Software</input>
<input type="checkbox" name="r1" > Hardware</input>
<input type="checkbox" name="r1" > Administrator</input>

<input type="checkbox" name="r1" > Servicing</input>
<BR>
Your comments:<input type="textarea" rows="20" col="40"
scrolling="auto"/><br>
<center><input type="submit" value="SUBMIT"> <input type="reset"
value="RESET"></center>
</form></pre>
</body>
</html>
result2.html
<html>
<head />
<body>
<h2><font color="blue"><pre>
"SUBMITTED
SUCCESSFULLY"
</pre></font></h2>
</body>
</html>
18
lOMoARcPSD|39184047
new.html
<html>
<head><font color="red"><b><h3><u>What's new?</u></h4></b></font></head>

<body bgcolor="yellow">
<marquee direction="up" scrolldelay="100" vspace="25">
<ul>
<li>A new course on <b><i>"Block Chain Technology"</i></b> has introduced
recently.</li>
<br>
<li><i>"NEW YEAR OFFER"</i>- 40% discount on course fees. Offer valid
till 10<sup>th</sup> Feb '19 only.HURRY!!!!</li><br>
<li>Results for exam held on November 2018 will be published
on 02<sup>nd</sup> January 2019</li><br>
<li>Crash courses for <b>CAT / GRE / TOFEL / XAT / TANCET</b> exams
preparation is also available now.</li><br>
</ul><br/>For further details contact our nearest
coaching centres.</marquee>
</body>
</html>
OUTPUT:
19
lOMoARcPSD|39184047
2.2. Form Elements

2.2.1. HTML Forms:
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
Example:
2.2.2. The <form> Element
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
20
lOMoARcPSD|39184047
2.2.3. Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for text:
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="David"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Raj">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
21
lOMoARcPSD|39184047
Output:
2.2.4. The <label> Element
Notice the use of the <label> element in the example
above. The <label> tag defines a label for many form
elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.
2.2.5. Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example:
<html>
<body>
<h2>Radio Buttons</h2>
22
lOMoARcPSD|39184047
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
OUTPUT:
2.2.6. Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
<html>
<body>
<h2>Checkboxes</h2>
23
lOMoARcPSD|39184047
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT:
Example:
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example:
24
lOMoARcPSD|39184047
<html>
<body>
<h2>HTML Forms</h2>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>
</html>
OUTPUT:
2.2.7. The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
25
lOMoARcPSD|39184047
Example:
<html>
<body>
<h2>The name Attribute</h2>
<input type="text" id="fname" value="John"><br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input element
does not have a name attribute.</p>
</body>
</html>
OUTPUT:
2.2.8. The <select> Element
The <select> element defines a drop-down list:
<html>
26
lOMoARcPSD|39184047
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
OUTPUT:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
2.2.9. The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
27
lOMoARcPSD|39184047
Example:
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT:
The rows attribute specifies the visible number of lines in a text area.
28
lOMoARcPSD|39184047
The cols attribute specifies the visible width of a text area.
2.2.10. The <button> Element
The <button> element defines a clickable button:
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
OUTPUT:
2.3. CSS
 CSS stands for Cascading Style Sheets.
 CSS is the language we use to style an HTML document.
 CSS describes how HTML elements should be displayed.

 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 The selector points to the HTML element you want to style.
29
lOMoARcPSD|39184047
 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:
p{
color: red;
text-align: center;
}
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
Example:
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
30
lOMoARcPSD|39184047
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
2.3.1. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
1. External CSS
2. Internal CSS
3. Inline CSS
2.3.1.1. External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.
Example:
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
31
lOMoARcPSD|39184047
<h1>This is a heading</h1>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
OUTPUT:
2.3.1.2. Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
32
lOMoARcPSD|39184047
The internal style is defined inside the <style> element, inside the head section.
Example:
<html>
<head>
<style>
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
OUTPUT:
33
lOMoARcPSD|39184047
2.3.1.3. Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.
Example:
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
OUTPUT:
34
lOMoARcPSD|39184047
2.4. CSS Selectors

The means by which you access one or more elements is called selection, and the part of a CSS rule
that does this is known as a selector. As you might expect, there are many varieties of selector.
2.4.1. The Type Selector
The type selector works on types of HTML elements such as <p> or <i>. For example, the following
rule will ensure that all text within <p> ... </p> tags is fully justified: p { text-align:justify; }
2.4.2. The Descendant Selector
Descendant selectors let you apply styles to elements that are contained within other elements. For
example, the following rule sets all text within <b> ... </b> tags to red, but only if they occur within
<p> ... </p> tags (like this: <p><b>Hello</b> there</p>):
p b { color:red; }
Descendant selectors can continue nesting indefinitely, so the following is a perfectly valid rule to
make the text blue within bold text, inside a list element of an unordered list:
ul li b { color:blue; }
As a practical example, suppose you want to use a different numbering system for an ordered list that
is nested within another ordered list. You can achieve this in the following way, which will replace the
default numeric numbering (starting from 1) with lowercase letters (starting from a):
<html>
<head>
<style>
ol ol { list-style-type:lower-alpha; }
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
</ol>
</body>
</html>
The result of loading this HTML into a web browser is as follows, in which you can see that the
second list elements display differently:
35
lOMoARcPSD|39184047
OUTPUT:
2.4.3. The Child Selector

The child selector is similar to the descendant selector but is more restrictive about when the style will
be applied, by selecting only those elements that are direct children of another element. For example,
the following code uses a descendant selector that will change any bold text within a paragraph to red,
even if the bold text is itself within italics (like this <p><i><b>Hello</b> there</i></p>):
p b { color:red; }
In this instance, the word Hello displays in red. However, when this more general type of behavior is
not required, a child selector can be used to narrow the scope of the selector. For example, the
following child selector will set bold text to red only if the element is a direct child of a paragraph, and
is not itself contained within another element:
p > b { color:red; }
Now the word Hello will not change color because it is not a direct child of the paragraph.
For a practical example, suppose you wish to embolden only those <li> elements that are direct
children of <ol> elements. You can achieve this as follows, where the elements that are direct children
of <ul> elements do not get emboldened:
<!DOCTYPE html>
<html>
<head>
<style>
ol > li { font-weight:bold; }
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
36
lOMoARcPSD|39184047
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
The result of loading this HTML into a browser will be as follows:
2.4.4. 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. Example:
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
37
lOMoARcPSD|39184047
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The CSS rule below will be applied to the HTML element with id="para1":
2.4.5. 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:
<html>
<head>
<style>
38
lOMoARcPSD|39184047
.center {
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>
In this example all HTML elements with class="center" will be red and center-aligned:
2.4.6. The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example:
<html>
<head>
<style>
39
lOMoARcPSD|39184047
*{
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:
2.4.7. 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):
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
40
lOMoARcPSD|39184047
Example:
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
</body>
</html>
OUTPUT:
41
lOMoARcPSD|39184047
2.4.8. CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>

<p>The links with a target attribute gets a yellow background:</p>
<a href="home.html">Home</a>
<a href="about.html" target="_blank">About Us</a>
<a href="contact.html" target="_top">Contact Us</a>
</body>
</html>
OUTPUT:
42
lOMoARcPSD|39184047
2.5. CSS3:
 The first implementation of CSS was drawn up in 1996, was released in 1999, and has been
supported by all browser releases since 2001. The standard for this version, CSS1, was revised
in 2008. Beginning in 1998, developers began drawing up the second specification, CSS2; its
standard was completed in 2007 and revised in 2009.
 Development for the CSS3 specification commenced in 2001, with some features being
proposed as recently as 2009. Therefore, the development process will likely continue for some
time before a final recommendation for CSS3 is approved. And even though CSS3 isn’t yet
complete, people are already beginning to put forward suggestions for CSS4.
 Here through the CSS3 features that have already been generally adopted by the major
browsers. Some of these features provide functionality that hitherto could be provided only
with JavaScript.
 We can use CSS3 to implement dynamic features instead of JavaScript. The features
provided by CSS make document attributes part of the document itself, instead of being
tacked on through JavaScript. Making them part of the document is a cleaner design.
2.6. 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, The borders, padding, and the actual content. The image below illustrates the box model:
1. Content - The content of the box, where text and images appear
2. Padding - Clears an area around the content. The padding is transparent
3. Border - A border that goes around the padding and content
4. 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.
43
lOMoARcPSD|39184047
2.6.1. Content area
The content area, bounded by the content edge, contains the "real" content of the element, such as text,
an image, or a video player. Its dimensions are the content width (or content-box width) and the
content height (or content-box height). It often has a background color or background image.
If the box-sizing property is set to content-box (default) and if the element is a block element, the
content area's size can be explicitly defined with the width, min-width, max-width, height, min-height,
and max-height properties.
2.6.2. Padding area
The padding area, bounded by the padding edge, extends the content area to include the element's
padding. Its dimensions are the padding-box width and the padding-box height.
The thickness of the padding is determined by the padding-top, padding-right, padding-bottom,

padding-left, and shorthand padding properties.
2.6.3. Border area
The border area, bounded by the border edge, extends the padding area to include the element's
borders. Its dimensions are the border-box width and the border-box height.
The thickness of the borders are determined by the border-width and shorthand border properties. If
the box-sizing property is set to border-box, the border area's size can be explicitly defined with the
width, min-width, max-width, height, min-height, and max-height properties. When there is a
background (background-color or background-image) set on a box, it extends to the outer edge of the
border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the
background-clip CSS property.
2.6.4. Margin area
The margin area, bounded by the margin edge, extends the border area to include an empty area used
to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-
box height.
The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-
left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly
defined since margins are shared between boxes.
Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to
the height of the line) is determined by the line-height property, even though the borders and padding
are still displayed around the content.
44
lOMoARcPSD|39184047
Example:
<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</div>
</body>
</html>
45
lOMoARcPSD|39184047
OUTPUT:
2.7. CSS3 Backgrounds:

CSS3 provides two new properties: background-clip and background-origin. Between them, you
can specify where a background should start within an element, and how to clip the background so that
it doesn’t appear in parts of the box model where you don’t want it to.
To accomplish these, both properties support the following values:
border-box
Refers to the outer edge of the border
padding-box
Refers to the outer edge of the padding area
content-box
Refers to the outer edge of the content area
2.7.1. The background-clip Property:

The background-clip property specifies whether the background should be ignored (clipped) if it
appears within either the border or padding area of an element. For example, the following declaration
46
lOMoARcPSD|39184047
states that the background may display in all parts of an element, all the way to the outer edge of the
border:
background-clip:border-box;
To keep the background from appearing within the border area of an element, you can restrict it to
only the section of an element inside the outer edge of its padding area, like this:
background-clip:padding-box;
Or to restrict the background to display only within the content area of an element, you would use
this declaration:
background-clip:content-box;
Figure 3.1. shows three rows of elements displayed in the Safari web browser, in which the first row
uses border-box for the background-clip property, the second uses padding-box, and the third uses
content-box.
In the first row, the inner box (an image file that has been loaded into the top left of the element,
with repeating disabled) is allowed to display anywhere in the element. You can also clearly see it
displayed in the border area of the first box because the border has been set to dotted.
In the second row, neither the background image nor the background shading displays in the border
area, because they have been clipped to the padding area with a background-clip property value
of padding-box.
Then, in the third row, both the background shading and the image have been clipped to display only
within the inner content area of each element (shown inside a lightcolored, dotted box), using a
background-clip property of content-box.
47
lOMoARcPSD|39184047
Figure 2.1: Different ways of combining CSS3 background properties

Example:
<html>
<head>
<style>
#example1 {
border: 10px dotted
black; padding: 15px;
background: lightblue;
background-clip: border-box;
48
lOMoARcPSD|39184047
#example2 {
border: 10px dotted

background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 15px;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>The background-clip Property</h1>
<p>The background-clip property defines how far the background should extend within an
element.</p>
<p>background-clip: border-box (this is default):</p>

<div id="example1">
<p>The background extends behind the border.</p>

</div>
49
lOMoARcPSD|39184047
<p>background-clip: padding-box:</p>
<div id="example2">
<p>The background extends to the inside edge of the border.</p>

</div>
<p>background-clip: content-box:</p>
<div id="example3">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>
Output:
50
lOMoARcPSD|39184047
2.7.2. The background-origin Property

With the background-origin property, you can control where a background image will be located by
specifying where the top left of the image should start. For example, the following declaration
states that the background image’s origin should be the top-left corner of the outer edge of the
border:
background-origin:border-box;
To set the origin of an image to the top-left outer corner of the padding area, you would use this
declaration:
background-origin:padding-box;
Or to set the origin of an image to the top-left corner of an element’s inner content section, you would
use this declaration:
background-origin:content-box;
Looking again at Figure 3.1, you can see in each row the first box uses a background-origin property
of border-box, the second uses padding-box, and the third uses content-box. Consequently, in each
row the smaller inner box displays at the top left of the border in the first box, the top left of the
padding in the second, and the top left of the content in the third box.
The only differences to note between the rows, with regard to the origins of the inner box in Figure
2.1, are that in rows two and three the inner box is clipped to the padding and content areas,
respectively; therefore, outside these areas no portion of the box is displayed.
Example:
<html>
<head>
<style>
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
#example2 {
51
lOMoARcPSD|39184047
border: 10px dashed

background-origin: border-
box;
}
#example3 {
border: 10px dashed black;
padding: 25px;
background-origin: content-
box;
}
</style>
</head>
<body>
<h2>background-origin: padding-box (default):</h2>

<div id="example1">
<h2>Hello World</h2>
<p>The background image starts from the upper left corner of the padding edge.</p>
</div>
<h2>background-origin: border-box:</h2>
<div id="example2">
52
lOMoARcPSD|39184047
<p>The background image starts from the upper left corner of the border.</p>
53
lOMoARcPSD|39184047
</div>
<h2>background-origin: content-box:</h2>
<div id="example3">
<p>The background image starts from the upper left corner of the content.</p>
</div>
</body>
</html>
Output:
2.7.3. The background-size Property

In the same way that you can specify the width and height of an image when used in the <img> tag,
you can now also do so for background images on the latest versions of all browsers.
54
lOMoARcPSD|39184047
You apply the property as follows (where ww is the width and hh is the height):
background-size:wwpx hhpx;
If you prefer, you can use only one argument, and then both dimensions will be set to that value. Also,
if you apply this property to a block-level element such as a <div> (rather than one that is inline such
as a <span>), you can specify the width and/or height as a percentage, instead of a fixed value.
If you wish to scale only one dimension of a background image, and then have the other one scale
automatically to retain the same proportions, you can use the value auto for the other dimension, like
this:
background-size:100px auto;
This sets the width to 100 pixels, and the height to a value proportionate to the increase or decrease in
width.
Different browsers may require different versions of the various background property names, so refer
to http://caniuse.com when using them to ensure you are applying all the versions required for the
browsers you are targeting.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 2px solid
background: url(mountain.jpg);
background-size: auto;
}
#example2 {
border: 2px solid
background: url(mountain.jpg);
background-size: 300px
100px;
}
</style>
</head>
<body>
<h2>background-size: auto (default):</h2>

<div id="example1">
<p>The background image is displayed in its original size.</p>
55
lOMoARcPSD|39184047
</div>
<h2>background-size: 300px 100px:</h2>

<div id="example2">
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
</body>
</html>
Output:
2.7.4. Multiple Backgrounds
With CSS3 you can now attach multiple backgrounds to an element, each of which can use the
previously discussed CSS3 background properties. Figure 2.2 shows an example of this; eight different
images have been assigned to the background, to create the four corners and four edges of the
certificate border.
56
lOMoARcPSD|39184047
Figure 2.2. A background created with multiple images
To display multiple background images in a single CSS declaration, separate them with commas.
Example 2.1 shows the HTML and CSS that was used to create the background in Figure 2.2
<!DOCTYPE html>
<html> 
<head>
<title>CSS3 Multiple Backgrounds Example</title>
<style>
.border {
font-family:'Times New
Roman'; font-style :italic;
font-size :170%;
text-align :center;
padding :60px;
width :350px;
height :500px;
background :url('b1.gif') top left no-repeat,
url('b2.gif') top right no-repeat,
url('b3.gif') bottom left no-repeat,
url('b4.gif') bottom right no-repeat,
url('ba.gif') top repeat-x,
url('bb.gif') left repeat-y,
url('bc.gif') right repeat-y,
url('bd.gif') bottom repeat-x
}
</style>
</head>
<body>
<div class='border'>
<h1>Employee of the month</h1>
57
lOMoARcPSD|39184047
<h2>Awarded To:</h2>
<h3> </h3>
<h2>Date:</h2>
<h3> / / </h3>
</div>
</body>
</html>
Looking at the CSS section, you see that the first four lines of the background declaration place the
corner images into the four corners of the element, and the final four place the edge images, which are
handled last because the order of priority for background images goes from high to low. In other
words, where they overlap, additional background images will appear behind already placed images. If
the GIFs were in the reverse order, the repeating edge images would display on top of the corners,
which would be incorrect.
Using this CSS, you can resize the containing element to any dimensions and the border will always
correctly resize to fit, which is much easier than using tables or multiple elements for the same effect.
2.8. CSS3 Borders:

CSS3 also brings a lot more flexibility to the way borders can be presented, by allowing you to
independently change the colors of all four border edges, to display images for the edges and corners,
to provide a radius value for applying rounded corners to borders, and to place box shadows
underneath elements.
2.8.1. The border-color Property
There are two ways you can apply colors to a border. First, you can pass a single color to the property,
as follows:
border-color:#888;
This property sets all the borders of an element to mid-gray. You can also set border colors
individually, like this (which sets the border colors to various shades of gray):
border-top-color :#000;
border-left-color :#444;
border-right-color :#888;
border-bottom-color :#ccc;
You can also set all the colors individually with a single declaration, as
follows: border-color: #f00 #0f0 #880 #00f;
This declaration sets the top border color to #f00, the right one to #0f0, the bottom one to #880, and
the left one to #00f (red, green, orange, and blue, respectively). You can also use color names for the
arguments.
Example:
<!DOCTYPE html>
<html>
58
lOMoARcPSD|39184047
<head>
<style>
h1 {
border-style: solid;
border-color:
coral;
}
div {
border-style: solid;
border-color:
coral;
}
</style>
</head>
<body>
<h1>A heading with a colored border</h1>
<div>The border-color can be specified with a color name.</div>
<p><strong>Note:</strong> The border-color property does not work if it is used alone. Use
the border-style property to set the border first.</p>
</body>
</html>
Output:
2.8.2. The border-radius Property

Prior to CSS3, talented web developers came up with numerous different tweaks and fixes in order
to achieve rounded borders, generally using <table> or <div> tags.
But now adding rounded borders to an element is really simple, and it works on the latest versions of
all major browsers, as shown in Figure 2.3, in which a 10-pixel border is displayed in different
ways. Example 2.2 shows the HTML for this.
Example 2.2. The border-radius property
<!DOCTYPE html>
<html> 
<head>
<title>CSS3 Border Radius Examples</title>
<style>
.box {
margin-bottom:10px;
59
lOMoARcPSD|39184047
font-family :'Courier New',

monospace; font-size :12pt;
text-align :center;
padding :10px;
width :380px;
height :75px;
border :10px solid #006;
}
.b1 {
-moz-border-radius :40px;
-webkit-border-radius:40px;
border-radius :40px;
}
.b2 {
-moz-border-radius :40px 40px 20px 20px;
-webkit-border-radius:40px 40px 20px 20px;
border-radius :40px 40px 20px 20px;
}
.b3 {
-moz-border-radius-topleft :20px;
-moz-border-radius-topright :40px;
-moz-border-radius-bottomleft :60px;
-moz-border-radius-bottomright :80px;
-webkit-border-top-left-radius :20px;
-webkit-border-top-right-radius :40px;
-webkit-border-bottom-left-radius :60px;
-webkit-border-bottom-right-radius:80px;
border-top-left-radius :20px;
border-top-right-radius :40px;
border-bottom-left-radius :60px;
border-bottom-right-radius :80px;
}
.b4 {
-moz-border-radius-topleft :40px 20px;
-moz-border-radius-topright :40px 20px;
-moz-border-radius-bottomleft :20px 40px;
-moz-border-radius-bottomright :20px 40px;
-webkit-border-top-left-radius :40px 20px;
-webkit-border-top-right-radius :40px 20px;
-webkit-border-bottom-left-radius :20px 40px;
-webkit-border-bottom-right-radius:20px 40px;
border-top-left-radius :40px 20px;
border-top-right-radius :40px 20px;
border-bottom-left-radius :20px 40px;
border-bottom-right-radius :20px
40px;
}
</style>
60
lOMoARcPSD|39184047
</head>
<body>
<div class='box
b1'> border-
radius:40px;
</div>
<div class='box b2'>
border-radius:40px 40px 20px 20px;
</div>
border-top-left-radius    :20px;<br>
border-top-right-radius   :40px;<br>
border-bottom-left-radius :60px;<br>
border-bottom-right-radius:80px;
</div>
border-top-left-radius    :40px
20px;<br> border-top-right-radius   :40px
20px;<br> border-bottom-left-radius :20px 40px;<br>
border-bottom-right-radius:20px 40px;
</div>
</body>
</html>
61
lOMoARcPSD|39184047
Figure 2.3. Mixing and matching various border radius properties
So, for example, to create a rounded border with a radius of 20 pixels, you could simply
use the following declaration:
border-radius:20px;
Although most browsers will work fine with border radius properties (including IE), some current (and
many older) versions of the major browsers use different property names. So, if you wish to support
them all, you will need to also use the relevant browser-specific prefixes, such as -moz- and -webkit-.
To ensure that Example 2.2 works in all browsers, I have included all the required prefixes.
You can specify a separate radius for each of the four corners, like this (applied in a clockwise
direction starting from the top-left corner):
border-radius:10px 20px 30px 40px;
If you prefer, you can also address each corner of an element individually, like this:
border-top-left-radius :20px;
62
lOMoARcPSD|39184047
border-top-right-radius :40px;
border-bottom-left-radius :60px;
border-bottom-right-radius:80px;
And, when referencing individual corners, you can supply two arguments to choose a different vertical
and horizontal radius (giving more interesting and subtle borders) like this:
border-top-left-radius :40px 20px;

border-top-right-radius :40px 20px;
border-bottom-left-radius :20px 40px;
border-bottom-right-radius:20px 40px;
The first argument is the horizontal, and the second is the vertical radius.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 2px solid
red; padding: 10px;
border-radius: 25px;
#example2 {
border: 2px solid
red; padding: 10px;
border-radius: 50px 20px;
</style>
</head>
63
lOMoARcPSD|39184047
<body>
<h2>border-radius: 25px:</h2>
<div id="example1">
<p>The border-radius property defines the radius of the element's corners.</p>
</div>
<h2>border-radius: 50px 20px:</h2>
<div id="example2">
<p>If two values are set; the first one is for the top-left and bottom-right corner, the second one for
the top-right and bottom-left corner.</p>
</div>
</body>
</html>
Output:
2.9. Text Effects

A number of new effects can now be applied to text with the help of CSS3, including text shadows,
text overlapping, and word wrapping.
2.9.1. The text-shadow Property
64
lOMoARcPSD|39184047
The text-shadow property is similar to the box-shadow property and takes the same set of rguments: a
horizontal and vertical offset, an amount for the blurring, and the color to use. For example, the
following declaration offsets the shadow by 3 pixels both horizontally and vertically, and displays the
shadow in dark gray, with a blurring of 4 pixels:
text-shadow:3px 3px 4px #444;
The result of this declaration looks like Figure 2.4 , and works in all recent versions of all major
browsers (but not IE9 or lower).
Figure 2.4. Applying a shadow to text
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>The text-shadow Property</h1>
</body>
</html>
Output:
2.9.2. The text-overflow Property

When using any of the CSS overflow properties with a value of hidden, you can also use the text-
overflow property to place an ellipsis (three dots) just before the cutoff to indicate that some text has
been truncated, like this:
text-overflow:ellipsis;
65
lOMoARcPSD|39184047
Without this property, when the text “To be, or not to be. That is the question.” Is truncated, the result
will look like Figure 2.5; with the declaration applied, however, the result is like Figure 2.6.
Figure 2.5. The text is automatically truncated
Figure 2.6. Instead of being cut off, the text trails off using an ellipsis
For this to work, three things are required:
• The element should have an overflow property that is not visible, such as overflow:hidden.
• The element must have the white-space:nowrap property set to constrain the text.
• The width of the element must be less than that of the text to truncate.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
div.b {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid
#000000;
}
div.c {
width: 50px;
overflow: hidden;
text-overflow: "----";
}
</style>
66
lOMoARcPSD|39184047
</head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two divs contains a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>

<div class="a">Hello world!</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>
<h2>text-overflow: "----" (user defined string):</h2>

<div class="c">Hello world!</div>
<p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in

Firefox.</p>
</body>
</html>
Output:
2.9.3. The word-wrap Property

When you have a really long word that is wider than the element containing it, it will either
overflow or be truncated. But as an alternative to using the text-overflow property and truncating
text, you can use the word-wrap property with a value of breakword to wrap long lines, like this:
word-wrap:break-word;
67
lOMoARcPSD|39184047
For example, in Figure 20-9 the word Honorificabilitudinitatibus is too wide for the containing
box (whose righthand edge is shown as a solid vertical line between the letters t and a) and,
because no overflow properties have been applied, it has overflowed its bounds
Figure 2.7. The word is too wide for its container and has overflowed
But in Figure 2.8 the word-wrap property of the element has been assigned a value of break-word, so
the word has neatly wrapped around to the next line.
Figure 2.8. The word now wraps at the righthand edge
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
div.a {
word-wrap: normal;
div.b {
68
lOMoARcPSD|39184047
word-wrap: break-word;
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="a"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The
long word will not break and wrap to the next line.</div>
<h2>word-wrap: break-word:</h2>
<div class="b"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The
long word will break and wrap to the next line.</div>
</body>
</html>
Output:
69
lOMoARcPSD|39184047
2.10. Animations
2.10.1. Introduction:
Animation is process of making shape changes and creating motions with elements
In this chapter you will learn about the following properties:
 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation
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.
<!DOCTYPE html>
<html>
<head>
70
lOMoARcPSD|39184047
<styl
e>
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>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original
style.</p>
</body>
</html>
Note: 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).
In the example above we have specified when the style will change by using the
keywords "from" and "to" (which represents 0% (start) and 100% (complete)).
71
lOMoARcPSD|39184047
It is also possible to use percent. By using percent, you can add as many style changes as you like.
The following example will change the background-color of the <div> element when
the animation is 25% complete, 50% complete, and again when the animation is
100% complete:
<!DOCTYPE html>
<html>
<head>
<style
>
div {
width:
100px;
height:
100px;
animation-name:
example; animation-
duration: 4s;
}
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
The following example will change both the background-color and the position of the
<div> element when the animation is 25% complete, 50% complete, and again when
the animation is 100% complete:
72
lOMoARcPSD|39184047
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
animation-name:
example; animation-
duration: 4s;
}
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>
73
lOMoARcPSD|39184047
<div></div>
</body>
</html>
2.10.2. 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:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative; animation-
name: example; animation-
74
lOMoARcPSD|39184047
duration: 4s; animation-
delay: 2s;
}
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>
<div></div>
</body>
</html>
2.10.3. Animation Shorthand Property:
75
lOMoARcPSD|39184047
The example below uses six of the animation properties:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
animation-name:
example; animation-
duration: 5s;
animation-timing-function:
linear; animation-delay: 2s;
animation-iteration-count:
infinite; animation-direction:
alternate;
76
lOMoARcPSD|39184047
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>
<div></div>
</body>
</html>
77
lOMoARcPSD|39184047
Table 2.4. Animation Property & its Description
2.11. Multiple Column Layout:

CSS3 supported multi columns to arrange the text as news paper structure. Some of most common
used multi columns properties as shown below −
S.No Value & Description
1 column-count
Used to count the number of columns that element should be divided.
2 column-fill
Used to decide, how to fill the columns.
3 column-gap
Used to decide the gap between the columns.
4 column-rule
Used to specifies the number of rules.
5 rule-color
Used to specifies the column rule color.
6 rule-style
Used to specifies the style rule for column.
78
lOMoARcPSD|39184047
7 rule-width
Used to specifies the width.
8 column-span
Used to specifies the span between columns.
Table 2.5. Multiple Column value & its Description

Example
Below example shows the arrangement of text as new paper structure.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */

-webkit-column-gap: 40px;
-moz-column-gap:
40px; column-gap:
40px;
/* Column style property */

-webkit-column-rule-style: solid;
-moz-column-rule-style:
solid; column-rule-style:
solid;
}
</style>
</head>
<body>
<div class = "multi">

Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing
rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials
and allied articles on topics ranging from programming languages
79
lOMoARcPSD|39184047
</body>
</html>
OUTPUT:
For suppose, if user wants to make text as new paper without line, we can do this by removing style
syntax as shown below –
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
OUTPUT:
column-count: 4;
/* Column gap property */

-webkit-column-gap: 40px;
-moz-column-gap:
40px; column-gap:
40px;
80
lOMoARcPSD|39184047
2.12. User Interface

The user interface property allows you to change any element into one of several standard user
interface elements.
Some of the common properties which are using in css3 User interface.
S.No Value & Description

1 appearance
Used to allow the user to make elements as user interface elements.

2 box-sizing
Allows to users to fix elements on area in clear way.

3 icon
Used to provide the icon on area.

4 Resize
Used to resize elements which are on area.

5 outline-offset
Used to draw the behind the outline.

6 nav-down
Used to move down when you have pressed on down arrow button in keypad.
7 nav-left
Used to move left when you have pressed on left arrow button in keypad.
8 nav-right
Used to move right when you have pressed on right arrow button in keypad.
9 nav-up
81
lOMoARcPSD|39184047
Used to move up when you have pressed on up arrow button in keypad.
Table 2.6. CSS3 User Interface Property value & its Description
2.12.1. Resize property
Resize property is having three common values as shown below −
 horizontal
 vertical
 both
Using of both value in resize property in css3 user interface −
Output:
<html>
<head>
<styl
e>
div
{
border: 2px
solid; padding:
2.12.2. CSS3
20px;Outline
width: offset:
300px; resize:
Out line both;
meansoverflow:
draw a line around the element at outside of border.
auto;
}
</style>
<html>
</head>
<body>
82
lOMoARcPSD|39184047
<head>
<styl
e>
div
{
margin:
20px;
padding:
10px; width:
300px;
height:
100px;
border: 5px solid
pink; outline: 5px
solid green; outline-
offset: 15px;
}
</style>
OUTPUT:
83

It3401 Web Essentials Unit 2 Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

It3401 Web Essentials Unit 2 Notes

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|39184047

IT3401 WEB Essentials UNIT 2

2.1.1. Introduction to HTML

2.1.2. HTML Document

Lesson from the story:Never keep a fool servant !!!

2.1.7. Line Break

2.1.8. Setting Font Style

Table 2.2. Font Style Tags

HTML Document [FontStyle.html]

2.1.9. Text Alignment

2.1.10 Setting the Font and Color

Attribute Value Purpose

face Font-family such as “arial”, It displays the text with

Table 2.3. Font Color, Face & Size

2.1.11 Background Color

CREATION OF INTERACTIVE WEB SITES - DESIGN USING HTML AND AUTHORING

<font color="lime"><img src="mobile.jpg" alt="Not able to display" /></font>

<head><font color="blue"><h2>ABOUT US</h2></font></head>

<h3>IT COMPUTER CENTER</h3>was started in 2010 with its first branch at

<td>BLOCK CHAIN TECHNOLOGY</td>

<td>PROGRAMMING IN C (PLACEMENT ORIENTED)</td>

<td>ORACLE / SQL SERVER DBA</td>

<head><font color="red"><h2>CONTACT US</h2></font></head>

CHENNAI - 600 054.</B>

<frame src="new.html" />

<form method="get" action="result1.html"><BR><BR>

<input type="radio" name="c1" value="College student" /> College Student

<input type="checkbox" name="r1" > Administrator</input>

<head><font color="red"><b><h3><u>What's new?</u></h4></b></font></head>

2.2. Form Elements

2.2.2. The <form> Element

The <input> Element

The HTML <input> element is the most used form element.

Here are some examples:

2.2.3. Text Fields

A form with input fields for text:

<h2>Text input fields</h2>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="David"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Raj">

<p>Note that the form itself is not visible.</p>

2.2.4. The <label> Element

Notice the use of the <label> element in the example

above. The <label> tag defines a label for many form

2.2.5. Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<p>Choose your favorite Web language:</p>

<input type="radio" id="html" name="fav_language" value="HTML">

<input type="radio" id="css" name="fav_language" value="CSS">

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

The <input type="checkbox"> defines a checkbox.

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>

<input type="submit" value="Submit">

The form-handler is specified in the form's action attribute.

<label for="fname">First name:</label><br>