CSS CHEATSHEET: css tutorial

Four sisters enter into Theatre. Sister-1 Goes first takes a seat, Then Sister-2 goes in and takes a seat...like that. There is a general instruction from their parents that they should take the left seat as far as possible. Now let us see, for different instructions, how they are taking their positions

General Instruction from their parent: Float Left
Special Instructions : NIL.

General Instruction from their parent: Float Left
Special Instructions to No.2 : Clear Left

Clear Left means, before sitting, make sure the left most position is clear. If not goto the next row.

General Instruction from their parent: Float Left
Special Instructions to No.1 : Float Right
Special Instructions to No.2 : Clear Right

Float right means, sit in the available place and move to the right as far as possible.

General Instruction from their parent: Float Left
Special Instructions to No.1 : Float Right
Special Instructions to No.2 : NIL
Special Instructions to No.3 : Clear Both
Special Instructions to No.4 : Clear Both

Clear Both means: before sitting, make sure left most and right most seats are clear. which means, entire row should be clear.

General Instruction from their parent: Float Left
Special Instructions to No.1 : Clear Both
Special Instructions to No.2 : NIL
Special Instructions to No.3 : Clear Both
Special Instructions to No.4 : Float Right

<html>
<head>
<style type="text/css">
.row{
width: 100%;
clear: both;
margin-top: 20px;
height: 150px;
}
.block{
float: left;
border: #000000 1px solid;
width: 350px;
height: 350px;
margin-left:20px;
padding: 5px;
}
.littleblock{
float: left;
background-color: #DDDDDD;
text-align: center;
font-family: tahoma;
font-size: 11px;
padding: 2px;
width: 25px;
height: 25px;
margin: 5px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td style="color:#336699;font:20px 'trebuchet ms';"> Four sisters enter into
Theatre. Sister-1 Goes first takes a seat, Then Sister-2 goes in and takes
a seat...like that. There is a general instruction from their parents that
they should take the left seat as far as possible. Now let us see, for different
instructions, how they are taking their positions </td>
</tr>
<tr>
<td>
<div class="row">
<div class="block"> General Instruction from their parent: Float Left
<br>
Special Instructions : NIL.
<div class="littleblock"><img src="css_chair1.jpg" /></div>
<div class="littleblock"><img src="css_chair2.jpg" /></div>
<div class="littleblock"><img src="css_chair3.jpg" /></div>
<div class="littleblock"><img src="css_chair4.jpg" /></div>
</div>
<div class="block"> General Instruction from their parent: Float Left<br>
Special Instructions to No.2 : Clear Left
<div class="littleblock"><img src="css_chair1.jpg" /></div>
<div class="littleblock" style="clear: left;"><img src="css_chair2.jpg" /></div>
<div class="littleblock"><img src="css_chair3.jpg" /></div>
<div class="littleblock"><img src="css_chair4.jpg" /></div>

</div>
<div>
Clear Left means, before sitting, make sure the left most position is clear.
If not goto the next row.

</div>
</div>
<div class="row">
<div class="block"> General Instruction from their parent: Float Left<br>
Special Instructions to No.1 : Float Right<br>
Special Instructions to No.2 : Clear Right
<div class="littleblock" style="float: right;"><img src="css_chair1.jpg" /></div>
<div class="littleblock" style="clear: right;"><img src="css_chair2.jpg" /></div>
<div class="littleblock"><img src="css_chair3.jpg" /></div>
<div class="littleblock"><img src="css_chair4.jpg" /></div>
</div>
<div>
Float right means, sit in the available place and move to the right as far as possible.
</div>
<div class="block"> General Instruction from their parent: Float Left<br>
Special Instructions to No.1 : Float Right<br>
Special Instructions to No.2 : NIL<br>

Special Instructions to No.3 : Clear Both<br>
Special Instructions to No.4 : Clear Both<br>
<div class="littleblock" style="float: right;"><img src="css_chair1.jpg" /></div>
<div class="littleblock"><img src="css_chair2.jpg" /></div>
<div class="littleblock" style="clear: both;"><img src="css_chair3.jpg" /></div>
<div class="littleblock" style="clear: both;"><img src="css_chair4.jpg" /></div>
</div>
<div>
Clear Both means: before sitting, make sure left most and right most seats are clear.
which means, entire row should be clear.

</div>

<div class="block"> General Instruction from their parent: Float Left<br>
Special Instructions to No.1 : Float Right<br>
Special Instructions to No.2 : NIL <br>
Special Instructions to No.3 : Clear Both<br>
Special Instructions to No.4 : Float Right<br>
<div class="littleblock" style="float: right;"><img src="css_chair1.jpg" /></div>
<div class="littleblock"><img src="css_chair2.jpg" /></div>
<div class="littleblock" style="clear: both;"><img src="css_chair3.jpg" /></div>
<div class="littleblock" style="float:right;"><img src="css_chair4.jpg" /></div>
</div>

<div class="block"> General Instruction from their parent: Float Left<br>
Special Instructions to No.1 : Clear Both<br>
Special Instructions to No.2 : NIL <br>
Special Instructions to No.3 : Clear Both<br>
Special Instructions to No.4 : Float Right<br>
<div class="littleblock" style="clear: both;"><img src="css_chair1.jpg" /></div>
<div class="littleblock"><img src="css_chair2.jpg" /></div>
<div class="littleblock" style="clear: both;"><img src="css_chair3.jpg" /></div>
<div class="littleblock" style="float:right;"><img src="css_chair4.jpg" /></div>
</div>

</div>
</td>
</tr>
<tr>
<td width="550" style="color:#336699;font:12px arial"><p> </p></td></tr>

</table>

</body>
</html>

CSS CHEATSHEET

Friday, December 26, 2008

CSS TUTORIAL DIFFERENTIATE BETWEEN FLOAT AND CLEAR

Followers

Blog Archive

About Me