HTML and CSS introduction

structure and presentation layers of WWW documents

Tomasz Ścisło (scislot@gmail.com)

tscislo.rootnode.net

Warsaw, 28.02.2011

Traning agenda

Software needed for exercises...

Good luck :)

WWW documents consists of three layers

The basic HTML 4.01 document in UTF-8

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

DTD - Document Type Definition

Structure layer history

Where can I find detiled information about all
W3C standards?

What is an HTML element?
HTML element syntax.

Three main ways that the HTML
elements can be displayed

Commonly used HTML not empty elements (1)

Commonly used HTML empty elements (2)

Table example

11 12
21 22 23
31 32 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="10">
    <tr>
        <td>11</td>
        <td colspan="2">12</td>
    </tr>
    <tr>
        <td rowspan="2">21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
    </tr>
</table>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

HTML list element

  1. text
    • 1.a
    • 1.b
    • 1.c
  2. text
    • 2.a
    • 3.b
    • text
      • text1
      • text2
      • text3
    • text 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
    <ol>
        <li>
            text
            <ul>
                <li>1.a</li>
                <li>1.b</li>
                <li>1.c</li>
            </ul>
        </li>
        <li>
            text
            <ul>
                <li>2.a</li>
                <li>3.b</li>
                <li>
                    text
                    <ul>
                        <li>text1</li>
                        <li>text2</li>
                        <li>text3</li>
                    </ul>
                </li>
                <li>
                    text
                </li>
            </ul>
        </li>
    </ol>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

HTML elements display example

Armed Egyptian police have been ordered to protect churches where Copts are expected to gather in large numbers. There have been calls for Muslims to hold vigils outside Coptic churches in a gesture of solidarity. But some radical Islamist websites have urged more attacks, publishing church addresses in Egypt and Europe. The bombing of the church in Alexandria on New Year's Day was the worst act of sectarian violence in Egypt in a decade.

Copts celebrate Christmas on 7 January, according to the Julian calendar. Some European governments have also announced security measures at churches. The BBC's Jon Leyne in Cairo says suspicion and fear between Christians and Muslims has been growing in Egypt for some time, made worse by tough economic conditions and a discredited political system. It was during Coptic Christmas Eve celebrations in southern Egypt in 2009 that six Christians and a Muslim security guard were killed in a drive-by shooting. 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<p>Armed Egyptian police have been ordered to protect churches where
Copts are expected to gather in large numbers. <em>There have been calls for
Muslims to hold vigils outside Coptic churches</em> in a gesture of
solidarity. <strong>But some radical Islamist websites have
urged more attacks,</strong> publishing church addresses in Egypt and Europe. The
bombing of the church in <a href="http://www.onet.pl">Alexandria on
New Year's Day</a> was the worst act of sectarian violence in Egypt in a
decade.</p>
<p>Copts celebrate Christmas on 7 January, according to the Julian
calendar. Some European governments have also announced security
measures at churches. <img src="./images/1.jpg">The BBC's Jon
Leyne in Cairo says suspicion and fear between Christians and Muslims
has been growing in Egypt for some time, made worse by tough economic
conditions and a discredited political system. It was during Coptic
Christmas Eve celebrations in southern Egypt in 2009 that six Christians
and a Muslim security guard were killed in a drive-by shooting.</p>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

HTML structure inspecting in Firefox browser (1)

HTML structure inspecting in Firefox browser (2)

HTML Exercise 1

Yemen protests: Thousands call on president to leave

Thousands of Yemenis are demonstrating in the capital Sanaa, calling on Ali Abdullah Saleh, president for more than 30 years, to step down.

Author: http://bbc.co.uk

Egypt braces for further day of protests

Authorities in Egypt are bracing for the possibility of further protests, following two days of unrest that have left at least four people dead.

Author: http://bbc.co.uk

  1. Uganda gay rights activist killed
    • Egypt braces for further protests
    • Yemenis rally against presdient
  2. The piece of paper that proved Hitler was fooled
  3. Afghan pledge on Taliban stoning
    • Why smash up a brand new spy plane?
    • Kenyan 'cursed' with six sets of twins

