History of the Web

Summary Websites Technologies Browsers

Try it out

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <span><img src="/img/logo-white.png" height="30px" width="30px"/></span> <b>History of the Web</b> </a> </div> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src='/img/logo-big.png'/> History of the Web </div> <div class="item"> <img src='/img/logos/html5.png'/> <br/> HTML5 </div> <div class="item"> <img src='/img/logos/css3.png'/> <br/> CSS3 </div> <div class="item"> <img src='/img/logos/javascript.png'/> <br/> JavaScript 1.8 </div> <div class="item"> <img src='/img/logos/jQuery.png'/> <br/> jQuery 2.2.2 </div> <div class="item"> <img src='/img/logos/bootstrap.png'/> <br/> Bootstrap 3.3.6 </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

HTML

VERSION

JavaScript

LIBRARIES

QUICK ADD

EXTERNAL

html, body { height: 100%; } body { margin-top: 50px; } .navbar-brand { padding: 10px 15px; } #myCarousel { height: 100%; } #myCarousel .item { text-align: center; padding: 25px 0px; font-weight: bold; } .carousel,.item,.active { height:100%; } .carousel-inner { height:100%; } img { margin: 0 auto; }

CSS

VERSION

Result

Technologies:

HTML
5

CSS
3

JavaScript

Tutorials

HTML5:

New Tags:

Tag	Description	Example	Result
<article>	Defines independent, self-contained content	`<article> <h3>Article</h3> </article>`	Article
<aside>	Defines content aside from the page content	`<aside> <h3>Aside</h3> </aside>`	Aside
<bdi>	Defines a part of text that might be formatted in a different direction from other text	`<ul> <li>User <bdi>bdi</bdi>: tag</li> </ul>`	User bdi: tag
<canvas>	Used to draw graphics, via scripting	-	-
<data>	Provide a machine-readable version of its own contents.	`<ul> <li><data value="1">Data 1</data></li> <li><data value="2">Data 2</data></li> <li><data value="3">Data 3</data></li> </ul>`	Data 1 Data 2 Data 3
<datalist>	To specify a list of pre-defined options for an <input> element	`<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> </datalist>`
<details>	To define additional details that the user can view or hide	`<details> <summary>Details</summary> <p>More details</p> </details>`	Details More details
<dialog>	To define a dialog box or window	`<dialog open>Dialog</dialog>`	Dialog
<embed>	To define a container for an external application or interactive content (a plug-in).	-	-
<figcaption>	Defines a caption for a <figure> element	`<figure> <figcaption>Figcaption</figcaption> </figure>`	Figcaption
<figure>	Defines self-contained content, like illustrations, diagrams, photos, code listings	`<figure> Figure </figure>`	Figure
<footer>	Defines a footer for the document or a section	`<footer> <p>Footer</p> </footer>`	Footer
<header>	Defines a header for the document or a section	`<header> <p>Header</p> </header>`	Header
<main>	Defines the main content of a document	`<main> <h3>Main</h3> <p>Main text</p> </main>`	Main Main text
<mark>	Defines marked or highlighted text	`<p>This is how you <mark>mark</mark> text</p>`	This is how you mark text
<menu>	To create a menu (only supported in Mozilla Firefox)	`<menu type="context" id="menu"> <menuitem label="Refresh" onclick="window.location.reload();"> </menuitem> </menu>`
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu (only supported in Mozilla Firefox)	`<menu type="context" id="menu"> <menuitem label="Refresh" onclick="window.location.reload();"> </menuitem> </menu>`
<meter>	Defines a scalar measurement within a known range (a gauge)	`<meter value="0.6">60%</meter>`	60%
<nav>	Defines navigation links in the document	`<nav> <a href="#">Nav 1</a> \| <a href="#">Nav 2</a> \| </nav>`	Nav 1 \| Nav 2 \|
<progress>	Defines the progress of a task	`<progress value="50" max="100"> </progress>`
<rp>	Defines what to show in browsers that do not support ruby annotations	`<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>`	漢 (ㄏㄢˋ)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)	`<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>`	漢 (ㄏㄢˋ)
<ruby>	Defines a ruby annotation (for East Asian typography)	`<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>`	漢 (ㄏㄢˋ)
<section>	Defines a section in the document	`<section> <h3>Section</h3> </section>`	Section
<summary>	Defines a visible heading for a <details> element	`<details> <summary>Details</summary> <p>More details</p> </details>`	Details More details
<time>	Defines a date/time	`<p>The time is <time>12:00</time></p>`	The time is 12:00
<wbr>	Defines a possible line-break	`<p>This is a veryveryveryveryvery<wbr>longwordthatwillbreakhere<wbr>every time</p>`	This is a veryveryveryveryverylongwordthatwillbreakhereevery time

HTML 4.0:

New Tags:

Tag	Description	Example	Result
<abbr>	To create an abbreviation	`The <abbr title="History of the Web">HOTW</abbr>`	The HOTW
<acronym>	To create an acronym	`The <acronym title="History of the Web">HOTW</acronym>`	The HOTW
<applet>	To insert an applet	-	-
<bdo>	To specify the direction of text display	`<bdo dir="rtl">bdo</bdo>`	bdo
<button>	To create a button	`<button type="button" onclick="alert('Hello world!')">Button</button>`
<del>	To specify deleted text	`<del>delete</del> <ins>insert</ins>`	~~delete~~ insert
<fieldset>	To create a fieldset	`<form> <fieldset> <legend>Fieldset:</legend> 1: <input type="text"><br/> 2: <input type="text"><br/> </fieldset> </form>`	Fieldset: 1: 2:
<frame>	To create a frame	-	-
<frameset>	To create a set of frames	-	-
<iframe>	To create a set of frames	`<iframe src="http://54.213.200.197/"></iframe>`
<ins>	To specify inserted text	`<del>delete</del> <ins>insert</ins>`	~~delete~~ insert
<label>	To create a label for an <input> element	`<form> <label for="example">Label</label> <input type="radio" name="example" id="example" value="example"> </form>`	Label
<legend>	To specify a legend in a fieldset	`<form> <fieldset> <legend>Fieldset:</legend> 1: <input type="text"><br/> 2: <input type="text"><br/> </fieldset> </form>`	Fieldset: 1: 2:
<noframes>	To specify a no frame section	-	-
<noscript>	To define alternative content for users that have disables scripts in their browser	`<noscript>Your browser does not support JavaScript!</noscript>`
<object>	To define an embedded object	-	-
<optgroup>	To group related options in a dropdown list	`<select> <optgroup label="Group 1"> <option value="volvo">1</option> </optgroup> <optgroup label="Group 2"> <option value="mercedes">2</option> </optgroup> </select>`
<param>	To transfer a parameter to an applet	-	-
<q>	To define a short quotation	`Here is a <q>quotation</q>`	Here is a quotation
<s>	To specify strikethrough text	`<s>strikethrough</s>`	~~strikethrough~~
<span>	To specify a section in a document	`<span>span</span>`	span

HTML 3.2:

New Tags:

Tag	Description	Example	Result
<basefont>	To change the default font size throughout the entire page	-	-
<big>	To make text bigger than the surrounding area	`<big>big</big>`	big
<center>	To centre text, images and other elements	`<center>center</center>`	center
<div>	To divide a page into logical sections	`<div>div</div>`	div
<font>	To change the size, face and colour of individual letters or words	`<font size="3" color="red">font</font>`	font
<script>	To create an in-line script	`<p id="script"></p> <script> document.getElementById("script").innerHTML = "script"; </script>`
<small>	To make text smaller than the surrounding text	`<small>small</small>`	small
<style>	To set up style information	-	-
<sub>	To create a subscript	`<sub>subscript</sub>`	_subscript
<sup>	To create a superscript	`<sup>superscript</sup>`	^superscript

HTML 2.0:

New Tags:

Tag Description Example Result

<area> To specify the coordinates of an image map <map name="planets"> <area shape="circle" coords="0,0,82,126" href="sun.htm" alt="Sun"> </map>

<b> To display text in boldface <b>bold</b> bold

To indicate that a block of text is a quotation

<blockquote>blockquote</blockquote>

blockquote

<body> To enclosed the main section of a web page - -

<br> To create a line break <br>

To create a caption for a table

<table>

          <caption>caption</caption>

          <tr>

            <th>TH1</th>

            <th>TH2</th>

          </tr>

          <tr>

            <td>TD1</td>

            <td>TD2</td>

          </tr>

        </table>

caption
TH1	TH2
TD1	TD2

<cite> To indicate that the text is a short citation <cite>cite</cite> cite

<code> To indicate text is a computer code <code>Code</code> Code

<col>

To create a column in a table

<table>

          <colgroup>

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

            <col style="background-color:yellow">

          </colgroup>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

To create a group of columns in a table

<table>

          <colgroup>

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

            <col style="background-color:yellow">

          </colgroup>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

<dfn> To represent the defining instance of a term This is a <dfn>dfn</dfn> This is a dfn

<em> To emphasize text, usually in italics <em>em</em> em

<form>

To create an input form

<form>

          Form: <input type="text" name="Form" value="Form"><br>

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

        </form>

<head> To create the head section of the web page - -

<hr>

To create a horizontal line

<hr>

<html> To identify the document as an HTML document - -

<i> To display text in italics <i>i</i> i

<img> To place an image on the web page <img src='/img/logo-standard.png' alt='img'/>

<input>

To create a form element such as an input field, button, etc.

<form>

          Form: <input type="text" name="Form" value="Form"><br>

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

        </form>

<kbd> To indicate text from a keyboard <kbd>kbd</kbd> kbd

<map> To create a client-side image map <map name="planets"> <area shape="circle" coords="0,0,82,126" alt="Sun"> </map>

<ol>

To create an ordered list

<ol>

          <li>1</li>

          <li>2</li>

          <li>3</li>

        </ol>

<option> To create individual options in a form menu <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

<pre>

To create preformatted text

<pre>Text remains    formatted

        in a pre tag</pre>

Text remains    formatted
        in a pre tag

<samp> To display sample text that should be used literally <samp>samp</samp> samp

<select> To create a menu in a form <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

<strong> To strongly emphasize text, usually in boldface <strong>strong</strong> strong

<strike> To display text with a line through it (same as <S>) <strike>strike</strike> ~~strike~~

<table>

To create a table

<table>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<td>

To create a regular cell in a table

<table>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<th>

To create a header cell in a table

<table>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

<tr>

To create a new row in a table

<table>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<tbody>

To create a table body

<table>

          <thead>

            <tr>

              <th>THEAD1</th>

              <th>THEAD2</th>

            </tr>

          </thead>

          <tfoot>

            <tr>

              <td>TFOOT1</td>

              <td>TFOOT2</td>

            </tr>

          </tfoot>

          <tbody>

            <tr>

              <td>TBODY1</td>

              <td>TBODY2</td>

            </tr>

          </tbody>

        </table>

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<tfoot>

To create a table footer

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<thead>

To create a table header

<table>

          <thead>

            <tr>

              <th>THEAD1</th>

              <th>THEAD2</th>

            </tr>

          </thead>

          <tfoot>

            <tr>

              <td>TFOOT1</td>

              <td>TFOOT2</td>

            </tr>

          </tfoot>

          <tbody>

            <tr>

              <td>TBODY1</td>

              <td>TBODY2</td>

            </tr>

          </tbody>

        </table>

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<textarea> To create a block area for text input in a form <textarea></textarea>

<tt> To display text in a monospaced teletype font <tt>tt</tt> tt

<var> To indicate that the text is a variable <var>var</var> var

<u> To place a line underneath text <u>u</u> u

Deprecated Tags:

Tag	Description	Example	Result
<listing>	To display preformatted text 132 characters	-	-
<plaintext>	To render everything following the start tag as raw text	-	-

HTML 1.0:

Tags:

