0% found this document useful (0 votes)

11 views129 pages

ActiveNET - HTML CSS JavaScript - 2017

html

Uploaded by

myself192008

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

0% found this document useful (0 votes)

11 views129 pages

ActiveNET - HTML CSS JavaScript - 2017

html

Uploaded by

myself192008

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

ActiveNET HTML, CSS, JavaScript 2017

ActiveNET ®

HTML, CSS,
JavaScript
Hyper Text Markup Language, Cascading Style Sheet

By Suryanarayana

HTML
Introduction to HTML (Hyper Text Markup Language)
As all of us know HTML meant for Web Page Designing, but initially it is developed for rich
formatting the text. Means if we want to prepare a new paper, project report, marks list etc
we used to use MS-Word software to prepare Rich Text Documents, saved as a .doc/docx
extension. The Word documents are having following limitations. (Rich Text Publishing
Software’s are MSWord, StarOffice, SOT Office, Open Office, Polaris Office).
Limitations are:
• Standalone (can be opened and run on the same machine).
• Software dependent (can be prepared and opened on MS-Word software only).

www.activenetinformatics.com 9848111288 Page 1

ActiveNET HTML, CSS, JavaScript 2017

• No link between documents (MS-Word documents cannot be linked though they are
on the same machine.
The intention of the inventor is the same kind of Rich Text Formatting want to be prepared
and run on MS-Office kind of software independent manner. If we format the text by placing
in open and end tag, prepared on notepad, saved as .html extension file and opened on
browser. No tool is need to prepare HTML document and can run on any web browser. If
published on www server, it can be accessed from anywhere on WWW. One document can be
hyperlinked to another document running on the same server or on a different server.

Rich text formatting meaning bold,

italic, underline, strike, superscript,
subscript the text, placing bullets n
front of the text, placing the results
in a tabular format. Placing images in
the document etc.

About HTML
HTML is developed by Tim Berners Lee, a contractor at CERN. In 1989 Lee wrote a proposal on
Internet based hyper text system. Lee wrote a browser called MOSAIC in 1990. Other browsers are
Netscape Navigator, Internet Explorer, Safari, Goolge Chrome, Firefox, Opera are few.
Hyper Text means highlighted text means text which is underlined and looking in a different color. If we
click on it, it redirects us to another location – shortly I say hyperlink.
And marking up text mean, in office documents we will format text using options given in toolbar. We will
save document and distribute it to others. If other want to open and see the document that system again
needs Office software. This is first and another thing is the document belongs to the same system but not
available all over the network.
Hence HTML came as an alternative to word documents. In HTML if we place text in between start and end
tags the text automatically formatted by browser by understanding tags as markup. The document can be
published on WWW server and can be opened on any browser. That is how it is a markup language.
• HTML is a text formatting language for preparing web documents that runs on browser.
• HTML formats text, hyperlinks text and it tells browser to render media content.
• The first version of HTML is HTML 4.0 published on 18th December 1997 and revised in 24th April
1998.
HTML was originally developed by Tim-Berners-Lee while at CERN and popularized Mosaic browser
developed at NCSA.
• First HTML release in 1993
• HTML 2 - Nov 1995
• HTML 3.2 – Jan 1997
• Later HTML 4.0.1 – Dec 1997

HTML Tags

www.activenetinformatics.com 9848111288 Page 2

ActiveNET HTML, CSS, JavaScript 2017

• It contains tag for the beginning and ending of HTML document – <HTML>
• Structure tags – <HEAD>, <BODY>, <FRAMESET>
• HEAD tags – TITLE, META, STYLE, LINK, SCRIPT
• BODY Sub tags
o Text formatting tags – B, I, EM, UNDERLINE, BLINK, MARQUEE, SUP, SUB
o Heading tags – H1, H2, H3, H4, H5, H6
o Link tags – A, AREA, MAP
o Image tags – IMG
o Menu tags – UL, OL, LI
o Frame tags - FRAMESET, FRAME
o Font Tags – FONT
o Grouping tags – FIELDSET, LEGEND
o Form tags – FORM, INPUT, TEXTAREA, SELECT, OPTION
o Plug-in tags – OBJECT, APPLET, EMBED
o Container Tags/BOX Elements – P, DIV, SPAN
o Table tags – TABLE, TTITLE, THEAD, TFOOTER, TR, TH, TD

<HTML> is the root tag

<HTML> is having 3 sub tags: <HEAD>, <BODY> or <FRAMESET>
<HEAD> tag is having <TITLE>, <SCRIPT>, <STYLE>, <LINK>, <META>
<TITLE> contains Page Title
<SCRIPT> embed JavaScript in SCRIPT tag. Language=”JavaScript” type=”text/javascript”
src=”externalJavaScriptFile”>. To write internal script. External .js files can be included using src
attribute.
<STYLE> used to write internal stylesheet / CSS. Type & media are the important attributes
<LINK> tag is used to include external CSS. Important attributes are type=”text/css” href=”pathofthe
csss” rel=”index|contents|chapter|bookmark|next|previous”
<META name=”description” content=”Free Web Tutorials”/>
<META name=”keywords” content=”Core Java Adv Java XML Struts Spring Hibernate HTML CSS
JavaScript training retail corporate academic”/>
<META name=”author” content=”Surya”/>
<META http-equiv=”refresh” content=”30; ,URL=http://www.activenetinformatics.com”/>

All over HTML contains 116 tags

<a>, <abbr>, <address>, <area>, <article>, <aside>, <audio>, <b>,<base>, <bdi>, <bdo>, <blockquote>,<body>,
<br>,<button>, <canvas>,<caption>, <cite>,<code>, <col>,<colgroup>, <data>,<datalist>, <dd>,<del>,
<details>,<dfn>, <dialog>,<div>, <dl>,<dt>, <em>,<embed>, <fieldset>,<figcaption>, <figure>,<footer>,
<form>`,<h1>, <h2>,<h3>, <h4>,<h5>, <h6>,<head>, <header>,<hgroup>, <hr>,<html>, <i>,<iframe>, <img>,
<input>, <ins>, <kbd>, <keygen>, <label>, <legend>, <li>, <link>, <main>, <map>, <mark>, <menu>,
<menuitem>, <meta>, <meter>, <nav>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>,
<param>, <pre>, <progress>, <q>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>,

www.activenetinformatics.com 9848111288 Page 3

ActiveNET HTML, CSS, JavaScript 2017

Sl. No Tag Description New in

HTML5?

1.  Specifies a comment

2. <!DOCTYPE> Specifies the document type

3. <a> Specifies a hyperlink

4. <abbr> Specifies an abbreviation

5. <address> Specifies an address element

6. <area> Specifies an area inside an image map

7. <article> Specifies an article New

8. <aside> Specifies content aside from the page content New

9. <audio> Specifies sound content New

10. <b> Specifies bold text

11. <base> Specifies a base URL for all the links in a page

12. <bdi> For bi-directional text formatting New

13. <bdo> Specifies the direction of text display

14. <blockquote> Specifies a long quotation

15. <body> Specifies the body element

16. <br> Inserts a single line break

17. <button> Specifies a push button

18. <canvas> Define graphics New

19. <caption> Specifies a table caption

20. <cite> Specifies a citation

21. <code> Specifies computer code text

22. <col> Specifies attributes for table columns

23. <colgroup> Specifies groups of table columns

24. <data> Allows for machine-readable data to be provided New

www.activenetinformatics.com 9848111288 Page 4

ActiveNET HTML, CSS, JavaScript 2017

Sl. No Tag Description New in

HTML5?

25. <datalist> Specifies an "autocomplete" dropdown list New

26. <dd> Specifies a definition description

27. <del> Specifies deleted text

28. <details> Specifies details of an element New

29. <dfn> Defines a definition term

30. <dialog> Specifies that part of an application is interactive. HTML 5.1

31. <div> Specifies a section in a document

32. <dl> Specifies a definition list

33. <dt> Specifies a definition term

34. <em> Specifies emphasized text

35. <embed> Specifies external application or interactive content New

36. <fieldset> Specifies a fieldset

37. <figcaption> Specifies caption for the figure element. New

38. <figure> Specifies a group of media content, and their caption New

39. <footer> Specifies a footer for a section or page New

40. <form> Specifies a form

41. <h1> Specifies a heading level 1

42. <h2> Specifies a heading level 2

43. <h3> Specifies a heading level 3

44. <h4> Specifies a heading level 4

45. <h5> Specifies a heading level 5

46. <h6> Specifies a heading level 6

47. <head> Specifies information about the document

48. <header> Specifies a group of introductory or navigational aids, New

including hgroup elements

49. <hgroup> Specifies a header for a section or page. New

NOTE: This element has been dropped from W3C HTML5 spec but

www.activenetinformatics.com 9848111288 Page 5

ActiveNET HTML, CSS, JavaScript 2017

Sl. No Tag Description New in

HTML5?

it is still included in WHATWG Living Standard.

50. <hr> Specifies a horizontal rule

51. <html> Specifies an html document

52. <i> Specifies italic text

53. <iframe> Specifies an inline sub window (frame)

54. <img> Specifies an image

55. <input> Specifies an input field

56. <ins> Specifies inserted text

57. <kbd> Specifies keyboard text

58. <keygen> Generates a key pair New

59. <label> Specifies a label for a form control

60. <legend> Specifies a title in a fieldset

61. <li> Specifies a list item

62. <link> Specifies a resource reference

63. <main> Specifies the main content area of an HTML document. New

64. <map> Specifies an image map

65. <mark> Specifies marked text New

66. <menu> Specifies a menu list HTML 5.1

67. <menuitem> Specifies a command that a user can invoke from a popup menu. HTML 5.1

68. <meta> Specifies meta information

69. <meter> Specifies measurement within a predefined range New

70. <nav> Specifies navigation links New

71. <noscript> Specifies a noscript section

72. <object> Specifies an embedded object

73. <ol> Specifies an ordered list

74. <optgroup> Specifies an option group

www.activenetinformatics.com 9848111288 Page 6

ActiveNET HTML, CSS, JavaScript 2017

Sl. No Tag Description New in

HTML5?

75. <option> Specifies an option in a drop-down list

76. <output> Specifies some types of output New

77. <p> Specifies a paragraph

78. <param> Specifies a parameter for an object

79. <pre> Specifies preformatted text

80. <progress> Specifies progress of a task of any kind New

81. <q> Specifies a short quotation

82. <s> Indicates text that's no longer accurate or relevant.

83. <samp> Specifies sample computer code

84. <script> Specifies a script

85. <section> Specifies a section New

86. <select> Specifies a selectable list

87. <small> Specifies small text

88. <source> Specifies media resources New

89. <span> Specifies a section in a document

90. <strong> Specifies strong text

91. <style> Specifies a style definition

92. <sub> Specifies subscripted text

93. <summary> Specifies a summary / caption for the <details>element New

94. <sup> Specifies superscripted text

95. <table> Specifies a table

96. <tbody> Specifies a table body

97. <td> Specifies a table cell

98. <template> Declares HTML fragments that can be cloned and inserted in the New
document by script.

99. <textarea> Specifies a text area

www.activenetinformatics.com 9848111288 Page 7

ActiveNET HTML, CSS, JavaScript 2017

Sl. No Tag Description New in

HTML5?

100. <tfoot> Specifies a table footer

101. <th> Specifies a table header

102. <thead> Specifies a table header

103. <time> Specifies a date/time New

104. <title> Specifies the document title

105. <tr> Specifies a table row

106. <track> Specifies a text track for media such as video and audio New

107. <u> Specifies text with a non-textual annotation.

108. <ul> Specifies an unordered list

109. <var> Specifies a variable

110. <video> Specifies a video New

111. <wbr> Specifies a line break opportunity for very long words and strings New
of text with no spaces.

Examples on HTML Tags

a_1.html
<a href="https://www.activenetinformatics.com">Visit ActiveNET</a>

abbr_2.html
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

address_3.html

Written by <a href="mailto:[email protected]">Suryanarayana</a>.<br>

Visit us at:<br>

ActiveNET Informatics Pvt. Ltd.,<br>

#202, Manjeera Plaza, Ameerpet<br>

Hyderabad, 98 48 111 288

</address>

area_4.html

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

www.activenetinformatics.com 9848111288 Page 8

ActiveNET HTML, CSS, JavaScript 2017

<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

</map>

article_5.html

<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

</article>

aside_6.html

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

audio_7.html

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

b_8.html

<p>This is normal text - <b>and this is bold text</b>.</p>

base_9.html

<head>

<base href="https://www.w3schools.com/images/" target="_blank">

</head>

<body>

<img src="stickman.gif" width="24" height="39" alt="Stickman">

<a href="https://www.w3schools.com">W3Schools</a>

</body>

www.activenetinformatics.com 9848111288 Page 9

ActiveNET HTML, CSS, JavaScript 2017

bdi_10.html

<ul>

<li>User <bdi>hrefs</bdi>: 60 points</li>

<li>User <bdi>jdoe</bdi>: 80 points</li>

<li>User <bdi>‫<نايإ‬/bdi>: 90 points</li>

</ul>

bdo_11.html

This text will go right-to-left.

</bdo>

blockquote_12.html

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF
works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockquote>

body_13.html

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

br_14.html

This text contains<br>a line break.

button_15.html

<button type="button">Click Me!</button>

canvas_16.html

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

</canvas>

www.activenetinformatics.com 9848111288 Page 10

ActiveNET HTML, CSS, JavaScript 2017

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World",10,50);

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

www.activenetinformatics.com 9848111288 Page 11

ActiveNET HTML, CSS, JavaScript 2017

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

<body>

<p>Image to use:</p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p>

<canvas id="myCanvas" width="250" height="300"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

function myCanvas() {

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img,10,10);

</script>

caption_17.html

<table>

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

www.activenetinformatics.com 9848111288 Page 12

ActiveNET HTML, CSS, JavaScript 2017

</tr>

<tr>

<td>January</td>

</tr>

</table>

cite_18.html

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

code_19.html

<body>

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

</body>

col_20.html

<table>

<col span="2" style="background-color:red">

</colgroup>

<tr>

<th>Title</th>

<th>Price</th>

</tr>

<tr>

<td>My first HTML</td>

www.activenetinformatics.com 9848111288 Page 13

ActiveNET HTML, CSS, JavaScript 2017

</tr>

</table>

colgroup_21.html

<table>

<col span="2" style="background-color:red">

</colgroup>

<tr>

<th>Title</th>

<th>Price</th>

</tr>

<tr>

<td>My first HTML</td>

</tr>

</table>

data_22.html

<ul>

<li><data value="21053">Cherry Tomato</data></li>

<li><data value="21054">Beef Tomato</data></li>

<li><data value="21055">Snack Tomato</data></li>

</ul>

datalist_23.html

<option value="Internet Explorer">

www.activenetinformatics.com 9848111288 Page 14

ActiveNET HTML, CSS, JavaScript 2017

</datalist>

dd_24.html

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

del_25.html

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

details_26.html

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

dfn_27.html

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

dialog_28.html

<table>

<tr>

<th>January <dialog open>This is an open dialog window</dialog></th>

<th>February</th>

<th>March</th>

</tr>

<tr>

</tr>

</table>

www.activenetinformatics.com 9848111288 Page 15

ActiveNET HTML, CSS, JavaScript 2017

div_29.html

<h3>This is a heading</h3>

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

</div>

dl_30.html

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

em_31.html

<em>Emphasized text</em>

embed_32.html

fieldset_33.html

<form>

<legend>Personalia:</legend>

Name: <input type="text"><br>

Email: <input type="text"><br>

Date of birth: <input type="text">

</fieldset>

</form>

figcaption_34.html

<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>

</figure>

figure_35.html

www.activenetinformatics.com 9848111288 Page 16

ActiveNET HTML, CSS, JavaScript 2017

<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

</figure>

footer_36.html

<p>Posted by: Hege Refsnes</p>

<p>Contact information: <a href="mailto:[email protected]">

[email protected]</a>.</p>

</footer>

form_37.html

<form action="/action.jsp" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

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

</form>

h1_38.html

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

head_39.html

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

The content of the document......

</body>

</html>

header_40.html

www.activenetinformatics.com 9848111288 Page 17

ActiveNET HTML, CSS, JavaScript 2017

<h1>Most important heading here</h1>

<h3>Less important heading here</h3>

<p>Some additional information here</p>

</header>

<p>Lorem Ipsum dolor set amet....</p>

</article>

hgroup_41.html

<h2>Living Standard — Last Updated 12 August 2016</h2>

</hgroup>

hr_42.html

<p>HTML is a language for describing web pages.....</p>

<hr>

<p>CSS defines how to display HTML elements.....</p>

i_43.html

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

iframe_44.html

img_45.html

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

input_46.html

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

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

</form>

ins_47.html

www.activenetinformatics.com 9848111288 Page 18

ActiveNET HTML, CSS, JavaScript 2017

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

kbd_48.html

<kbd>Keyboard input</kbd>

keygen_49.html

<form action="/action.jsp" method="get">

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security">

</form>

label_50.html

<input type="radio" name="gender" id="male" value="male"><br>

<label for="female">Female</label>

<input type="radio" name="gender" id="female" value="female"><br>

<label for="other">Other</label>

<input type="radio" name="gender" id="other" value="other"><br><br>

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

</form>

li_51.html

<ol>

<li>Coffee</li>

</ol>

link_52.html

<head>

<link rel="stylesheet" type="text/css" href="theme.css">

</head>

main_53.html

<main>

<h1>Web Browsers</h1>

www.activenetinformatics.com 9848111288 Page 19

ActiveNET HTML, CSS, JavaScript 2017

<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser developed by Google,

released in 2008.</p>

</article>

<h1>Internet Explorer</h1>

<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>

</article>

<h1>Mozilla Firefox</h1>

<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

</article>

</main>

mark_54.html

<p>Do not forget to buy <mark>milk</mark> today.</p>

menu_55.html

<div style="background:yellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">

<p>Right-click inside this box to see the context menu!</p>

<menu type="context" id="mymenu">

<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>

<menu label="Share on...">

<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' +

window.location.href);"></menuitem>

<menuitem label="Facebook" icon="ico_facebook.png"

onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>

</menu>

<menuitem label="Email This Page"

onclick="window.location='mailto:?body='+window.location.href;"></menuitem>

</menu>

</div>
<p>This example currently only works in Firefox!</p>

www.activenetinformatics.com 9848111288 Page 20

ActiveNET HTML, CSS, JavaScript 2017

meta_56.html

<head>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

meter_57.html

<meter value="2" min="0" max="10">2 out of 10</meter><br>

nav_58.html

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

noscript_59.html

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text inside the noscript element.</p>

object_60.html

<object width="400" height="400" data="helloworld.swf"></object>

ol_61.html

<ol>

<li>Coffee</li>

</ol>

www.activenetinformatics.com 9848111288 Page 21

ActiveNET HTML, CSS, JavaScript 2017

<ol type="1|a|A|i|I" start="50">

<li>Coffee</li>

</ol>

optgroup_62.html

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

</optgroup>

</select>

option_63.html

<option value="volvo">Volvo</option>

</select>

output_64.html

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

p_65.html

<p>This is some text in a paragraph.</p>

param_66.html

www.activenetinformatics.com 9848111288 Page 22

ActiveNET HTML, CSS, JavaScript 2017

<param name="autoplay" value="true">

</object>

pre_67.html

<pre>

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and

line breaks

</pre>

progress_68.html

<progress value="22" max="100"></progress>

q_69.html

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.</p>

s_70.html

<p><s>My car is blue.</s></p>

<p>My new car is silver.</p>

script_71.html

<!DOCTYPE html>

<html>

<head>

document.getElementById("demo").innerHTML = "Hello ActiveNET!";

</script>

</head>

<body>

</body>

</html>

www.activenetinformatics.com 9848111288 Page 23

ActiveNET HTML, CSS, JavaScript 2017

section_72.html

<p>The World Wide Fund for Nature (WWF) is....</p>

</section>

small_73.html

<p>W3Schools.com - the world's largest web development site.</p>

<p><small>Copyright 1999-2050 by Refsnes Data.</small></p>

span_74.html

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

style_75.html

<head>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>

<h1>A heading</h1>

<p>A paragraph.</p>

</body>

sub_sup_76.html

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

table_77.html

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>
<tr>

www.activenetinformatics.com 9848111288 Page 24

ActiveNET HTML, CSS, JavaScript 2017

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

tbody_78.html

<table>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

<tfoot>

<tr>

www.activenetinformatics.com 9848111288 Page 25

ActiveNET HTML, CSS, JavaScript 2017

</tr>

</tfoot>

</table>

td_79.html

<table>

<tr>

</tr>

</table>

textarea_80.html

<form action="/action_page.php" id="usrform">

Name: <input type="text" name="usrname">

</form>

<textarea name="comment" form="usrform">Enter text here...</textarea>

th_81.html

<table>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

time_82.html

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

title_83.html

<head>

www.activenetinformatics.com 9848111288 Page 26

ActiveNET HTML, CSS, JavaScript 2017

<title>HTML Reference</title>

</head>

track_84.html

<video width="320" height="240" controls>

<source src="forrest_gump.mp4" type="video/mp4">

<source src="forrest_gump.ogg" type="video/ogg">

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">

</video>

u_85.html

<p>This is a <u>parragraph</u>.</p>

ul_86.html

<ul>

<li>Coffee</li>

</ul>

video_87.html

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

wbr_88.html

<p>Try to shrink the browser window, to view how the very long word in

the paragraph below will break:</p>

<p>This is a
veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecifi
c<wbr>placeswhenthebrowserwindowisresized.</p>

www.activenetinformatics.com 9848111288 Page 27

ActiveNET HTML, CSS, JavaScript 2017

CSS
(369 Properties)
Introduction to CSS
• CSS – Stands for Cascading Style Sheet
• CSS describe how HTML tags/elements want to be displayed/rendered on browser
• CSS reduces lot of work by writing in a singe css file and adding it into multiple HTML pages.
• CSS stored as a .css extension file in a external file and included in HTML file <link> tag.
• CSS properties are cross compatible all the devices such as desktop web browsers, mobiles,
tables and TVs.
• CSS is platform independent.

Who created and maintains CSS

CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained through a group of
people within the W3C called the CSS Working Group. The CSS Working Group creates
documents called specifications. When a specification has been discussed and officially ratified
by W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over
the actual implementation of the language. Independent companies and organizations create
that software.

NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.

CSS Versions
Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December 1996.
This version describes the CSS language as well as a simple visual formatting model for all the HTML
tags.

CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds support
for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning
and tables.

www.activenetinformatics.com 9848111288 Page 28

ActiveNET HTML, CSS, JavaScript 2017

CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. it has divided
into documentations is called as Modules and here each module having new extension features
defined in CSS2.

CSS3 Modules
CSS3 Modules are having old CSS specifications as well as extension features.
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

CSS Property Groups

Color Table Paged Media
Background and Borders Lists and Counters Generated Content
Basic Box Animation Filter Effects
Flexible Box Transform Image/Replaced Content
Text Transition Masking
Text Decoration Basic User Interface Speech
Fonts Multi-column Marquee
Writing Modes

Color Properties: 2
color, opacity
Background and Border Properties: 43
background, background-attachment, background-blend-mode, background-color, background-image,
background-position, background-repeat, background-clip, background-origin, background-size, border,
border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-
bottom-style, border-bottom-width, border-color, border-image, border-image-outset, border-image-
repeat, border-image-slice, border-image-source, border-image-width, border-left, border-left-color,
border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style,
border-right-width, border-style, border-top, border-top-color, border-top-left-radius, border-top-right-
radius, border-top-style, border-top-width, border-width, box-decoration-break, box-shadow
Basic Box Properties: 31

www.activenetinformatics.com 9848111288 Page 29

ActiveNET HTML, CSS, JavaScript 2017

bottom, clear, clip, display, float, height, left, margin, margin-bottom, margin-left, margin-right, margin-
top, max-height, max-width, min-height, min-width, overflow, overflow-x, overflow-y, padding, padding-
bottom, padding-left, padding-right, padding-top, position, right, top, visibility, width, vertical-align, z-
index
Flexible Box Layout Properties: 12
align-content, align-items, align-self, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-
wrap, justify-content, order
Text Properties: 17
hanging-punctuation, hyphens, letter-spacing, line-break, line-height, overflow-wrap, tab-size, text-align,
text-align-last, text-combine-upright, text-indent, text-justify, text-transform, white-space, word-break,
word-spacing, word-wrap
Text Decoration Properties: 6
text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-shadow, text-
underline-position
Font Properties: 20
@font-face, @font-feature-values, font, font-family, font-feature-settings, font-kerning, font-language-
override, font-size, font-size-adjust, font-stretch, font-style, font-synthesis, font-variant, font-variant-
alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-
variant-position, font-weight
Writing Mode Properties: 6
direction, text-orientation, text-combine-upright, unicode-bidi, user-select, writing-mode
Table Properties: 5
border-collapse, border-spacing, caption-side, empty-cells, table-layout
Lists & Counters Properties: 6
counter-increment, counter-reset, list-style, list-style-image, list-style-position, list-style-type
Animation Properties: 10
@keyframes, animation, animation-delay, animation-direction, animation-duration, animation-fill-
mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function
Transform Properties: 6
backface-visibility, perspective, perspective-origin, transform, transform-origin, transform-style
Transition Properties: 5
transition, transition-property, transition-duration, transition-timing-function, transition-delay
Basic UI Properties: 16
box-sizing, content, cursor, ime-mode, nav-down, nav-index, nav-left, nav-right, nav-up, outline, outline-
color, outline-offset, outline-style, outline-width, resize, text-overflow
Multi Column Layout Properties: 14

www.activenetinformatics.com 9848111288 Page 30

ActiveNET HTML, CSS, JavaScript 2017

break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-

rule-color, column-rule-style, column-rule-width, column-span, column-width, columns, Widows
Paged Media Properties: 4
Orphans, page-break-after, page-break-before, page-break-inside
Generated Content for Paged Media Properties: 2
marks, quotes
Filter Effects Properties: 1
filter
Image Values and Replaced Content: 5
image-orientation, image-rendering, image-resolution, object-fit, object-position
Masking Properties: 2
mask, mask-type
Speech Properties: 14
Mark, mark-after, mark-before, Phonemes, rest, rest-after, rest-before, voice-balance, voice-duration,
voice-pitch, voice-pitch-range, voice-rate, voice-stress, voice-volume
Marquee Properties: 4
marquee-direction, marquee-play-count, marquee-speed, marquee-style

Details of CSS Properties

Color Properties
Property Description CSS

color Sets the color of text 1

opacity Sets the opacity level for an element 3

Background and Border Properties

Property Description CSS

background A shorthand property for setting all the background properties in one 1
declaration

background- Sets whether a background image is fixed or scrolls with the rest of the page 1
attachment

background-blend- Specifies the blending mode of each background layer (color/image) 3

mode

background-color Specifies the background color of an element 1

background-image Specifies one or more background images for an element 1

www.activenetinformatics.com 9848111288 Page 31

ActiveNET HTML, CSS, JavaScript 2017

background-position Specifies the position of a background image 1

background-repeat Sets how a background image will be repeated 1

background-clip Specifies the painting area of the background 3

background-origin Specifies where the background image(s) is/are positioned 3

background-size Specifies the size of the background image(s) 3

border Sets all the border properties in one declaration 1

border-bottom Sets all the bottom border properties in one declaration 1

border-bottom-color Sets the color of the bottom border 1

border-bottom-left- Defines the shape of the border of the bottom-left corner 3

radius

border-bottom-right- Defines the shape of the border of the bottom-right corner 3

radius

border-bottom-style Sets the style of the bottom border 1

border-bottom-width Sets the width of the bottom border 1

border-color Sets the color of the four borders 1

border-image A shorthand property for setting all the border-image-* properties 3

border-image-outset Specifies the amount by which the border image area extends beyond the 3
border box

border-image-repeat Specifies whether the border image should be repeated, rounded or 3

stretched

border-image-slice Specifies how to slice the border image 3

border-image-source Specifies the path to the image to be used as a border 3

border-image-width Specifies the widths of the image-border 3

border-left Sets all the left border properties in one declaration 1

border-left-color Sets the color of the left border 1

border-left-style Sets the style of the left border 1

border-left-width Sets the width of the left border 1

www.activenetinformatics.com 9848111288 Page 32

ActiveNET HTML, CSS, JavaScript 2017

border-radius A shorthand property for setting all the four border-*-radius properties 3

border-right Sets all the right border properties in one declaration 1

border-right-color Sets the color of the right border 1

border-right-style Sets the style of the right border 1

border-right-width Sets the width of the right border 1

border-style Sets the style of the four borders 1

border-top Sets all the top border properties in one declaration 1

border-top-color Sets the color of the top border 1

border-top-left- Defines the shape of the border of the top-left corner 3

radius

border-top-right- Defines the shape of the border of the top-right corner 3

radius

border-top-style Sets the style of the top border 1

border-top-width Sets the width of the top border 1

border-width Sets the width of the four borders 1

box-decoration-break Sets the behaviour of the background and border of an element at page- 3
break, or, for in-line elements, at line-break.

box-shadow Attaches one or more drop-shadows to the box 3

Basic Box Properties

Property Description CSS

bottom Specifies the bottom position of a positioned element 2

clear Specifies which sides of an element where other floating elements are not allowed 1

clip Clips an absolutely positioned element 2

display Specifies how a certain HTML element should be displayed 1

float Specifies whether or not a box should float 1

height Sets the height of an element 1

www.activenetinformatics.com 9848111288 Page 33

ActiveNET HTML, CSS, JavaScript 2017

left Specifies the left position of a positioned element 2

margin Sets all the margin properties in one declaration 1

margin- Sets the bottom margin of an element 1

bottom

margin-left Sets the left margin of an element 1

margin-right Sets the right margin of an element 1

margin-top Sets the top margin of an element 1

max-height Sets the maximum height of an element 2

max-width Sets the maximum width of an element 2

min-height Sets the minimum height of an element 2

min-width Sets the minimum width of an element 2

overflow Specifies what happens if content overflows an element's box 2

overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows 3
the element's content area

overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows 3
the element's content area

padding Sets all the padding properties in one declaration 1

padding- Sets the bottom padding of an element 1

bottom

padding-left Sets the left padding of an element 1

padding-right Sets the right padding of an element 1

padding-top Sets the top padding of an element 1

position Specifies the type of positioning method used for an element (static, relative, 2
absolute or fixed)

right Specifies the right position of a positioned element 2

top Specifies the top position of a positioned element 2

visibility Specifies whether or not an element is visible 2

www.activenetinformatics.com 9848111288 Page 34

ActiveNET HTML, CSS, JavaScript 2017

width Sets the width of an element 1

vertical-align Sets the vertical alignment of an element 1

z-index Sets the stack order of a positioned element 2

Flexible Box Layout

Property Description CSS

align-content Specifies the alignment between the lines inside a flexible container when the items 3
do not use all available space

align-items Specifies the alignment for items inside a flexible container 3

align-self Specifies the alignment for selected items inside a flexible container 3

flex Specifies the length of the item, relative to the rest 3

flex-basis Specifies the initial length of a flexible item 3

flex-direction Specifies the direction of the flexible items 3

flex-flow A shorthand property for the flex-direction and the flex-wrap properties 3

flex-grow Specifies how much the item will grow relative to the rest 3

flex-shrink Specifies how the item will shrink relative to the rest 3

flex-wrap Specifies whether the flexible items should wrap or not 3

justify- Specifies the alignment between the items inside a flexible container when the items 3
content do not use all available space

order Sets the order of the flexible item, relative to the rest 3

Text Properties
Property Description CSS

hanging- Specifies whether a punctuation character may be placed outside the line box 3
punctuation

hyphens Sets how to split words to improve the layout of paragraphs 3

letter-spacing Increases or decreases the space between characters in a text 1

line-break Specifies how/if to break lines 3

www.activenetinformatics.com 9848111288 Page 35

ActiveNET HTML, CSS, JavaScript 2017

line-height Sets the line height 1

overflow-wrap Specifies whether or not the browser may break lines within words in order to 3
prevent overflow (when a string is too long to fit its containing box)

tab-size Specifies the length of the tab-character 3

text-align Specifies the horizontal alignment of text 1

text-align-last Describes how the last line of a block or a line right before a forced line break is 3
aligned when text-align is "justify"

text-combine- Specifies the combination of multiple characters into the space of a single character 3
upright

text-indent Specifies the indentation of the first line in a text-block 1

text-justify Specifies the justification method used when text-align is "justify" 3

text-transform Controls the capitalization of text 1

white-space Specifies how white-space inside an element is handled 1

word-break Specifies line breaking rules for non-CJK scripts 3

word-spacing Increases or decreases the space between words in a text 1

word-wrap Allows long, unbreakable words to be broken and wrap to the next line 3

Text Decoration Properties

Property Description CSS

text-decoration Specifies the decoration added to text 1

text-decoration- Specifies the color of the text-decoration 3

color

text-decoration-line Specifies the type of line in a text-decoration 3

text-decoration-style Specifies the style of the line in a text decoration 3

text-shadow Adds shadow to text 3

text-underline- Specifies the position of the underline which is set using the text- 3
position decoration property

Font Properties

www.activenetinformatics.com 9848111288 Page 36

ActiveNET HTML, CSS, JavaScript 2017

Property Description CSS

@font-face A rule that allows websites to download and use fonts other than the "web-safe" 3
fonts

@font-feature- Allows authors to use a common name in font-variant-alternate for feature 3

values activated differently in OpenType

font Sets all the font properties in one declaration 1

font-family Specifies the font family for text 1

font-feature- Allows control over advanced typographic features in OpenType fonts 3

settings

font-kerning Controls the usage of the kerning information (how letters are spaced) 3

font-language- Controls the usage of language-specific glyphs in a typeface 3

override

font-size Specifies the font size of text 1

font-size-adjust Preserves the readability of text when font fallback occurs 3

font-stretch Selects a normal, condensed, or expanded face from a font family 3

font-style Specifies the font style for text 1

font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the 3
browser

font-variant Specifies whether or not a text should be displayed in a small-caps font 1

font-variant- Controls the usage of alternate glyphs associated to alternative names defined in 3
alternates @font-feature-values

font-variant-caps Controls the usage of alternate glyphs for capital letters 3

font-variant-east- Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and 3
asian Chinese)

font-variant- Controls which ligatures and contextual forms are used in textual content of the 3
ligatures elements it applies to

font-variant- Controls the usage of alternate glyphs for numbers, fractions, and ordinal 3
numeric markers

font-variant- Controls the usage of alternate glyphs of smaller size positioned as superscript or 3
position subscript regarding the baseline of the font

www.activenetinformatics.com 9848111288 Page 37

ActiveNET HTML, CSS, JavaScript 2017

font-weight Specifies the weight of a font 1

Writing Modes Properties

Property Description CSS

direction Specifies the text direction/writing direction 2

text-orientation Defines the orientation of the text in a line 3

text-combine- Specifies the combination of multiple characters into the space of a single character 3
upright

unicode-bidi Used together with the direction property to set or return whether the text should be 2
overridden to support multiple languages in the same document

user-select Specifies whether the text of an element can be selected 3

writing-mode 3

Table Properties
Property Description CSS

border- Specifies whether or not table borders should be collapsed 2

collapse

border-spacing Specifies the distance between the borders of adjacent cells 2

caption-side Specifies the placement of a table caption 2

empty-cells Specifies whether or not to display borders and background on empty 2

cells in a table

table-layout Sets the layout algorithm to be used for a table 2

Lists and Counters Properties

Property Description CSS

counter- Increments one or more counters 2

increment

counter-reset Creates or resets one or more counters 2

list-style Sets all the properties for a list in one declaration 1

list-style-image Specifies an image as the list-item marker 1

www.activenetinformatics.com 9848111288 Page 38

ActiveNET HTML, CSS, JavaScript 2017

list-style-position Specifies if the list-item markers should appear inside or outside the 1
content flow

list-style-type Specifies the type of list-item marker 1

Animation Properties
Property Description CSS

@keyframes Specifies the animation code 3

animation A shorthand property for all the animation properties (except 3

animation-play-state and animation-fill-mode)

animation-delay Specifies a delay for the start of an animation 3

animation-direction Specifies whether or not the animation should play in reverse on 3

alternate cycles

animation-duration Specifies how many seconds or milliseconds an animation takes to 3

complete one cycle

animation-fill-mode Specifies a style for the element when the animation is not playing 3
(when it is finished, or when it has a delay)

animation-iteration- Specifies the number of times an animation should be played 3

count

animation-name Specifies the name of the @keyframes animation 3

animation-play-state Specifies whether the animation is running or paused 3

animation-timing- Specifies the speed curve of an animation 3

function

Transform Properties
Property Description CSS

backface-visibility Defines whether or not an element should be visible when not facing 3
the screen

perspective Specifies the perspective on how 3D elements are viewed 3

perspective-origin Specifies the bottom position of 3D elements 3

transform Applies a 2D or 3D transformation to an element 3

www.activenetinformatics.com 9848111288 Page 39

ActiveNET HTML, CSS, JavaScript 2017

transform-origin Allows you to change the position on transformed elements 3

transform-style Specifies how nested elements are rendered in 3D space 3

Transitions Properties
Property Description CSS

transition A shorthand property for setting the four transition properties 3

transition-property Specifies the name of the CSS property the transition effect is for 3

transition-duration Specifies how many seconds or milliseconds a transition effect 3

takes to complete

transition-timing- Specifies the speed curve of the transition effect 3

function

transition-delay Specifies when the transition effect will start 3

Basic User Interface Properties

Property Description CSS

box-sizing Tells the browser what the sizing properties (width and height) should 3
include

content Used with the :before and :after pseudo-elements, to insert generated 2
content

cursor Specifies the type of cursor to be displayed 2

ime-mode Controls the state of the input method editor for text fields 3

nav-down Specifies where to navigate when using the arrow-down navigation key 3

nav-index Specifies the tabbing order for an element 3

nav-left Specifies where to navigate when using the arrow-left navigation key 3

nav-right Specifies where to navigate when using the arrow-right navigation key 3

nav-up Specifies where to navigate when using the arrow-up navigation key 3

outline Sets all the outline properties in one declaration 2

outline-color Sets the color of an outline 2

outline-offset Offsets an outline, and draws it beyond the border edge 3

www.activenetinformatics.com 9848111288 Page 40

ActiveNET HTML, CSS, JavaScript 2017

outline-style Sets the style of an outline 2

outline-width Sets the width of an outline 2

resize Specifies whether or not an element is resizable by the user 3

text-overflow Specifies what should happen when text overflows the containing 3
element

Multi-column Layout Properties

Property Description CSS

break-after Specifies the page-, column-, or region-break behavior after the generated 3
box

break-before Specifies the page-, column-, or region-break behavior before the generated 3
box

break-inside Specifies the page-, column-, or region-break behavior inside the generated 3
box

column-count Specifies the number of columns an element should be divided into 3

column-fill Specifies how to fill columns 3

column-gap Specifies the gap between the columns 3

column-rule A shorthand property for setting all the column-rule-* properties 3

column-rule- Specifies the color of the rule between columns 3

color

column-rule- Specifies the style of the rule between columns 3

style

column-rule- Specifies the width of the rule between columns 3

width

column-span Specifies how many columns an element should span across 3

column-width Specifies the width of the columns 3

columns A shorthand property for setting column-width and column-count 3

widows Sets the minimum number of lines that must be left at the top of a page when 2
a page break occurs inside an element

www.activenetinformatics.com 9848111288 Page 41

ActiveNET HTML, CSS, JavaScript 2017

Paged Media
Property Description CSS

orphans Sets the minimum number of lines that must be left at the bottom of a page 2
when a page break occurs inside an element

page-break- Sets the page-breaking behavior after an element 2

after

page-break- Sets the page-breaking behavior before an element 2

before

page-break- Sets the page-breaking behavior inside an element 2

inside

Generated Content for Paged Media

Property Description CSS

marks Adds crop and/or cross marks to the document 3

quotes Sets the type of quotation marks for embedded quotations 2

Filter Effects Properties

Property Description CSS

filter Defines effects (e.g. blurring or color shifting) on an element before the 3
element is displayed

Image Values and Replaced Content

Property Description CSS

image- Specifies a rotation in the right or clockwise direction that a user agent applies to 3
orientation an image (This property is likely going to be deprecated and its functionality moved
to HTML)

image- Gives a hint to the browser about what aspects of an image are most important to 3
rendering preserve when the image is scaled

image- Specifies the intrinsic resolution of all raster images used in/on the element 3
resolution

object-fit Specifies how the contents of a replaced element should be fitted to the box 3
established by its used height and width

object- Specifies the alignment of the replaced element inside its box 3

www.activenetinformatics.com 9848111288 Page 42

ActiveNET HTML, CSS, JavaScript 2017

position

Masking Properties
Property Description CSS

mask 3

mask-type 3

Speech Properties
Property Description CSS

mark A shorthand property for setting the mark-before and mark-after 3

properties

mark-after Allows named markers to be attached to the audio stream 3

mark-before Allows named markers to be attached to the audio stream 3

phonemes Specifies a phonetic pronunciation for the text contained by the 3

corresponding element

Rest A shorthand property for setting the rest-before and rest-after properties 3

rest-after Specifies a rest or prosodic boundary to be observed after speaking an 3

element's content

rest-before Specifies a rest or prosodic boundary to be observed before speaking an 3

element's content

voice-balance Specifies the balance between left and right channels 3

voice-duration Specifies how long it should take to render the selected element's content 3

voice-pitch Specifies the average pitch (a frequency) of the speaking voice 3

voice-pitch- Specifies variation in average pitch 3

range

voice-rate Controls the speaking rate 3

voice-stress Indicates the strength of emphasis to be applied 3

voice-volume Refers to the amplitude of the waveform output by the speech 3

synthesises

Marquee Properties

www.activenetinformatics.com 9848111288 Page 43

ActiveNET HTML, CSS, JavaScript 2017

Property Description CSS

marquee-direction Sets the direction of the moving content 3

marquee-play-count Sets how many times the content move 3

marquee-speed Sets how fast the content scrolls 3

marquee-style Sets the style of the moving content 3

CSS Examples
Color Properties: 2
color, opacity
Color_1.html
<style>
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is
defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
Opacity_2.html
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */

www.activenetinformatics.com 9848111288 Page 44

ActiveNET HTML, CSS, JavaScript 2017

}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more
transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Opacity_Hover_3.html
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements
than the a element.</p>
</body>
</html>
Background and Border Properties: 43
background, background-attachment, background-blend-mode, background-color, background-image,
background-position, background-repeat, background-clip, background-origin, background-size, border,

www.activenetinformatics.com 9848111288 Page 45

ActiveNET HTML, CSS, JavaScript 2017

border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-

bottom-style, border-bottom-width, border-color, border-image, border-image-outset, border-image-
repeat, border-image-slice, border-image-source, border-image-width, border-left, border-left-color,
border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style,
border-right-width, border-style, border-top, border-top-color, border-top-left-radius, border-top-right-
radius, border-top-style, border-top-width, border-width, box-decoration-break, box-shadow
Background_4.html
<!- -
The background shorthand property sets all the background properties in one declaration.
The properties that can be set, are: background-color, background-image, background-position,
background-size, background-repeat, background-origin, background-clip, and background-
attachment.
Syntax:
background: background-color background-image background-position
background-size background-repeat background-origin background-clip
background-attachment;
background-color: yellow | #00ff00 | rgb(255,0,255);
background-image: url(‘path_of_image’);
background-position:left top|left center|left bottom;
background-size: width height;
background-repeat:repeat |repeat-x |repeat-y|no-repeat;
background-origin: padding-box|border-box|content-box;
background-clip: border-box|padding-box|content-box;
background-attachment: scroll|fixed;
-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>

www.activenetinformatics.com 9848111288 Page 46

ActiveNET HTML, CSS, JavaScript 2017

<p>This is some text</p>

Background_color_5.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
p{
background-color: rgb(255,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>

www.activenetinformatics.com 9848111288 Page 47

ActiveNET HTML, CSS, JavaScript 2017

</html>

Background_image_6.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Background_position_7.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
</body>
</html>

Background_size_8.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("img_flwr.gif");

www.activenetinformatics.com 9848111288 Page 48

ActiveNET HTML, CSS, JavaScript 2017

background-size: 80px 60px;

background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>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.</p>
<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162" /></p>
<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and
earlier versions.</p>
</body>
</html>

Background_repeat_9.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>repeat-y will repeat a background image only vertically.</p>
</body>
</html>

Background_origin_10.html
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;

www.activenetinformatics.com 9848111288 Page 49

ActiveNET HTML, CSS, JavaScript 2017

}
#example2 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<p>No background-origin (padding-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>

www.activenetinformatics.com 9848111288 Page 50

ActiveNET HTML, CSS, JavaScript 2017

</body>
</html>

Background_clip_11.html
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<p><strong>Note:</strong> The background-clip property is not supported in Internet Explorer 8 and
earlier versions.</p>
<p>No background-clip (border-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

www.activenetinformatics.com 9848111288 Page 51

ActiveNET HTML, CSS, JavaScript 2017

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>

Background_attachment_12.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>

Border_13.html

www.activenetinformatics.com 9848111288 Page 52

ActiveNET HTML, CSS, JavaScript 2017

<!- -
The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-color.
Syntax:
border: border-width border-style border-color;
border-width: medium|thin|thick
border-
style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
;
border-color: color|transparent;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Border_Width_14.html
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;

www.activenetinformatics.com 9848111288 Page 53

ActiveNET HTML, CSS, JavaScript 2017

}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>
</html>

Border_Style_15.html
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
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.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

www.activenetinformatics.com 9848111288 Page 54

ActiveNET HTML, CSS, JavaScript 2017

Border_Color_16.html
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>
</html>

Border_radius_17.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;

www.activenetinformatics.com 9848111288 Page 55

ActiveNET HTML, CSS, JavaScript 2017

background: #dddddd;
width: 300px;
border-radius: 15px 5px 25px 35px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Box_shadow_18.html
<!- -
The box-shadow property attaches one or more shadows to an element.
Syntax:
box-shadow: none|h-shadow v-shadow blur spread color|inset
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Basic Box Properties: 31

www.activenetinformatics.com 9848111288 Page 56

ActiveNET HTML, CSS, JavaScript 2017

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:

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.

Box_model_19.html
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>

www.activenetinformatics.com 9848111288 Page 57

ActiveNET HTML, CSS, JavaScript 2017

<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 actual content of the box. We have added a 25px padding, 25px margin and a 25px
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>
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the
box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width
and height of the content area. To calculate the full size of an element, you must also add padding,
borders and margins.
Assume we want to style a <div> element to have a total width of 350px:

Box_Width_20.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
Here is the math:
320px (width)
+ 20px (left + right padding)

www.activenetinformatics.com 9848111288 Page 58

ActiveNET HTML, CSS, JavaScript 2017

+ 10px (left + right border)

+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin +
right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin

Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width
property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

Box_bottom_21.html
<!- -
Set the bottom edge of the absolute positioned <div> element to 70px above the bottom edge of its
nearest positioned ancestor:
Syntax:
bottom:auto|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
bottom: 70px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>

www.activenetinformatics.com 9848111288 Page 59

ActiveNET HTML, CSS, JavaScript 2017

<body>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute. It is placed 70 pixels above the bottom
edge of the containing positioned element (div with class="relative").</div>
</div>
</body>
</html>

Box_clear_22.html
<!- -
No floating elements allowed on the left or the right side of a specified <p> element:
Syntax:
clear:none|left|right|both;
-->
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some
text. This is also some text. This is also some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
</html>

Box_clip_23.html
<!- -
What happens if an image is larger than its containing element? - The clip property lets you specify a
rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all
from the top-left corner of the element to be clipped.

www.activenetinformatics.com 9848111288 Page 60

ActiveNET HTML, CSS, JavaScript 2017

Note: The clip property does not work if "overflow:visible".

Syntax:
Clip:auto|shape:rect(top,right,bottom,left)
-->
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>

Box_display_24.html
<!- -
The display property specifies the type of box used for an HTML element.
Syntax:
display:inline|block|flex|inline-block|inline-flex|inline-table|list-item|run-in|table|table-
caption|table-column-group|table-header-group|table-footer-group|table-row-group|table-cell|table-
column|table-row|none|intial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

www.activenetinformatics.com 9848111288 Page 61

ActiveNET HTML, CSS, JavaScript 2017

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

Box_float_25.html
<!- -
The float property specifies whether or not an element should float.
The clear property is used to control the behavior of floating elements.
float property
In its simplest use, the float property can be used to wrap text around images.
The following example specifies that an image should float to the right in a text:
-->
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will
wrap around the image.</p>
<p><img src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>

Box_clear_26.html
<!- -
clear property
The clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the clearproperty.

www.activenetinformatics.com 9848111288 Page 62

ActiveNET HTML, CSS, JavaScript 2017

The clear property specifies on which sides of an element floating elements are not allowed to float:
-->
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since
div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the
whole thing.</div>

<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears
elements floated to the left. You can also clear "right" and "both".</div>

www.activenetinformatics.com 9848111288 Page 63

ActiveNET HTML, CSS, JavaScript 2017

</body>
</html>

Box_height_27.html
<!- -
The height property sets the height of an element.
Note: The height property does not include padding, borders, or margins; it sets the height of the area
inside the padding, border, and margin of the element!
Syntax:
height:auto|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}

.div2 {
border: 1px solid red;
}

.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}

.div4 {
border: 1px solid red;
clear: left;
}
</style>

www.activenetinformatics.com 9848111288 Page 64

ActiveNET HTML, CSS, JavaScript 2017

</head>
<body>

</body>
</html>

Box_left_28.html
<!- -
Set the left edge of the absolute positioned <div> element 80px to the right of the left edge of its
nearest positioned ancestor:
Syntax:
left:auto|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #8AC007;
}

div.absolute {
position: absolute;
left: 80px;
width: 200px;
height: 120px;
border: 3px solid #8AC007;
}

www.activenetinformatics.com 9848111288 Page 65

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>
<body>

<div class="relative">This div element has position: relative;

<div class="absolute">This div element has position: absolute. It is placed 80 pixels to the right of the
left edge of the containing positioned element (div with class="relative").</div>
</div>

</body>
</html>

Box_margin_29.html
<!- -
The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space outside the border.

With CSS, you have full control over the margins. There are CSS properties for setting the margin for
each side of an element (top, right, bottom, and left).
Syntax:
margin: top right bottom left;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
# margin-top: 100px;
# margin-bottom: 100px;
# margin-right: 150px;
# margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using the margin shorthand property</h2>

www.activenetinformatics.com 9848111288 Page 66

ActiveNET HTML, CSS, JavaScript 2017

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>

</body>
</html>

Box_max_height_30.html
<!- -
The max-height property is used to set the maximum height of an element.
This prevents the value of the height property from becoming larger than max-height.
Note: The value of the max-height property overrides height.
Syntax:
max-height:none|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
max-height: 50px;
background-color: yellow;
overflow: auto;
}
</style>
</head>
<body>

<p>The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to
50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set
to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is
set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this
paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of
this paragraph is set to 50px.</p>

</body>
</html>

Box_max_width_31.html
<!- -
The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width.

www.activenetinformatics.com 9848111288 Page 67

ActiveNET HTML, CSS, JavaScript 2017

Note: The value of the max-width property overrides width.

Syntax:
max-width:none|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
max-width: 100px;
background-color: yellow;
}
</style>
</head>
<body>

<p>The maximum width of this paragraph is set to 100px.</p>

</body>
</html>

Box_min_height_32.html
<!- -
The min-height property is used to set the minimum height of an element.
This prevents the value of the height property from becoming smaller than min-height.
Note: The value of the min-height property overrides both max-height and height.
Syntax:
min-height: length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
min-height: 100px;
background-color: yellow;
}
</style>
</head>
<body>

www.activenetinformatics.com 9848111288 Page 68

ActiveNET HTML, CSS, JavaScript 2017

<p>The minimum height of this paragraph is set to 100px.</p>

</body>
</html>

Box_min_width_33.html
<!- -
The min-width property is used to set the minimum width of an element.
This prevents the value of the width property from becoming smaller than min-width.
Note: The value of the min-width property overrides both max-width and width.
Syntax:
bottom:auto|length;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
min-width: 150px;
background-color: yellow;
}
</style>
</head>
<body>

<p>The minimum width of this paragraph is set to 150px.</p>

</body>
</html>

Box_overflow_34.html
<!- -
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big
to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
Syntax:
overflow: visible|hidden|scroll|auto|initial|inherit;
-->
<!DOCTYPE html>
<html>

www.activenetinformatics.com 9848111288 Page 69

ActiveNET HTML, CSS, JavaScript 2017

<head>
<style>
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
}

div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>

<p>The overflow property specifies what to do if the content of an element exceeds the size of the
element's box.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>

</body>
</html>

Box_padding_35.html
<!- -
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for
each side of an element (top, right, bottom, and left).
Syntax:
padding:top right bottom left;

www.activenetinformatics.com 9848111288 Page 70

ActiveNET HTML, CSS, JavaScript 2017

-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
# padding:50px 30px 50px 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and
a left padding of 80px.</div>

</body>
</html>

Box_position_36.html
<!- -
The position property specifies the type of positioning method used for an element (static, relative,
absolute or fixed).
Syntax:
position: static|absolute|fixed|relative|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}

www.activenetinformatics.com 9848111288 Page 71

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>
<body>

<h2>This is a heading with an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is
placed 100px from the left of the page and 150px from the top of the page.</p>

</body>
</html>

Box_visibility_37.html
<!- -
Hiding an element can be done by setting the display property to none. The element will be hidden, and
the page will be displayed as if the element is not there:
visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still
affect the layout:
Syntax:
visibility:hidden;
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
# display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 72

ActiveNET HTML, CSS, JavaScript 2017

Box_zindex_38.html
<!- -
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Syntax:
z-index: auto|number|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

Text Properties: 17
hanging-punctuation, hyphens, letter-spacing, line-break, line-height, overflow-wrap, tab-size, text-align,
text-align-last, text-combine-upright, text-indent, text-justify, text-transform, white-space, word-break,
word-spacing, word-wrap
Text_hanging_punctuation_39.html
<!- -
The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line
box at the start or at the end of a full line of text.
Syntax:
hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit;
-->
<html>
<head>
<style>

www.activenetinformatics.com 9848111288 Page 73

ActiveNET HTML, CSS, JavaScript 2017

p{
# hanging-punctuation: allow-end;
hanging-punctuation: first;
padding 10px;
}
</style>
</head>

<body>
<p>Hai</p>
<P>
Somethingsomething something nothing. Nothingnothing nothing something.
</P>
</body>
</html>

Text_hyphens_40.html
<!- -
Hyphenation allows the controlled splitting of words onto 2 lines to improve the layout of text when
wrapping lines, typically splitting words at syllabic or morphemic boundaries and visually indicating the
split (usually by inserting a hyphen). In some cases, hyphenation may also alter the spelling of a word.
-->

Text_letter-spacing_41.html
<!- -
The letter-spacing property increases or decreases the space between characters in a text.
Syntax:
Letter-spacing: normal|length|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 2px;
}

h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

www.activenetinformatics.com 9848111288 Page 74

ActiveNET HTML, CSS, JavaScript 2017

</body>
</html>

Text_line_break_42.html
<!- -
The line-break CSS property is used to specify how (or if) to break lines when working with punctuation
and symbols.
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;
-->

Text_line_hieight_43.html
<!- -
The line-height property specifies the line height.
Syntax:
line-height: normal|number|length|initial|inherit;
-->
<style>
div {
line-height:normal;
# line-height:1;
# line-height:2;
# line-height:3;
# line-height:4;
# line-height:1px;
# line-height:2px;
# line-height:10px;
# line-height:25px;
# line-height:50%;
# line-height:100%;
# line-height:150%;
# line-height:initial;
}
</style>
<div>
This example demonstrates different line-heights. You can change the lineheight by clicking on one of
the line-height properties on the left. This text is where you will see the result of the selected line-height
property.
</div>

www.activenetinformatics.com 9848111288 Page 75

ActiveNET HTML, CSS, JavaScript 2017

Text_overflow_wrap_44.html
<!- -
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside
the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an
unusually long string of text causing layout problems due to overflow.
• normal: the default. The browser will break lines according to normal line breaking rules. Words
or unbroken strings will not break, even if they overflow the container.
• break-word: words or strings of characters that are too large to fit inside their container will
break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if
the hyphensproperty is used.
• inherit: the targeted element must inherit the value of theoverflow-wrap property defined on its
immediate parent.
Syntax:
overflow-wrap:normal|break-word|inherit;
-->
<head>
<script>
document.querySelector('button').addEventListener('click', function () {
document.querySelector('p').classList.toggle('ow');
}, false);
</script>
<style>
body {
padding: 20px;
font-size: 20px;
}

h2 {
text-align: center;
margin-bottom: 14px;
}

p {
margin: 0 auto;
max-width: 300px;
border: solid 2px #ccc;
padding: 12px;
}

button {
display: block;
margin: 20px auto;
}

.ow {
overflow-wrap: break-word;
word-wrap: break-word;

www.activenetinformatics.com 9848111288 Page 76

ActiveNET HTML, CSS, JavaScript 2017

hyphens: auto;
}
</style>
</head>
<body>
<h2>overflow-wrap/word-wrap demo</h2>
<p>This is the first time I've seen the
word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>
<button>Toggle Overflow Wrap</button>
</body>

Text_tab_size_45.html
<!- -
The tab-size property specifies the length of the space used for the tab character.
In HTML, the tab character is usually displayed as a single space-character, except for some elements,
like <textarea> and <pre>, and the result of the tab-size property will only be visible for these elements.
Syntax:
tab-size: number|length|initial|inherit;;
-->
<!DOCTYPE html>
<html>
<head>
<style>
#t1 {
-moz-tab-size: 4; /* Code for Firefox */
-o-tab-size: 4; /* Code for Opera 10.6-12.1 */
tab-size: 4;
}

#t2 {
-moz-tab-size: 16; /* Code for Firefox */
-o-tab-size: 16; /* Code for Opera 10.6-12.1 */
tab-size: 16;
}
</style>
</head>
<body>

<p><b>Note:</b> The tab-size property is currently supported in Chrome, Safari 6.1+ and Opera
15+.</p>

www.activenetinformatics.com 9848111288 Page 77

ActiveNET HTML, CSS, JavaScript 2017

<p><b>Note:</b> Firefox supports an alternative, the -moz-tab-size property.</p>

<p><b>Note:</b> Opera 10.6 to 12.1 supports an alternative, the -o-tab-size property.</p>

</body>
</html>

Text_align_46.html
<!- -
The text-align property specifies the horizontal alignment of text in an element.
Syntax:
text-align: left|right|center|justify|initial|inherit;-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 78

ActiveNET HTML, CSS, JavaScript 2017

-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
-moz-text-align-last: right; /* Code for Firefox */
text-align-last: right;
}
</style>
</head>
<body>

<div>
You can use the text-align-last property to align the last line of a text, if the text has the text-align
property set to justify. This text is where you will see the result of the text-align-last property. You can
use the text-align-last property to align the last line of a text, if the text has the text-align property set to
justify. This text is where you will see the result of the text-align-last property.
</div>

</body>
</html>

Text_combine_upright_48.html
<!- -
The text-combine-upright CSS property specifies the combination of multiple characters into the
space of a single character. If the combined text is wider than 1em, the user agent must fit the
contents within 1em. The resulting composition is treated as a single upright glyph for layout and
decoration. This property only has an effect in vertical writing modes.
This is used to produce an effect that is known as tate-chū-yoko ( 縦中横
) in Japanese, or
as 直書橫向 in Chinese.
Syntax:
Text-combine-upright:none|all|digits|digits 4|inherit|initial;
-->
<body>
<p lang="ja" class="exampleText"> 平成20年4月16日に</p>
</body>
<head>
<style>
.exampleText {
writing-mode: vertical-lr;
text-combine-upright: digits 2;
font: 36px serif;
}

www.activenetinformatics.com 9848111288 Page 79

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>

Text_indent_49.html
<!- -
The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
Syntax:
text-indent: length|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-indent: 50px;
}
</style>
</head>
<body>

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

</body>
</html>

Text_justify_50.html
<!- -
The text-justify property specifies the justification method to use when text-align is set to "justify".
This property specifies how justified text should be aligned and spaced.
Syntax:
text-justify: auto|inter-word|inter-ideograph|inter-
cluster|distribute|kashida|trim|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>

www.activenetinformatics.com 9848111288 Page 80

ActiveNET HTML, CSS, JavaScript 2017

</head>
<body>

<h1>CSS text-justify Example</h1>

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

<p><b>Tip:</b> Resize the browser window to see how the value "justify" works.</p>

<p><b>Note:</b> The text-justify property only works in IE.</p>

</body>
</html>

Text_transform_51.html
<!- -
The text-transform property controls the capitalization of text.
Syntax:
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 81

ActiveNET HTML, CSS, JavaScript 2017

Text_white_space _52.html
<!- -
The white-space property specifies how white-space inside an element is handled.
Syntax:
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
white-space: nowrap;
}
</style>
</head>
<body>

</body>
</html>

Text_word_break _53.html
<!- -
The word-break property specifies line breaking rules for non-CJK scripts.
Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.
Syntax:
word-break: normal|break-all|keep-all|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}

p.test2 {

www.activenetinformatics.com 9848111288 Page 82

ActiveNET HTML, CSS, JavaScript 2017

width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

<p><b>Note:</b> The word-break property is not supported in Opera 12 and earlier versions.</p>

</body>
</html>

Text_word_spacing _54.html
<!- -
The word-spacing property increases or decreases the white space between words.
Note: Negative values are allowed.
Syntax:
word-spacing: normal|length|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
word-spacing: 30px;
}
</style>
</head>
<body>

</body>
</html>

Text_word_wrap _55.html
<!- -
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
Syntax:

www.activenetinformatics.com 9848111288 Page 83

ActiveNET HTML, CSS, JavaScript 2017

word-wrap: normal|break-word|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.

The long word will break and wrap to the next line.</p>

</body>
</html>

Text Decoration Properties: 6

text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-shadow, text-
underline-position
Text_decoration _56.html
<!- -
The text-decoration property specifies the decoration added to text.
Note: In CSS3, the text-decoration property is a shorthand property for text-decoration-line, text-
decoration-color, and text-decoration-style, but this is currently not supported in any of the major
browsers.
Note: In CSS3 you can use the text-decoration-color property to change the color of the decoration,
otherwise the color is the same as the color of the text.
Syntax:
text-decoration: none|underline|overline|line-through|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;

www.activenetinformatics.com 9848111288 Page 84

ActiveNET HTML, CSS, JavaScript 2017

}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

Text_decoration_color_57.html
<!- -
The text-decoration-color property specifies the color of the text-decoration (underlines, overlines,
linethroughs).
Note: The text-decoration-color property will only have an effect on elements with a visible text-
decoration.
Syntax:
text-decoration-color: color|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-decoration: underline;
-moz-text-decoration-color: red; /* Code for Firefox */
text-decoration-color: red;
}
</style>
</head>
<body>

<p>The color of the lines should now be red!</p>

<p><b>Note:</b> The text-decoration-color property is not supported in any of the major

browsers.</p>
<p><b>Note:</b> Firefox supports an alternative, the -moz-text-decoration-color property.</p>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 85

ActiveNET HTML, CSS, JavaScript 2017

Text_decoration_line_58.html
<!- -
The text-decoration-line property specifies what type of line, if any, the decoration will have.
Note: You can also set the text-decoration-line using the text-decoration property, which is a short-hand
property for the text-decoration-line, text-decoration-style, and the text-decoration-color properties.
Note: You can also combine more than one value, like underline and overline to display lines both under
and over the text.
Syntax:
text-decoration-line: none|underline|overline|line-through|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
-moz-text-decoration-line: overline; /* Code for Firefox */
text-decoration-line: overline;
}
</style>
</head>
<body>

<p>The paragraphs in this example should be displayed with a line on top.</p>

<p><b>Note:</b> The text-decoration-line is not supported in any of the major browsers.</p>

<p><b>Note:</b> Firefox supports an alternative, the -moz-text-decoration-line property.</p>

</body>
</html>

Text_decoration_style_59.html
<!- -
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -moz- specify the first version that worked with a prefix.
Syntax:
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-decoration: underline;

www.activenetinformatics.com 9848111288 Page 86

ActiveNET HTML, CSS, JavaScript 2017

text-decoration-style: wavy;
}
</style>
</head>
<body>

<p>The paragraphs in this example should be displayed with a wavy line under the text.</p>

<p><b>Note:</b> The text-decoration-style is only supported by Firefox.</p>

</body>
</html>

Text_shadow_60.html
<!- -
The text-shadow property adds shadow to text.
This property accepts a comma-separated list of shadows to be applied to the text.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow effect</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>

</body>
</html>

Text_underline_position_61.html
<!- -
The CSS text-underline-position property specifies the position of the underline which is set using
the text-decoration propertyunderline value.
Syntax:
text-underline-position: auto;
text-underline-position: under;

www.activenetinformatics.com 9848111288 Page 87

ActiveNET HTML, CSS, JavaScript 2017

text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
-->

Font Properties: 20
@font-face, @font-feature-values, font, font-family, font-feature-settings, font-kerning, font-language-
override, font-size, font-size-adjust, font-stretch, font-style, font-synthesis, font-variant, font-variant-
alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-
variant-position, font-weight

Font_Face_62.html
<!- -
With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and
then point to the font file.
Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the
font-family property:
Syntax:
@font-face {
font-properties
}
font-family:name src:url font-strech: normal|condensed|ultra-condensed|extra-
condensed|semi-condensed|expanded|semi-expanded|extra-expanded|ultra-
condensed font-style:normal|italic|oblique font-weight:normal|bold|100|200
-->
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
font-family: myFirstFont;
}

www.activenetinformatics.com 9848111288 Page 88

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>
<body>

<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF
format (only support for EOT format).</p>

</body>
</html>

Font_Family_63.html
<!- -
The CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")

Generic Font family Description

family

Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters

Sans-serif Arial "Sans" means without - these fonts do not

Verdana have the lines at the ends of characters

Monospace Courier New All monospace characters have the same

Lucida Console width

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times
New Roman".
More than one font family is specified in a comma-separated list:

www.activenetinformatics.com 9848111288 Page 89

ActiveNET HTML, CSS, JavaScript 2017

-->
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}

p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Font_Style_64.html
<!- -
The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

www.activenetinformatics.com 9848111288 Page 90

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Font_Size_px_65.html
<!- -
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known
Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}
</style>

www.activenetinformatics.com 9848111288 Page 91

ActiveNET HTML, CSS, JavaScript 2017

</head>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Font_Size_em_66.html
<!- -
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of
1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes
larger/smaller than it should.</p>

</body>

www.activenetinformatics.com 9848111288 Page 92

ActiveNET HTML, CSS, JavaScript 2017

</html>

Font_Weight_67.html
<!- -
The font-weight property specifies the weight of a font:
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}

p.light {
font-weight: lighter;
}

p.thick {
font-weight: bold;
}

p.thicker {
font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>

<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Font_Variant_68.html
<!- -
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted
uppercase letters appears in a smaller font size than the original uppercase letters in the text.
-->
<!DOCTYPE html>
<html>
<head>

www.activenetinformatics.com 9848111288 Page 93

ActiveNET HTML, CSS, JavaScript 2017

p.small {
font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>

</body>
</html>

Writing Mode Properties: 6

direction, text-orientation, text-combine-upright, unicode-bidi, user-select, writing-mode

Writing_Mode_direction_69.html
<!- -
Set the text direction to "right-to-left":
Syntax:
direction: ltr|rtl|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
direction: rtl;
}
</style>
</head>
<body>

<div>Some text. Default writing direction.</div>

www.activenetinformatics.com 9848111288 Page 94

ActiveNET HTML, CSS, JavaScript 2017

<div class="ex1">Some text. Right-to-left direction.</div>

</body>
</html>

Table Properties: 5
border-collapse, border-spacing, caption-side, empty-cells, table-layout

Table_border_collapse_70.html
<!- -
The border-collapse property sets whether the table borders are collapsed into a single border or
detached as in standard HTML.
Syntax:
border-collapse: separate|collapse|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>

www.activenetinformatics.com 9848111288 Page 95

ActiveNET HTML, CSS, JavaScript 2017

</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected
results
in IE8 and earlier versions.</p>

</body>
</html>

Table_border_spacing_71.html
<!- -
The border-spacing property sets the distance between the borders of adjacent cells (only for the
"separated borders" model).
Syntax:
border-spacing: length|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
table.ex1 {
border-collapse: separate;
border-spacing: 10px;
}

table.ex2 {
border-collapse: separate;
border-spacing: 10px 50px;
}
</style>
</head>
<body>

<table class="ex1" border="1">

<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br>

<table class="ex2" border="1">

<tr>

www.activenetinformatics.com 9848111288 Page 96

ActiveNET HTML, CSS, JavaScript 2017

<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>

<p><b>Note:</b> IE8 supports the border-spacing

property if a !DOCTYPE is specified.</p>

</body>
</html>

Table_caption_side_72.html
<!- -
The caption-side property specifies the placement of a table caption.
Syntax:
caption-side: top|bottom|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
caption {
caption-side: bottom;
}
</style>
</head>
<body>

<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>

www.activenetinformatics.com 9848111288 Page 97

ActiveNET HTML, CSS, JavaScript 2017

<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

<p><b>Note:</b> IE8 supports the caption-side

property if a !DOCTYPE is specified.</p>

</body>
</html>

Table_empty_cells_73.html
<!- -
The empty-cells property sets whether or not to display borders and background on empty cells in a
table (only for the "separated borders" model).
Syntax:
empty-cells: show|hide|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
table {

www.activenetinformatics.com 9848111288 Page 98

ActiveNET HTML, CSS, JavaScript 2017

border-collapse: separate;
empty-cells: hide;
}
</style>
</head>

<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>

<p><b>Note:</b> Internet Explorer 8 supports the empty-cells

property if a !DOCTYPE is specified.</p>

</body>
</html>

Table_Layout_74.html
<!- -
The table-layout property sets the table layout algorithm to be used for a table.
Syntax:
table-layout: auto|fixed|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
width: 100%;
border: 1px solid black;
}

td {
border: 1px solid black;
}

table.ex1 {
table-layout: auto;
}

www.activenetinformatics.com 9848111288 Page 99

ActiveNET HTML, CSS, JavaScript 2017

table.ex2 {
table-layout: fixed;
}
</style>
</head>
<body>

<p>table-layout: auto:</p>
<table class="ex1">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>

<p>table-layout: fixed:</p>
<table class="ex2">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>

</body>
</html>

Lists & Counters Properties: 6

counter-increment, counter-reset, list-style, list-style-image, list-style-position, list-style-type
List_Counter_increment_75.html
<!- -
The table-layout property sets the table layout algorithm to be used for a table.
Syntax:
counter-increment: none|id|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;

www.activenetinformatics.com 9848111288 Page 100

ActiveNET HTML, CSS, JavaScript 2017

h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

List_Counter_reset_76.html
<!- -
The counter-reset property creates or resets one or more counters.
The counter-reset property is usually used together with the counter-increment property and the
content property.
Syntax:
counter-reset: none|name number|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>

www.activenetinformatics.com 9848111288 Page 101

ActiveNET HTML, CSS, JavaScript 2017

body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

List_Style_77.html
<!- -
The list-style shorthand property sets all the list properties in one declaration.
The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image.
If one of the values above are missing, e.g. "list-style:circle inside;", the default value for the missing
property will be inserted, if any.

www.activenetinformatics.com 9848111288 Page 102

ActiveNET HTML, CSS, JavaScript 2017

Syntax:
list-style: list-style-type list-style-position list-style-
image|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

List_Style_Colors_78.html
<!- -
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will
affect the individual list items:
-->
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {

www.activenetinformatics.com 9848111288 Page 103

ActiveNET HTML, CSS, JavaScript 2017

background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Animation Properties: 10
@keyframes, animation, animation-delay, animation-direction, animation-duration, animation-fill-
mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function
Keyframes_79.html
<!- -
The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is
the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is
complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: Use the animation properties to control the appearance of the animation, and also to bind the
animation to selectors.

www.activenetinformatics.com 9848111288 Page 104

ActiveNET HTML, CSS, JavaScript 2017

Syntax:
@keyframes animationname {keyframes-selector {css-styles;}}
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier
versions.</p>

</body>
</html>

Animation_80.html
<!- -
CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

www.activenetinformatics.com 9848111288 Page 105

ActiveNET HTML, CSS, JavaScript 2017

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

You can change as many CSS properties you want, as many times you want.
To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the
current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will last for 4
seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":
-->
!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* Standard syntax */
@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>

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

www.activenetinformatics.com 9848111288 Page 106

ActiveNET HTML, CSS, JavaScript 2017

</body>
</html>

Animation_81.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:
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-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;}
}

/* Standard syntax */
@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>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

www.activenetinformatics.com 9848111288 Page 107

ActiveNET HTML, CSS, JavaScript 2017

</body>
</html>

Animation_Delay_82.html
<!- -
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;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

/* Safari 4.0 - 8.0 */

www.activenetinformatics.com 9848111288 Page 108

ActiveNET HTML, CSS, JavaScript 2017

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Animation_Iteration_Count_83.html
<!- -
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;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
# animation-iteration-count: 3;
# animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */

www.activenetinformatics.com 9848111288 Page 109

ActiveNET HTML, CSS, JavaScript 2017

}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Animation_Reverse_Direction_84.html
<!- -
The animation-direction property is used to let an animation run in reverse direction or alternate cycles.
The following example will run the animation in reverse direction:
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
# animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */

/* Standard syntax */

www.activenetinformatics.com 9848111288 Page 110

ActiveNET HTML, CSS, JavaScript 2017

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

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Animation_Speed_Curve_85.html
<!- -
The animation-timing-function property specifies the speed curve of the animation.
The animation-timing-function property can have the following values:
• ease - specifies an animation with a slow start, then fast, then end slowly (this is default)
• linear - specifies an animation with the same speed from start to end
• ease-in - specifies an animation with a slow start
• ease-out - specifies an animation with a slow end
• ease-in-out - specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */

www.activenetinformatics.com 9848111288 Page 111

ActiveNET HTML, CSS, JavaScript 2017

#div1 {-webkit-animation-timing-function: linear;}

#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}

/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer

9 and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Animation_Shorthand_86.html
<!- -
The same animation effect as above can be achieved by using the shorthand animation property:
-->
<!DOCTYPE html>
<html>
<head>

www.activenetinformatics.com 9848111288 Page 112

ActiveNET HTML, CSS, JavaScript 2017

/* Safari 4.0 - 8.0 */

@-webkit-keyframes myfirst {
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;}
}

/* Standard syntax */
@keyframes myfirst {
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>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Transform Properties: 6
backface-visibility, perspective, perspective-origin, transform, transform-origin, transform-style

www.activenetinformatics.com 9848111288 Page 113

ActiveNET HTML, CSS, JavaScript 2017

Backface_visibility_87.html
<!- -
The backface-visibility property defines whether or not an element should be visible when not facing the
screen.
This property is useful when an element is rotated, and you do not want to see its backside.
Syntax:
backface-visibility: visible|hidden|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 60px;
width: 60px;
background-color: red;
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
}

#div1 {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}

#div2 {
-webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
backface-visibility: visible;
}
</style>
</head>
<body>

<p>This example shows two div elements, rotated 180 degrees, facing away from the user.</p>
<p>The first div element has the backface-visibility property set to "hidden", and should therefore be
invisible.</p>

<div id="div1">DIV 1</div>

<p><strong>Note:</strong> The backface-visibility property is not supported in Internet Explorer 9 and

earlier versions.</p>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 114

ActiveNET HTML, CSS, JavaScript 2017

Perspective_88.html
<!- -
The perspective property defines how many pixels a 3D element is placed from the view. This property
allows you to change the perspective on how 3D elements are viewed.
When defining the perspective property for an element, it is the CHILD elements that get the
perspective view, NOT the element itself.
Note: The perspective property only affects 3D transformed elements!
Syntax:
perspective: length|none;
-->
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
perspective: 150px;
}

#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>

<p><strong>Note:</strong> The perspective property is not supported in IE9 and earlier versions.</p>

<div id="div1">
<div id="div2">HELLO</div>
</div>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 115

ActiveNET HTML, CSS, JavaScript 2017

Perspective_Origin_89.html
<!- -
The perspective-origin property defines where a 3D element is based in the x- and the y-axis. This
property allows you to change the bottom position of 3D elements.
When defining the perspective-origin property for an element, it is the CHILD elements that are
positioned, NOT the element itself.
Note: This property must be used together with the perspective property, and only affects 3D
transformed elements!
Syntax:
perspective-origin: x-axis y-axis|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}

#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}

</style>
</head>

<body>

<p><strong>Note:</strong> The perspective-origin property is not supported in Internet Explorer 9 and

earlier versions.</p>

www.activenetinformatics.com 9848111288 Page 116

ActiveNET HTML, CSS, JavaScript 2017

<div id="div2">HELLO</div>
</div>

</body>
</html>

Transform_Rotate_90.html
<!- -
The transform property applies a 2D or 3D transformation to an element. This property allows you to
rotate, scale, move, skew, etc., elements.
Syntax:
transform: none|transform-functions|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;

/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(20deg);

/* matrix div */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

/* translate div */
transform:translate(20px,10px);

/* scale div */
transform:scale(1.1,1.1);
# transform:scale(1.5,1.5);
# transform:scale(2,2);

/* scaleX div */
transform:scaleX(1.1);

/* scaleY div */
transform:scaleY(1.1);

/* rotate div */
transform:rotate(10deg);

/* rotateX div */

www.activenetinformatics.com 9848111288 Page 117

ActiveNET HTML, CSS, JavaScript 2017

transform:rotateX(60deg);

/* rotateY div */
transform:rotateY(60deg);

/* rotateZ div */
transform:rotateZ(45deg);

/* skew div */
transform:skew(30deg,30deg);
}
</style>
</head>
<body>

<div>Hello</div>
<br>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>

<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer

versions of IE support the transform property (do not need the ms prefix).</p>

<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform

property.</p>

</body>
</html>

Transition Properties: 5
transition, transition-property, transition-duration, transition-timing-function, transition-delay
Transition_91.html
<!- -
The transition-property property specifies the name of the CSS property the transition effect is for (the
transition effect will start when the specified CSS property changes).
Tip: A transition effect could typically occur when a user hover over an element.
Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition
will have no effect.
Syntax:
transition-property: none|all|property|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>

www.activenetinformatics.com 9848111288 Page 118

ActiveNET HTML, CSS, JavaScript 2017

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition-property: width, height; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: width, height;
transition-duration: 2s;
}

div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>
Basic UI Properties: 16
box-sizing, content, cursor, ime-mode, nav-down, nav-index, nav-left, nav-right, nav-up, outline, outline-
color, outline-offset, outline-style, outline-width, resize, text-overflow
BoxSizing_92.html
<!- -
The box-sizing property is used to tell the browser what the sizing properties (width and height) should
include.
Should they include the border-box? Or just the content-box (which is the default value of the width and
height properties)?
Syntax:
box-sizing: content-box|border-box|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;

www.activenetinformatics.com 9848111288 Page 119

ActiveNET HTML, CSS, JavaScript 2017

border: 1px solid blue;

box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>

<h2>With box-sizing</h2>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>

</body>
</html>

Content_93.html
<!- -
The content property is used with the :before and :after pseudo-elements, to insert generated content.
Syntax:
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-
quote|no-close-quote|url|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
a:after {
content: " (" attr(href) ")";
}
</style>
</head>
<body>

<p><a href="https://www.activenetinformatics.com">ActiveNET</a> contains free tutorials and

references.</p>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

www.activenetinformatics.com 9848111288 Page 120

ActiveNET HTML, CSS, JavaScript 2017

Outline_95.html
<!- -
The CSS outline properties specify the style, color, and width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand
out".
However, the outline property is different from the border property - The outline is NOT a part of an
element's dimensions; the element's total width and height is not affected by the width of the outline.
The outline-style property specifies the style of the outline.

www.activenetinformatics.com 9848111288 Page 121

ActiveNET HTML, CSS, JavaScript 2017

The outline-style property can have one of the following values:

• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline. The effect depends on the outline-color value
• ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
• inset - Defines a 3D inset outline. The effect depends on the outline-color value
• outset - Defines a 3D outset outline. The effect depends on the outline-color value
• none - Defines no outline
• hidden - Defines a hidden outline
-->
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid black;
outline-color:red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.

</body>

www.activenetinformatics.com 9848111288 Page 122

ActiveNET HTML, CSS, JavaScript 2017

</html>

Resize_96.html
<!- -
The resize property specifies whether or not an element is resizable by the user.
Note: The resize property applies to elements whose computed overflow value is something other than
"visible".
resize: none|both|horizontal|vertical|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

<div>Let the user resize both the height and the width of this div element.</div>

</body>
</html>

Text_Overflow_97.html
<!- -
The text-overflow property specifies how overflowed content that is not displayed should be signaled to
the user.
text-overflow: clip|ellipsis|string|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;

www.activenetinformatics.com 9848111288 Page 123

ActiveNET HTML, CSS, JavaScript 2017

text-overflow: clip;
border: 1px solid #000000;
}

#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}

</style>
</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is
clipped.</p>

<p>This div uses "text-overflow:clip":</p>

<p>This div uses "text-overflow:ellipsis":</p>

</body>
</html>

Multi Column Layout Properties: 14

break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-
rule-color, column-rule-style, column-rule-width, column-span, column-width, columns, Windows
Column_count_98.html
<!- -
The column-count property specifies the number of columns an element should be divided into.
column-count: number|auto|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

www.activenetinformatics.com 9848111288 Page 124

ActiveNET HTML, CSS, JavaScript 2017

</style>
</head>
<body>

<p><strong>Note:</strong> The column-count property is not supported in Internet Explorer 9 and

earlier versions.</p>

<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 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. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt
saepius.
</div>

</body>
</html>
Column_fill_99.html
<!- -
The column-fill property specifies how to fill columns, balanced or not.
column-fill: balance|auto|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper1 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
.newspaper2 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-fill: balance; /* Chrome, Safari, Opera */
-moz-column-fill: balance; /* Firefox */
column-fill: balance;
}
</style>

www.activenetinformatics.com 9848111288 Page 125

ActiveNET HTML, CSS, JavaScript 2017

</head>
<body>

<div class="newspaper1">
column-fill: auto: 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 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.
</div>
<br><br>

<div class="newspaper2">
column-fill: balance: 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 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.
</div>

</body>
</html>
Column_gap_100.html
<!- -
The column-gap property specifies the gap between the columns.
column-gap: length|normal|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
</style>
</head>
<body>
Place div with id newspaper
</body>

www.activenetinformatics.com 9848111288 Page 126

ActiveNET HTML, CSS, JavaScript 2017

</html>
Column_rule_101.html
<!- -
The column-rule property is a shorthand property for setting all the column-rule-* properties.
The column-rule property sets the width, style, and color of the rule between columns.
column-rule: column-rule-width column-rule-style column-rule-
color|initial|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;

-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */

-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}
</style>
</head>
<body>
</body>
</html>
Column_rule_style_102.html
<!- -
The column-rule-style property specifies the style of the rule between columns.
column-rule-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initi
al|inherit;
-->
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;

www.activenetinformatics.com 9848111288 Page 127

ActiveNET HTML, CSS, JavaScript 2017

-webkit-column-gap: 40px;
-webkit-column-rule-style: dotted;

/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: dotted;

column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
}
</style>
</head>
<body>
</body>
</html>
Paged Media Properties: 4
Orphans, page-break-after, page-break-before, page-break-inside
Generated Content for Paged Media Properties: 2
marks, quotes
Filter Effects Properties: 1
filter
Filter_103.html
<!- -
The filter property defines visual effects (like blur and saturation) to an element (often <img>).
filter: none | blur() | brightness() | contrast() | drop-shadow() |
grayscale() | hue-rotate() | invert() | opacity() | saturate() |
sepia() | url();
-->
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
</style>
</head>
<body>

<p>Convert the image to grayscale:</p>

www.activenetinformatics.com 9848111288 Page 128

ActiveNET HTML, CSS, JavaScript 2017

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari
5.1 and earlier.</p>

</body>
</html>

Image Values and Replaced Content: 5

image-orientation, image-rendering, image-resolution, object-fit, object-position

Masking Properties: 2
mask, mask-type

Speech Properties: 14
Mark, mark-after, mark-before, Phonemes, rest, rest-after, rest-before, voice-balance, voice-duration,
voice-pitch, voice-pitch-range, voice-rate, voice-stress, voice-volume
Marquee Properties: 4
marquee-direction, marquee-play-count, marquee-speed, marquee-style

www.activenetinformatics.com 9848111288 Page 129

Web Programming
No ratings yet
Web Programming
178 pages
HTML, Javascript and Css
No ratings yet
HTML, Javascript and Css
52 pages
Web-Module I
No ratings yet
Web-Module I
35 pages
Enhanced L03-HTML CSS
No ratings yet
Enhanced L03-HTML CSS
62 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
22 pages
HTML, Css & Js Guest
No ratings yet
HTML, Css & Js Guest
219 pages
Overview of HTML: History and Versions
No ratings yet
Overview of HTML: History and Versions
19 pages
Webbca
No ratings yet
Webbca
47 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
HTML Noter
No ratings yet
HTML Noter
60 pages
Vikram Singh: An Introduction To Web Technologies
No ratings yet
Vikram Singh: An Introduction To Web Technologies
38 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
Web Technology1
No ratings yet
Web Technology1
37 pages
Web Technology
No ratings yet
Web Technology
37 pages
HTML and CSS Depth
No ratings yet
HTML and CSS Depth
23 pages
Unit 1 (WDT)
No ratings yet
Unit 1 (WDT)
44 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
HTML Forms
No ratings yet
HTML Forms
87 pages
HTML Basics for Web Developers
No ratings yet
HTML Basics for Web Developers
3 pages
Chapter 2 (Web Design and Programming)
No ratings yet
Chapter 2 (Web Design and Programming)
74 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
Unit 1 HTML
No ratings yet
Unit 1 HTML
201 pages
WT 3
No ratings yet
WT 3
51 pages
Training Course
No ratings yet
Training Course
51 pages
HTML
No ratings yet
HTML
33 pages
NIELIT O Level HTML Project Guide
No ratings yet
NIELIT O Level HTML Project Guide
35 pages
What Is HTML
No ratings yet
What Is HTML
5 pages
HTML Basics: Structure and Tags Guide
0% (1)
HTML Basics: Structure and Tags Guide
35 pages
Web Development Fundamentals
No ratings yet
Web Development Fundamentals
304 pages
UNIT-II Introduction - HTML
100% (1)
UNIT-II Introduction - HTML
53 pages
Session 3
No ratings yet
Session 3
60 pages
18CS63 Mod-1
No ratings yet
18CS63 Mod-1
33 pages
Chapter Three Part I
No ratings yet
Chapter Three Part I
35 pages
HTML5 Ibm
No ratings yet
HTML5 Ibm
22 pages
1
No ratings yet
1
61 pages
WD Chap3
No ratings yet
WD Chap3
20 pages
Chapter Three Part I and Part II
No ratings yet
Chapter Three Part I and Part II
49 pages
HTML
No ratings yet
HTML
69 pages
Understanding HTML in Web 3.0
No ratings yet
Understanding HTML in Web 3.0
284 pages
Prelim Reviewer ITEC87
No ratings yet
Prelim Reviewer ITEC87
5 pages
Hyper Text Markup Language
No ratings yet
Hyper Text Markup Language
20 pages
1-Introduction To Web Programming
No ratings yet
1-Introduction To Web Programming
15 pages
DSD HTML Css
No ratings yet
DSD HTML Css
65 pages
HTML
No ratings yet
HTML
26 pages
Introduction To HTML
No ratings yet
Introduction To HTML
61 pages
Introduction to HTML Basics and History
No ratings yet
Introduction to HTML Basics and History
26 pages
Unit 5
No ratings yet
Unit 5
5 pages
Web
No ratings yet
Web
9 pages
HTML5
No ratings yet
HTML5
53 pages
HTML & Css
No ratings yet
HTML & Css
45 pages
HTLM Basics PTT
No ratings yet
HTLM Basics PTT
85 pages
Evolution of HTML: A Comprehensive Guide
No ratings yet
Evolution of HTML: A Comprehensive Guide
42 pages
Understanding HTML Structure and Tags
No ratings yet
Understanding HTML Structure and Tags
56 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
Class Viii - 2023-24-25-60 PDF
No ratings yet
Class Viii - 2023-24-25-60 PDF
36 pages
SQL
90% (10)
SQL
101 pages
SQL Interview Questions PDF
88% (43)
SQL Interview Questions PDF
48 pages
Core Java Complete Notes - J2se, Ocjp
94% (16)
Core Java Complete Notes - J2se, Ocjp
240 pages
SQL Commands Cheat Sheet
82% (11)
SQL Commands Cheat Sheet
1 page
Python Durga Notes
85% (65)
Python Durga Notes
367 pages
SQL - With Practice Exercises, Learn SQL Fast (PDFDrive) PDF
100% (3)
SQL - With Practice Exercises, Learn SQL Fast (PDFDrive) PDF
167 pages
System Design Interview Vol2
83% (6)
System Design Interview Vol2
427 pages
AshokIT Core Java
75% (4)
AshokIT Core Java
256 pages
Spring Boot and Microservices
100% (2)
Spring Boot and Microservices
67 pages
SQL PDF
100% (13)
SQL PDF
221 pages
Core Java Notes by Durga Sir
84% (25)
Core Java Notes by Durga Sir
850 pages
The Python Bible
97% (33)
The Python Bible
506 pages
Mysql 3rd Edition
100% (10)
Mysql 3rd Edition
646 pages
GitHub and Git: Free Guide by Dridi
100% (7)
GitHub and Git: Free Guide by Dridi
90 pages
Django by Durga
100% (2)
Django by Durga
199 pages
(Hunt, J.) A Beginners Guide To Python 3 Programming
96% (47)
(Hunt, J.) A Beginners Guide To Python 3 Programming
440 pages
SQL Notes by Vikas Kadakkal
89% (9)
SQL Notes by Vikas Kadakkal
88 pages
Learn React.js: Comprehensive Guide
90% (10)
Learn React.js: Comprehensive Guide
962 pages
Snowflake Notes
100% (10)
Snowflake Notes
67 pages
SQL For Beginners The Simplified Guide To Managing, Analyzing Data PDF
100% (3)
SQL For Beginners The Simplified Guide To Managing, Analyzing Data PDF
109 pages
Java Complete Notes
67% (3)
Java Complete Notes
125 pages
Let Us Python by Yashavant Kanetkar
89% (28)
Let Us Python by Yashavant Kanetkar
429 pages
Java Zero To Hero
100% (2)
Java Zero To Hero
124 pages
Linux Material
100% (3)
Linux Material
328 pages
Spring Boot and Microservices Overview
81% (31)
Spring Boot and Microservices Overview
572 pages
Data Structure and Algorithmic Thinking With Python Data Structure and Algorithmic Puzzles PDF
96% (23)
Data Structure and Algorithmic Thinking With Python Data Structure and Algorithmic Puzzles PDF
471 pages
SQL Notes
100% (2)
SQL Notes
793 pages
500+ Coding Projects With Source Code
73% (11)
500+ Coding Projects With Source Code
12 pages
Tricky SQL Interview Questions and Answers
100% (6)
Tricky SQL Interview Questions and Answers
18 pages
System Design Interview - An Insider's Guide
90% (10)
System Design Interview - An Insider's Guide
103 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
218 pages
5948imguf Bachelor of Computer Applications (ArtificialIntelligence) Syllabus 2025 28
No ratings yet
5948imguf Bachelor of Computer Applications (ArtificialIntelligence) Syllabus 2025 28
80 pages
Argumentative Essay
No ratings yet
Argumentative Essay
1 page
Larkiyon Ka School 24
No ratings yet
Larkiyon Ka School 24
26 pages
HTML Table and Form Practical Guide
No ratings yet
HTML Table and Form Practical Guide
43 pages
MWR-KIT Product Instructions 2020-07-16
No ratings yet
MWR-KIT Product Instructions 2020-07-16
292 pages
AI SEO Is Here - Are You Ready? ?
100% (1)
AI SEO Is Here - Are You Ready? ?
9 pages
Staff Scheduling Quick Reference - Employee
No ratings yet
Staff Scheduling Quick Reference - Employee
2 pages
Will, May, Might Interactive Worksheet Live Worksheets
No ratings yet
Will, May, Might Interactive Worksheet Live Worksheets
1 page
Badlon Magazine Media Kit 2024 A S
No ratings yet
Badlon Magazine Media Kit 2024 A S
28 pages
Synology Diskstation User'S Guide: Based On Firmware DSM 2.3-1139
No ratings yet
Synology Diskstation User'S Guide: Based On Firmware DSM 2.3-1139
163 pages
What Is Server?
No ratings yet
What Is Server?
3 pages
Generate Leads on Twitter Without DMs
No ratings yet
Generate Leads on Twitter Without DMs
6 pages
Camtasia 2023 VPAT
No ratings yet
Camtasia 2023 VPAT
31 pages
Best Practices For Implementing
100% (10)
Best Practices For Implementing
119 pages
Debayan Biswas: Physics & App Development Expertise
No ratings yet
Debayan Biswas: Physics & App Development Expertise
1 page
Resume: Shravya Aavula HR Recruiter
No ratings yet
Resume: Shravya Aavula HR Recruiter
3 pages
Primefaces: Themes (Skins) : For Live Training On JSF 2, Primefaces, or Other
No ratings yet
Primefaces: Themes (Skins) : For Live Training On JSF 2, Primefaces, or Other
23 pages
Kayako Support Suite User Manual PDF
No ratings yet
Kayako Support Suite User Manual PDF
517 pages
Roadmap Foundations: All Trimesters
No ratings yet
Roadmap Foundations: All Trimesters
1 page
Vijay Kumar M: Phone-+91 7842006240
No ratings yet
Vijay Kumar M: Phone-+91 7842006240
2 pages
Design and Construction of A Solar-Powered Automatic Irrigation System With IOT Support
No ratings yet
Design and Construction of A Solar-Powered Automatic Irrigation System With IOT Support
11 pages
External Qms User Manual: Kenya National Examinations Council
100% (1)
External Qms User Manual: Kenya National Examinations Council
10 pages
View Struc
No ratings yet
View Struc
2 pages
The Rise of PDF Malware
No ratings yet
The Rise of PDF Malware
21 pages
Teacher Choices in Action Student User Guide
No ratings yet
Teacher Choices in Action Student User Guide
6 pages
Algorithm Design for CS Students
No ratings yet
Algorithm Design for CS Students
21 pages
Resume For XML Testing
100% (2)
Resume For XML Testing
6 pages
Free Image Resources and Earning Sites
No ratings yet
Free Image Resources and Earning Sites
33 pages
SYNOPSIS Flower Shop
No ratings yet
SYNOPSIS Flower Shop
10 pages