HTML Exercise 1 solution

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BBC</title>
    </head>
    <body>
        <p><strong>Yemen protests: Thousands call on president to leave</strong></p>
        <p>Thousands of Yemenis are demonstrating in the capital Sanaa, calling on Ali Abdullah Saleh, president for more than 30 years, to step down.</p>
        <p><em>Author: <a href="http://bbc.co.uk">http://bbc.co.uk</a></em></p>
        <img src="./images/yemen.jpg"><p><strong>Egypt braces for further day of protests</strong></p>
        <p>Authorities in Egypt are bracing for the possibility of further protests, following two days of unrest that have left at least four people dead.</p>
        <p><em>Author: <a href="http://bbc.co.uk">http://bbc.co.uk</a></em></p>
        <ol>
            <li>
                Uganda gay rights activist killed
                <ul>
                    <li>
                        Egypt braces for further protests
                    </li>
                    <li>
                        Yemenis rally against presdient
                    </li>
                </ul>
            </li>
            <li>
                The piece of paper that proved Hitler was fooled
            </li>
            <li>
                Afghan pledge on Taliban stoning 
                <ul>
                    <li>
                        Why smash up a brand new spy plane?
                    </li>
                    <li>
                        Kenyan 'cursed' with six sets of twins
                    </li>
                </ul>
            </li>
        </ol>
    </body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

HTML Exercise 2

Yemen protests: Thousands call on president to leave

Thousands of Yemenis are demonstrating in the capital Sanaa, calling on Ali Abdullah Saleh, president for more than 30 years, to step down.

BBC
  1. Egypt braces for further protests
    • Kenyan 'cursed' with six sets of twins
    • Why smash up a brand new spy plane?
    • The piece of paper that proved Hitler was fooled
  2. Uganda gay rights activist killed
Egypt braces for further day of protests
  • The piece of paper that proved Hitler was fooled
  • Kenyan 'cursed' with six sets of twins
  • The piece of paper that proved Hitler was fooled
  • CNN
Uganda gay rights activist David Kato killed

A Ugandan gay rights campaigner who last year sued a local newspaper which named him as being homosexual has been beaten to death, activists say.

Police have confirmed the death of David Kato but say they are investigating the circumstances.

HTML Exercise 2 solution

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BBC</title>
    </head>
    <body>
        <table border="1" cellpadding="10">
            <tr>
                <td>
                    <img src="./images/yemen.jpg" height="150">
                </td>
                <td rowspan="3">
                    <strong>Yemen protests: Thousands call on president to leave</strong>
                    <p>Thousands of Yemenis are demonstrating in the capital Sanaa, calling on Ali Abdullah Saleh, president for more than 30 years, to step down.</p>
                    <em><a href="http://bbc.co.uk">BBC</a></em>
                    <ol>
                        <li>Egypt braces for further protests
                            <ul>
                                <li>Kenyan 'cursed' with six sets of twins</li>
                                <li>Why smash up a brand new spy plane?</li>
                                <li>The piece of paper that proved Hitler was fooled</li>
                            </ul>
                        </li>
                        <li>Uganda gay rights activist killed</li>
                    </ol>
                </td>
                <td>
                    <img src="./images/yemen.jpg" height="150">
                </td>
                <td>
                    <strong>Egypt braces for further day of protests</strong>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <ul>
                        <li>The piece of paper that proved Hitler was fooled</li>
                        <li>Kenyan 'cursed' with six sets of twins</li>
                        <li>The piece of paper that proved Hitler was fooled</li>
                        <li><a href="http://cnn.com">CNN</a></li>
                    </ul>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="./images/yemen.jpg" height="150">
                </td>
                <td colspan="2">
                    <strong>Uganda gay rights activist David Kato killed</strong>
                    <p>A Ugandan gay rights campaigner who last year sued a local newspaper which named him as being homosexual has been beaten to death, activists say.</p>
                    <p>Police have confirmed the death of David Kato but say they are investigating the circumstances.</p>
                </td>
            </tr>
        </table>
    </body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

CSS - presentation layer of WWW document

The simplest way to add CSS style
to HTML element. So called inline style.

Some text 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
    <span style="font-size: 13px; font-family: Verdana; color: #FF0000; border: 2px #FFAAFF solid;margin:30px;">Some text</span>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

CSS the right way to add styles

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<title>Title</title>
</head>
<body>
</body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

CSS 2.1 selectors