Tag	Description	Example	Result
<a>	To create a link or anchor	`<a href='http://info.cern.ch'>info</a>`	info
<address>	To indicate address information	`<address> Newcastle upon Tyne,<br> Tyne and Wear<br> NE1 7RU </address>`	Newcastle upon Tyne, Tyne and Wear, NE1 7RU
<base>	To specify the URL of the document used to generate any relative URLs	-	-
<dd>	To indicate a definition description in a definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<dir>	To create a directory list	`<dir> <li>html</li> <li>css</li> </dir>`	html css
<dl>	To create a definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<dt>	To indicate a term to be defined in the definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<h1>	To create a level 1 header	`<h1>Header 1</h1>`	Header 1
<h2>	To create a level 2 header	`<h2>Header 2</h2>`	Header 2
<h3>	To create a level 3 header	`<h3>Header 3</h3>`	Header 3
<h4>	To create a level 4 header	`<h4>Header 4</h4>`	Header 4
<h5>	To create a level 5 header	`<h5>Header 5</h5>`	Header 5
<h6>	To create a level 6 header	`<h6>Header 6</h6>`	Header 6
<isindex>	To create a primitive search	-	-
<li>	To create a list item	`<ul> <li>li</li> </ul>`	li
<listing>	To display preformatted text 132 characters	-	-
<menu>	To create a menu item list	`<menu type="context" id="menu"> </menu>`
<p>	To create a new paragraph	`<p>p</p>`	p
<plaintext>	To render everything following the start tag as raw text	-	-
<title>	To create the document title	-	-
<ul>	To create an unordered list	`<ul> <li>li</li> </ul>`	li

CSS3:

New Properties:

Font Properties:

Property	Description	Example	Result
box-sizing	To specify the sizing property	`p { box-sizing: border-box; }`	box-sizing
border-spacing	To give any element rounded corners	`div { border-radius: 25px }`	border-radius
border-image	To specify an image to be used instead of the normal border	div { border-image: url(/img/background.gif) 30 round; }	border-image

Backgrounds:

Property	Description	Example	Result
background-size	To specify the size of background images	`div { background: url(/img/background.gif); background-size: 50px 40px; }`	background-size
background-origin	To specify where the background image is positioned	`div { background: url(/img/background.gif); background-origin: padding-box; padding: 25px; }`	background-origin
background-clip	To specify the painting area of the background	`div { background: url(/img/background.gif); background-clip: content-box; padding: 25px; }`	background-clip

Gradients:

Property	Description	Example	Result
linear-gradient	To specify the linear gradient	`div { background: linear-gradient(to right, red , yellow) }`	linear-gradient
radial-gradient	To specify the radial gradient	`div { background: radial-gradient(red, yellow, green) }`	radial-gradient

Shadow:

Property	Description	Example	Result
text-shadow	To apply shadow to text	`p { text-shadow: 2px 2px; }`	text-shadow
box-shadow	To apply shadow to elements	`div { box-spacing: 10px 10px; }`	box-shadow

Text:

Property	Description	Example	Result
text-overflow	To specify how overflowed content that is not displayed should be signaled to the user	`p { width: 15px; text-overflow: ellipsis; }`	text-overflow
word-wrap	To allow long words to be broken down	`p { width: 15px; word-wrap: break-word; }`	word-wrap
word-break	To specify line breaking rules	`p { width: 15px; word-break: keep-all }`	word-break

Font:

Property	Description	Example	Result
@font-face	To define a new font-face	`@font-face { font-family: myFont; }`	@font-face

2D Transforms:

Property	Description	Example	Result
transform()	To move an elements from its current position	`div { transform: translate(20px, 20px) }`	transform()
rotate()	To rotate an element clockwise or anti-clockwise	`div { transform: rotate(20deg) }`	rotate()
scale()	To increase or decrease the size of an element	`div { transform: scale(0.5, 0.5) }`	scale()
skewX()	To skew an element along the X-axis	`div { transform: skewX(20deg) }`	skewX()
skewY()	To skew an element along the Y-axis	`div { transform: skewY(20deg) }`	skewY()
skew()	To skew an element along the X-axis and Y-axis	`div { transform: skew(20deg, 10deg) }`	skew()
matrix()	To combine all the 2D tranform methods into one	`div { transform: matrix(1, -0.3, 0, 1, 0, 0) }`	matrix()

Transitions:

