Other Examples
The CSS examples on this page cover a range of properties that control where, when, and how your HTML elements are rendered in the browser. Judicious use of these properties allow you a wide range of control over the exact layout and of your Web page!
-
Display Display controls whether your element will be displayed as a block (with breaks above and below it), as an inline element, or not be displayed at all.
<html>
<head>
<style type="text/css">
p.notvis { display: none; }
p.inline { display: inline; }
</style>
</head>
<body>
<p class="notvis">This paragraph is invisible!</p>
<p class="inline">With the value of "inline" there should be</p>
<p class="inline">no line break between these two paragraphs</p>
</body>
</html> -
Float Float is a funny property that controls where your element's box falls in relationship to other boxes around it (that sneaky box model pops up again and again).
<html>
<head>
<style type="text/css">
p.left { float: left; background-color: aqua; }
p.right { float: right; background-color: silver; }
img { float: right; }
</style>
</head>
<body>
<p class="left">This paragraph should float to the left....</p>
<p class="right">... of this one!</p>
<p>
<img src="location/filename.jpg" />
And because we defined img elements to float<br />
to the right, the image should float to the right<br />
of these words (the image and the words are in the<br />
same paragraph, but the location of the image within<br />
the paragraph is controlled with CSS.)
</p>
</body>
</html> -
Positioning Positioning is another way of moving an element from where it would normally lie. The most common ways to specify an element's position are to be relative (to where it would normally be) or to be absolute (at some position that you define). When you position elements this way, you must provide some numbers that specify where the element should be positioned. The numbers supplied for relative positioning tell the element how far away it should be from where it would be normally; the numbers supplied for absolute positioning tell the element how far away it should be from the edges of the Web page.
<html>
<head>
<style type="text/css">
p { background-color: silver; }
p.ex1 { position: relative; left: 20px; background-color: pink; }
p.ex2 { position: relative; left: -20px; top: 20px; background-color: red; }
p.ex3 { position: absolute; top: 300; left: 100px; right: 100px; background-color: aqua; }
</style>
</head>
<body>
<p>This paragraph is where it would normally be.</p>
<p>So is this one.</p>
<p class="ex1">This paragraph is shifted 20 pixels to the left of where it would normally be.</p>
<p class="ex2">This paragraph is shifted 20 pixels to the right (negative left) and 20 pixels down from where it would normally be.</p>
<p class="ex3">This paragraph is absolutely positioned to be 300 pixels from the top of the page, 100 pixels from each side of the page. It should be "floating" kind of in the middle of nowhere. Maaaaaagic!</p>
</body>
</html> -
Cursor Cursor allows you to control what the mouse pointer looks like when it moves over a particular element.
<html>
<head>
<style type="text/css">
p { padding: 0; margin: 0; }
</style>
</head>
<body>
<p><b>It is important to remember that Netscape 4 does not support the "cursor" property, but Mozilla versions 1.0+ do.</b></p>
<p>Move the mouse over the words to see the cursor change.</p>
<p style="cursor:auto"> Auto </p>
<p style="cursor:crosshair"> Crosshair </p>
<p style="cursor:default"> Default </p>
<p style="cursor:pointer"> Pointer </p>
<p style="cursor:move"> Move </p>
<p style="cursor:e-resize"> e-resize </p>
<p style="cursor:ne-resize"> ne-resize </p>
<p style="cursor:nw-resize"> nw-resize </p>
<p style="cursor:n-resize"> n-resize </p>
<p style="cursor:se-resize"> se-resize </p>
<p style="cursor:sw-resize"> sw-resize </p>
<p style="cursor:s-resize"> s-resize </p>
<p style="cursor:w-resize"> w-resize </p>
<p style="cursor:text"> text </p>
<p style="cursor:wait"> wait </p>
<p style="cursor:help"> help </p>
</body>
</html>