Pattern Meaning
* Matches any element.
E Matches any E element (i.e., an element of type E).
E F Matches any F element that is a descendant of an E element.
E > F Matches any F element that is a child of an element E.
E:link
E:visited 		Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active
E:hover
E:focus 		Matches E during certain user actions.
E + F Matches any F element immediately preceded by a sibling element E.
E[foo] Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
E.warning Language specific. (In HTML, the same as E[class="warning"].)
E#myid Matches any E element with ID equal to "myid". (In HTML, the same as E[id="myid"])

Selectors priority

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
 
@CHARSET "UTF-8";

#myDiv > .mySpan
{
    border: #FF0000 dotted;
}

span
{
    border: 2px #000000 solid;
}

#myDiv .mySpan
{
    border: 2px #FF0000 solid;
}

.mySpan
{
    border: 2px #FFAAFF solid;
}
View Plain
Copy to Clipboard
Print
D.r™

CSS debugging is easy using Fire Bug.

Commonly used CSS properties for text formatting

CSS 2.1 property Meaning Example
font-family The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. font-family:Verdana
font-size Defines font size in px or pt. font-size:15px
font-weight The font-weight property sets how thick or thin characters in text should be displayed. font-weight:bold
font-weight:100
text-decoration The text-decoration property specifies the decoration added to text. text-decoration:underline
text-decoration:overline
text-indent The text-indent property specifies the indentation of the first line in a text-block. text-indent:10px;
color The color property specifies the color of text. Color is given in hex or in rgb format. color:#FF0000
color: rgb(255, 255, 255)

CSS Exercise 1

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
        <title>Title</title>
    </head>
    <body>
        <div id="bxBabelki" class="bx bxBabelki">
            <div class="head sub" id="ngPoleca">
                <div class="active" id="ngPolecaAct">
                </div>
                <h2>WP poleca</h2>
            </div>
            <div id="dnPoleca">
                <div id="dnPolecaCnt">
                    <div class="bgB">
                        <div class="cnt">
                            <div class="dotted">
                                <a href="http://kultura.wp.pl/title,Trojanie-w-Teatrze-Wielkim,wid,12987278,patronat.html" title="Futurystyczni Trojanie w Operze Narodowej - zobacz"><img src="i/ivar/W/201012/231898.jpg" alt="Futurystyczni Trojanie w Operze Narodowej - zobacz" /></a><h3 class="pb"><a href="http://kultura.wp.pl/title,Trojanie-w-Teatrze-Wielkim,wid,12987278,patronat.html" title="Futurystyczni Trojanie w Operze Narodowej - zobacz">Futurystyczni Trojanie w Operze Narodowej - zobacz</a></h3>
                            </div>
                            <h4><a href="http://konkursy.wp.pl">Konkurs</a></h4>
                            <ul class="dotted">
                                <li>
                                    <a href="http://konkursy.wp.pl/nid,14521,konkurs.html">Ucz się z nami i wygrywaj!</a>
                                </li>
                            </ul>
                            <ul class="bgB">
                                <li>
                                    <a href="http://sport.wp.pl/kat,116154,title,Puchar-Swiata-w-Skokach-Narciarskich-2011-w-Zakopanem-juz-w-styczniu,wid,12986676,wiadomosc.html?src01=4377d"><span>Puchar Świata w Skokach </span>Narciarskie święto kibiców</a>
                                </li>
                                <li>
                                    <a href="http://sport.wp.pl/kat,116154,title,Pierwsze-zawody-Lotos-Cup-2011,wid,13001320,skoki_wiadomosc.html?src01=4377d"><span>Szukamy następców Mistrza</span> Wystartowały zawody</a>
                                </li>
                                <li>
                                    <a href="http://sport.wp.pl/kat,116154,title,Juz-w-styczniu-gala-KSW-Extra,wid,12947515,wiadomosc.html?src01=4377d"><span>KSW  Extra  już  w  styczniu</span> realne walki MMA</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
View Plain
Copy to Clipboard
Print
D.r™

CSS Exercise 1

CSS Exercise 1 solution

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
 
@CHARSET "UTF-8";

#bxBabelki #ngPoleca h2
{
    color: #FFAAFF;
}

#dnPoleca #dnPolecaCnt .bgB .cnt .dotted li a
{
    font-family: Verdana;
    font-size: 20px;
}