Property	Description	Example	Result
transition	To create a transition effect	`div { transition: width 2s; } div:hover { width: 300px; }`	transition
transition-timing-function	To specify the speed curve of the transition effect	`div { transition: width 2s; transition-timing-function: linear; } div:hover { width: 300px; }`	transition
transition-delay	To specify a delay (in seconds) for the transition effect	`div { transition: width 2s; transition-delay: 1s; }`	transition
transformation-duration	To specify how many seconds or milliseconds a transition takes to complete	`div { transition: width 2s; transition-duration: 3s; }`	transition

User Interface:

Property	Description	Example	Result
resize	To specify whether or not an element should be resizable by the user	`div { resize: both; overflow: auto; }`	transition
outline-offset	To add space between an outline and the edge of border of an element	`div { transition: width 2s; transition-timing-function: linear; } div:hover { width: 300px; }`	transition

CSS2.1:

New Properties:

Print Properties:

Property	Description	Example	Result
orphans	To specify the minimum number of lines to be displayed at the bottom of the page	`p { orphans: 3 }`	orphans
widows	To specify the number of lines to be displayed at the top of the page	`p { widows: 3 }`	widows

@ Properties:

Property	Description	Example	Result
@media	To specify how a document is to be presented on different media: screen, print etc	`@media print { /* style sheet for print goes here */ }`
@import	To import style rules from other style sheets	`@media print { /* style sheet for print goes here */ }`

Selectors:

Property	Description	Example
*	To match with any element	`* { color: #fff }`
x > y	To select any y element that is a child of an x element	`li > ul { list-style-type: none }`
x + y	To select any y element that immediately follows an x element	`p + p { font-size: smaller }`

Pseudo:

Property	Description	Example
x:first-child	To select every x that is the first child of its parent	`p:first-child { background-color: blue }`
x:link	To select unvisited links	`a:link { color: blue }`
x:visited	To select visited links	`a:visited { color: blue }`
x:hover	To style when mouse over element	`a:hover { color: #FF00FF }`
x:active	To select selected links	`a:active { color: #0000FF }`
x:focus	To style when field is focused	`input:focus { background-color: yellow }`
x:lang(y)	To select the x element that uses the language y	`p:lang(en) { font-weight: bold }`
x:before	To place generated content before an element used with the content property	`#test:before { content: "before" }`
x:after	To place genereated content after an element used with the content property	`#test:after { content: "after" }`
x:first-line	To select the first line of text in the x element	`h2+p:first-line { color: red }`
x:first-letter	To select the first letter in the x element	`h1:first-letter { text-transform: lowercase }`

CSS2:

New Properties:

Font Properties:

Property	Description	Example	Result
font-size-adjust	To adjust the size of a font	`p { font-size-adjust: 0.2 }`	font-size-adjust
font-stretch	To specify the stretch of a font	`p { font-stretch: wider }`	font-stretch
text-shadow	To specify the shadow of text	`p { text-shadow: 1px 1px #4285F4 }`	text-shadow

Visual Effects:

Property	Description	Example	Result
outline	To specify the outline of an element	`p { outline: #4285F4 dotted thick }`	outline
overflow	To specify the overflow property of an element	`p { overflow: hidden; height: 20px; }`	overflow
visibility	To specify the visibility of an element	`div { visibility: hidden }`	visibility

Visual Formatting:

Property	Description	Example	Result
direction	To specify the direction of text	`p { direction: rtl }`	direction
max-height	To specify the max-height of an element	`p { max-height: 5px }`	max-height
min-height	To specify the min-height of an element	`p { min-height: 50px }`	min-height
max-width	To specify the max-width of an element	`p { max-width: 20px }`	max-width
min-width	To specify the min-width of an element	`p { min-width: 20px }`	min-width
position	To specify the position of text	`p { position: absolute; }`	position
unicode-bidi	To override text	`p { direction: rtl; unicode-bidi: bidi-override; }`	unicode-bidi
z-index	To specify the stack order of an element	`img { position: absolute; z-index: 0; }`	z-index

Tables:

Property Description Example Result

border-collapse

To specify whether the table borders are collapsed into a single border or detached

