In chapter you will learn about floats. What is a float. In the event you want to
have three objects next to eachother you would use a float otherwise it will be
underneath each other. For example.
Lets say you have one box <div> and then you create another box
<div>. They initially will display
on separate lines. However, if you want
them side by side then you float it to the left. Please note you can also float to the right.
Do the example below.
<html>
<head>
<title>Learning
CSS</title>
<style >
.bigfont {
font-size:200%;
}
#blue {
color:blue;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.greybox {
background-color:
grey;
width:250px;
height:250px;
}
.redbox {
background-color:
red;
width:600px;
height:200px;
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div
class="redbox">
<p
class="large">This is some text.</p>
</div>
<div
class="greybox">
<p
id="blue" class="bigfont">This written with a Bigfont in
the color blue.</p>
</div>
<div
class="clearfloat"></div>
<p
class="left"> This will be underlined , have a bigfont and be bold => <span class="underline bigfont bold">THIS
IS AWESOME</
span> -> wow that kind of cool .</p>
</body>
</html>
0 comments: