Add the Following Code Below and Save It As Box.Php

Labsheet #2:

Using CSS

The box model

Task #1:

Add the following code below and save it as box.php

<!DOCTYPE HTML>

<html>

<head>

<title>box-model</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

div, p {

margin: 0;

padding:0;

}

html {

background: #ccc;

}

.outer {

width: 400px;

height: 600px;

margin: 0 auto;

background: #9CF;

padding: 1px;

}

.box{

}

p {

background: #EEA458;

height: 100%;

}

</style>

</head>

<body>

<p>The box model describes the physical properties of each element on your page. Margins, borders, padding, and content all make up an element's box. In this case, the inner div tag's margins can be seen with the blue color, the border is black, the padding is represented by orange, and the element's width and height are yellow.

</p>

</div>

</body>

</html>

Add the following code in the .box section:

background:#f90; Can you see the colour?
width:300px;

height:300px; Can you see the background colour now?

padding:25px; What is the total size of the block level element? Do you see the background colour?
border:2px solid black;
margin:25px; Does this change the size of the box?

Task #2:

Save this file as dimension.php

<html>

<head>

<title>box-model</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

div, p {

margin: 0;

padding:0;

}

html {

background: #ccc;

}

.outer {

width: 600px;

margin: 0 auto;

background: #9CF;

}

.box{

background: #B7D19C;

}

p {

background: #FF9;

height: 100%;

}

</style>

</head>

<body>

<p>Here you will be calculating the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.

</p>

</div>

</body>

</html>

Add the following code in the .box section below background:

width:300px;
padding:50px; What is the size of the box?
border: 2px solid black; What is the size of the block?
margin-left:50px; what happened here?

Task#3

Save files as calculate_em.php

<!DOCTYPE HTML>

<html>

<head>

<title>calculating unit values</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

article, div, h1, h2, p {

margin: 0;

padding:0;

}

html {

background: url(_images/grid.gif) 5px 5px;

}

body {

width: 960px;

margin: 0 auto;

font: 100% Arial, Arial, Helvetica, sans-serif;

}

.em {

float: left;

width: 520px;

margin-bottom: 50px;

background: rgba(237,198,75,.6);

}

.percentages {

float: right;

width: 380px;

background: rgba(109,154,197,.4);

margin-bottom: 50px;

}

footer {

clear: both;

}

/*add styles here*/

h1 {

}

h2 {

}

p {

}

</style>

</head>

<body>

<h1>How browsers calculate unit values</h1>

<h2>Using ems</h2>

<p>If ems are used in the font-size property, their value is calculated as a multiple of the parent element's font size. This eventually leads back to the device's default font size, set by either the device or the user.</p>

<p>This can make it very difficult to accurately predict what the calculated value will be for multiply nested elements. While this is generally not a problem regarding fonts it can be difficult to know which value to set for box model properties if you're approximating values based on default document font size.</p>

<p>If, on the other hand, ems are used for any other property, their value is calculated as a multiple of that element's font size, NOT the parent.</p>

</section>

<h2>Using percentages</h2>

<p>For the most part, percentages are pretty straightforward. Values are calculated based on the overall value of the parent element. For example, if you gave a block-level element a width of 100%, it would stretch as wide as possible, and only be restricted by the parent element.</p>

<p>For nested elements, you need to remember that a percentage is calculated relative to the parent, no matter how deep the element is. This can actually be very tricky in complicated layouts, as it is sometimes difficult to remember exactly which element the percentage is based on.</p>

<p>It's even more difficult when you mix percentages and other values. For example, if you set an element's width to 80% and set 20px worth of padding you need to remember that those values are cumulative. The total width of the element would be 80% of its parent, plus the 40px worth of horizontal padding.</p>

</section>

<p>One day soon, we'll be able to use root ems ("rem"). Root ems will allow you to set a value that is calculated based on the document's default font size, not the parent elements. This will give you additional flexibility when using ems within layout values, and make it easier to create em-based layouts.

</p>

</footer>

</article>

</body>

</html>

Add the following code:

Download the image file grid.gif and save it into the folder _images.
In the body section change the font from 100% to 10px.
Enter under h1:

font-size:3em;

Enter under h2:

font-size:2em;

Enter under p:

font-size:1.5em;

Then enter margin-bottom:1em for h1,h2 and p; Carefully notice the output
Type under the class .em and .percentage padding:1em. What is displayed in the browser?

Task #4

Save files as float.php

<!DOCTYPE HTML>

<html>

<head>

<title>The float property</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

html, body {

margin: 0;

padding: 0;

}

html {

background: #ccc;

}

body {

width: 600px;

background: #fff;

margin: 2em auto 2em;

}

div {

margin-bottom: 1em;

width: 100px;

height: 100px;

}

/*add styles here*/

.element1 {

background: rgb(211, 206, 61);

}

.element2 {

background: rgb(85, 66, 54);

}

.element3 {

background: rgb(247,120,37);

}

</style>

</head>

<body>

<p>The float property has four possible values: left | right | inherit | none<p>

<p>Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.</p>

</body>

</html>

Type the following codes:

Under element 1 type: float:right; What is happened the box of element 2 and element 3?
change float:right; to float: left; What is happened the box of element 2?
Type float: left; under element 1,2, and 3 section.
Type margin-right:1em; under element 1,2, and 3 section.
What is have in bulletin 3 and 4 is container collapse:

Resolving Container collapse

Task #6: Clear Float will stop floating and resume normal flow.

<!DOCTYPE HTML>

<html>

<head>

<title>The float property</title>

<!--[if lt IE 9]>

<script src="

<![endif]-->

<style>

aside, article, section, header, footer, nav {

display: block;

}

html, body {

margin: 0;

padding: 0;

}

html {

background: #ccc;

}

body {

width: 600px;

background: #fff;

margin: 2em auto 2em;

font: 100% Arial, Helvetica, sans-serif;

}

div {

margin-bottom: 1em;

margin-right: 2em;

width: 50px;

height: 50px;

border: 1px solid #000;

padding: 25px;

float: left;

}

/*add styles here*/

.element1 {

background: rgb(211, 206, 61);

}

.element2 {

background: rgb(85, 66, 54);

}

.element3 {

background: rgb(247,120,37);

}

.element4 {

background: rgb(26, 78, 175);

}

.element5 {

background: rgb(195, 156, 61);

}

.element6 {

background: rgb(225,68,37);

}

</style>

</head>

<body>

<p>The clear property has five possible values: left | right | both | inherit | none<p>

<p>By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning a float "off" and restoring normal document flow to the remaining elements.</p>

<div class="element3">three</div>

</body>

</html>

Type the following codes:

clear:right in element 4. What is the output?
In div section remove margin-right:2em and float:left; Remove clear:left from section element 4.
change the width to 150px in the div section.
In element 1: type float:right; width:50px
In element 2: type float:left; width:50px; What is the output?
In element 3: type clear:left; What is the output?
In element 1: change the height to 200px; What is the output?
In element 3: change clear:left to clear:right; What is the output?
In element 2: change the height:200px; What is the output?
In element 3: change clear:right to clear:both; What is the output?

Task #6

Making a 2 column

Save files as column.php

<!DOCTYPE HTML>

<html>

<head>

<title>2 column layout</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

html, body {

margin: 0;

padding: 0;

}

html {

background: rgb(123, 121, 143);

}

body {

width: 960px;

background: #fff;

margin: 0 auto 2em;

font: 100% Georgia, "Times New Roman", Times, serif;

}

header {

background: rgb(76, 67, 65);

margin-bottom: 20px;

}

header h1 {

font: normal 2em Arial, Helvetica, sans-serif;

color: white;

text-align: center;

line-height: 4em;

text-transform: uppercase;

letter-spacing:.1em;

margin: 0;

}

.col1 {

background: rgb(237, 228, 214);

height: 500px;

}

.col2 {

background: rgb(173, 169, 130);

height: 500px;

padding: 20px;

}

footer {

background: rgb(100, 98, 102);

line-height: 3em;

font-size: .6em;

color: white;

padding: 0 2em;

}

</style>

</head>

<body>

<h1>Cool company header</h1>

</header>

This is where the really important stuff goes.

</section>

This is where the related content goes.

</aside>

<footer>Copyright stuff....</footer>

</body>

</html>

Type the following code:

float:left in section col1;
width:600px in section col1;
padding:20px under the col1 section.
margin-left:660px in the col2 section.
clear:both in the footer section.

Relative Positioning

Task #7

Save files as rel_positioning.php

<!DOCTYPE HTML>

<html>

<head>

<title>Relative Positioning</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

html, body {

margin: 0;

padding: 0;

}

html {

background: #ccc;

}

body {

width: 700px;

background: #fff;

margin: 2em auto 2em;

font: 100% Arial, Helvetica, sans-serif;

padding: 25px;

}

div {

margin-bottom: 25px;

width: 50px;

height: 50px;

padding: 25px;

}

/*add styles here*/

.container {

background: rgb(237,228,214);

padding: 25px;

}

.element1 {

background: rgb(211, 206, 61);

}

.element2 {

background: rgb(85, 66, 54);

}

.element3 {

background: rgb(247,120,37);

}

</style>

</head>

<body>

<h1>Positioning</h1>

<p>The positioning property has five possible values: <strong>static</strong> | <strong>relative</strong> | <strong>absolute</strong> | <strong>fixed</strong> | <strong>inherit</strong> <p>

<p>Static represents a box in normal document flow, and is the default position value for elements. Relative positioning allows elements to be offset from their normal position. Following elements react as if the element were not offset. Absolute positioning removes the element from normal flow and allows you to position it using top, left, bottom, or right offsets. Following elements react as if the absolutely positioned element does not exist. Fixed positioning "fixes" an element relative to the viewport. Just as with absolute, the element is removed from normal flow.</p>

<div class="element3">Three</div>

</section>

</body>

</html>

Type the following codes:

Static and relative are in normal flow whereas absolute and fixed are in absolute flow.

in element1 section type position:relative;

top:10px;

left:10px;

change the left offset to 200px; and top to 100px; in element1; What is the output?
add height:200px; What is the output?

Absolute Positioning

Task #8

Save files as abs_positioning.php

<!DOCTYPE HTML>

<html>

<head>

<title>Absolute Positioning</title>

<style>

aside, article, section, header, footer, nav {

display: block;

}

html, body {

margin: 0;

padding: 0;

}

html {

background: #ccc;

}

body {

width: 700px;

background: #fff;

margin: 2em auto 2em;

font: 100% Arial, Helvetica, sans-serif;

padding: 25px;

}

div {

margin-bottom: 25px;

width: 50px;

height: 50px;

padding: 25px;

}

/*add styles here*/

.container {

background: rgb(237,228,214);

padding: 25px;

}

.element1 {

background: rgb(211, 206, 61);

}

.element2 {

background: rgb(85, 66, 54);

}

.element3 {

background: rgb(247,120,37);

}

</style>

</head>

<body>

<h1>Positioning</h1>

<p>The positioning property has five possible values: <strong>static</strong> | <strong>relative</strong> | <strong>absolute</strong> | <strong>fixed</strong> | <strong>inherit</strong> <p>

<div class="element3">Three</div>

</section>

</body>

</html>

Type the following codes:

position:absolute in element 1;
Type the offset:

left:125px;

right:125px; What is the output?

In the bodytype position:relative; what is the output?
In the container type position:relative; What is the output?