table { border-collapse: collapse; }
 table, td { border 1px solid #333 }

border

collapse

border-spacing

To specify the spacing between the borders

table { border-collapse: separate; border-spacing: 10px; }
 table, td { border 1px solid #333 }

border

spacing

caption-side

To specify the placement of the table caption

caption { caption-side: bottom; }

caption
caption	side

empty-cells

To specify whether or not to display borders or background on empty cells in a table

table { border-collapse: separate; empty-cells: hide; }

empty	cells
empty

CSS1:

Properties:

Font Properties:

Property	Description	Example	Result
font-family	To assign a font	`p { font-family: "Times New Roman", Times, serif }`	font-family
font-style	To define how the font is displayed	`p { font-style: italic }`	font-style
font-variant	To determine if the font is in normal or small-caps	`p { font-variant: small-caps }`	font-variant
font-weight	To specify the weight of the font	`p { font-weight: 800 }`	font-weight
font-size	To specify the size of the font	`p { font-size: large }`	font-size

Color & Background:

Property	Description	Example	Result
color	To specify the color of an element	`p { color: blue }`	color
background-color	To set the background color of an element	`p { background-color: #FFF }`	background-color
background-image	To specify the background image of an element	`p { background-image: url('/img/background.png') }`	background-image
background-repeat	To determine how a specified background image is repeated	`p { background-image: url('/img/background.png'); background-repeat: repeat-y; }`	background-repeat

Box Properties:

Property	Description	Example	Result
word-spacing	To define an additional amount of space between words	`p { word-spacing: 0.4em }`	word - spacing
letter-spacing	To define an additional amount of space between characters	`p { letter-spacing: 0.1em }`	letter-spacing
text-decoration	To specify the decoration for text	`p { text-decoration: underline }`	text-decoration
vertical-align	To alter the vertical positioning of an element	`p { vertical-align: top }`	vertical-align
text-transform	To specify the transformation of text	`p { text-transform: uppercase }`	text-transformation
text-align	To specify alignment of text	`p { text-align: center }`	text-align
text-indent	To specify the indentation of text	`p { text-indent: 5em }`	text-indent
line-height	To control the spacing between baselines of text	`p { line-height: 200% }`	line-height

Border/Margin/Padding Properties:

Property	Description	Example	Result
margin-top	To specify the top margin	`p { margin-top: 5px }`	margin-top
margin-bottom	To specify the bottom margin	`p { margin-bottom: 5px }`	margin-bottom
margin-left	To specify the left margin	`p { margin-left: 5px }`	margin-left
margin-right	To specify the right margin	`p { margin-right: 5px }`	margin-right
margin	To specify the margin	`p { margin: 5px }`	margin
padding-top	To specify the top padding	`p { padding-top: 5px }`	padding-top
padding-bottom	To specify the bottom padding	`p { padding-bottom: 5px }`	padding-bottom
padding-left	To specify the left padding	`p { padding-left: 5px }`	padding-left
padding-left	To specify the right padding	`p { padding-right: 5px }`	padding-right
padding	To specify the padding	`p { padding: 5px }`	padding
border-top	To specify the top border	`p { border-top: 1px solid #333 }`	border-top
border-bottom	To specify the bottom border	`p { border-bottom: 1px solid #333 }`	border-bottom
border-left	To specify the left border	`p { border-left: 1px solid #333 }`	border-left
border-right	To specify the right border	`p { border-right: 1px solid #333 }`	border-right
border	To specify the border	`p { border: 1px solid #333 }`	border
width	To specify the width	`p { width: 100% }`	width
height	To specify the height	`p { height: 50% }`	height
float	To wrap text around an element	`p { float: right }`	float
clear	To specify if an element allows floating elements to its sides	`p { clear: right }`	clear

Property	Description	Example	Result
display	To define the display of an element	`p { display: none }`	display
white-space	To determine how spaces within the element are treated	`p { white-space: pre }`	white-space
list-style-type	To specify the type of list-item marker	`ul { list-style-type: none }`	list style type
list-style-image	To specify the image of list-item marker	`ul { list-style-image: url('/img/list-image.png') }`	list style type

Tutorials:

HTML:

Basic Tutorial:

HTML is the markup of a web page.

Below is a basic example of what you can do with HTML. It shows you what is required to build a basic page. The HTML text editor on the other tab automatically includes the DOCTYPE, html, head and body.

Example

  
    <!DOCTYPE html>

    <html>

    <head>

    <title>Page Title</title>

    </head>

    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph</p>

    </body>

    </html>

Result

Other Resources:

CSS:

Basic Tutorial:

CSS controls the styling of a web page.

Below is a basic example of what you can do with CSS.

Example

  
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {

      background-color: #d0e4fe;

    }

    h1 {

      color: red;

      text-align: center;

    }

    p {

      font-family: "Verdana";

      font-size: 30px;

    }

    </style>

    </head>

    <body>

    <h1>CSS Example</h1>

    <p>This is a paragraph</p>

    </body>

    </html>

Result

Other Resources:

JavaScript:

Basic Tutorial:

JavaScript controls the behaviour of a web page.

Below is a basic example of what you can do with JavaScript. It finds the HTML element with an id="change" and changes the content to "This is a JavaScript example".

Example

  
    <!DOCTYPE html>

    <html>

    <body>

    <h1>JavaScript Example</h1>

    <p id="example"></p>

    <button type="button"

    onclick="document.getElementById("example").innerHTML = 'This is a JavaScript example'";>

    Click Me!</button>

    </body>

    </html>

Result

Other Resources:

jQuery:

Basic Tutorial:

jQuery is a JavaScript library that simplifies JavaScript programming.

Below is a basic example of what you can do with jQuery. It finds hides a <p> element when you click it.

Example

  
    <!DOCTYPE html>

    <html>

    <head>

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

    <script>

    $(document).ready(function(){

      $("p").click(function(){

        $(this).hide();

      });

      });

    </script>

    <body>

    <p>If you click me, I will disappear</p>

    <p>Click me away!</p>

    <p>Click me too!</p>

    </body>

    </html>

Result

Other Resources:

Bootstrap:

Basic Tutorial:

Bootstrap is a HTML, CSS & JavaScript framework for developing responsive, mobile first websites.

Below is a basic example of what you can do with Bootstrap. It finds the HTML element with an id="change" and changes the content to "This is a JavaScript example".

Example

  
    <!DOCTYPE html>

    <html>

    <head>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

      <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="container">

      <div class="jumbotron">

        <h1>Bootstrap Page</h1>

    </div>

    <div class="row">

      <div class="col-sm-4">

        <h3>Column 1</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

      </div>

      <div class="col-sm-4">

        <h3>Column 2</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

      </div>

      <div class="col-sm-4">

        <h3>Column 3</h3>
   
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

      </div>

      </div>

    </div>

    </body>

    </html>

Result

Other Resources:

Brian Griffin

Brian Griffin from Family Guy created in Pure CSS.

Source

View Code

Chill The Lion

A lion and a fan.

Source

View Code

Default

This is the default example for the 2010 - 2014 stage in the timeline.

View Code

Follow The Mouse

Canvas that follows your mouse movements.

Source

View Code

Human Clock

View Code

2010 - 2014

HTML5:

New Tags:

Article

Main

Section

HTML 4.0:

New Tags:

HTML 3.2:

New Tags:

HTML 2.0:

New Tags:

Deprecated Tags:

HTML 1.0:

Tags:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

CSS3:

New Properties:

Font Properties:

Backgrounds:

Gradients:

Shadow:

Text:

Font:

2D Transforms:

Transitions:

User Interface:

CSS2.1:

New Properties:

Print Properties:

@ Properties:

Selectors:

Pseudo:

CSS2:

New Properties:

Font Properties:

Visual Effects:

Visual Formatting:

Tables:

CSS1:

Properties:

Font Properties:

Color & Background:

Box Properties:

Border/Margin/Padding Properties:

Tutorials:

HTML:

Basic Tutorial:

Example

Result

Other Resources:

CSS:

Basic Tutorial:

Example

Result

Other Resources:

JavaScript:

Basic Tutorial:

Example

Result

Other Resources:

jQuery:

Basic Tutorial:

Example

Result

Other Resources:

Bootstrap:

Basic Tutorial:

Example

Result

Other Resources:

Brian Griffin

Chill The Lion

Default

Follow The Mouse