#dnPoleca #dnPolecaCnt .bgB .cnt .bgB li a
{
    font-family: Arial;
    font-weight: bold;
}

#dnPoleca #dnPolecaCnt .bgB .cnt h4 a
{
    text-decoration: none;
}
View Plain
Copy to Clipboard
Print
D.r™

CSS Box model

CSS Box model properties

CSS Box model example

1.
2.
3.
4.
5.
6.
7.
8.
9.
 
        <ul>
            <li>
                First element of list
            </li>
            <li class="withborder">
                Second element of list is
                a bit longer to illustrate wrapping.
            </li>
        </ul>
View Plain
Copy to Clipboard
Print
D.r™ 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
 
@CHARSET "UTF-8";
UL
{
    background: yellow;
    margin: 12px 12px 12px 12px;
    padding: 3px 3px 3px 3px;
}

LI
{
    color: white; /* text color is white */
    background: blue; /* Content, padding will be blue */
    margin: 12px 12px 12px 12px;
    padding: 12px 0px 12px 12px; /* Note 0px padding right */
    list-style: none /* no glyphs before a list item */
}

LI.withborder
{
    border: 2px lime dashed;
}
View Plain
Copy to Clipboard
Print
D.r™

CSS visual formatting model

  • In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.
Property Meaning Values Example
display The display property specifies the type of box an element should generate. Using this property developer is able to change default HTML element display method. none
block
inline
display:block
  • Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves, for this CSS property visibility:hidden is used.

In CSS 2.1 there are 3 positioning schemes

Normal flow positioning scheme

Floats positioning scheme

Property Meaning Values Example
float This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. none
left
right 		float:left
clear This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. none
left
right
both 		clear:both
width The width property sets the width of an element. value in px width:100px
height The height property sets the height of an element. value in px height:100px

CSS Exercise 2

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
 
        <div id="mainContainer">
            <div class="left" id="leftEdge">
            </div>
            <div class="left">
            </div>
            <div class="left">
            </div>
            <div class="right" id="rightEdge">
            </div>
            <div class="right">
            </div>
            <div class="right">
            </div>
        </div>
View Plain
Copy to Clipboard
Print
D.r™

CSS Exercise 2 solution

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
 
@CHARSET "UTF-8";
body
{
    margin: 0;
    padding: 0;
}

#mainContainer
{
    width: 816px;
    height: 100px;
    border: 2px red solid;
    padding: 10px 0px 10px 0px;
}

#mainContainer div
{
    padding: 50px;
    border: 2px #FF00FF solid;
}

#mainContainer div.left
{
    float: left;
}

#mainContainer div.right
{
    float: right;
}

#mainContainer div.right#rightEdge
{
    margin-right: 50px;
}

#mainContainer div.left#leftEdge
{
    margin-left: 50px;
}
View Plain
Copy to Clipboard
Print
D.r™

Absolute positioning scheme

Property Meaning
position: absolute Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. If element positioned in this way is not in a container it means that it will be positioned to document body, which by default has position set to absolute. The element's position is specified with the "left", "top", "right", and "bottom" properties. Eg. top:20px; left:50px;
position: relative Generates a relatively positioned element, positioned relative to its normal position, so left:20px adds 20 pixels to the element's LEFT position.
position: static Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right)
top: valuepx For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its containing element. For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.
left: valuepx For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element. For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

CSS Exercise 3

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
 
        <div id="contA">
            <div>
            </div>
        </div>
        <div id="contB">
            <div id="A">
            </div>
            <div id="B">
            </div>
            <div id="C">
            </div>
        </div>
View Plain
Copy to Clipboard
Print
D.r™

CSS Exercise 3 solution

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
 
@CHARSET "UTF-8";
body
{
    margin: 0;
    padding: 0;
}

div
{
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px #FF0000 solid;
}

div div
{
    width: 70px;
    height: 70px;
}

#contA
{
    top: 200px;
    left: 200px;
}

#contA div
{
    top: 100px;
    left: 100px;
}

#contB
{
    top: 100px;
    left: 500px;
}

#contB #A
{
    top: 25px;
    left: 25px;
}

#contB #B
{
    top: 50px;
    left: 50px;
}

#contB #C
{
    top: 75px;
    left: 75px;
}
View Plain
Copy to Clipboard
Print
D.r™

Quiz Time

Credits