CSS tutorial 2

Posted on 14/09/2009 by

4



Example 7

CSS Image Transparency

This document describes to make a rollover obn the image to see the transparency.

<html>
<head>
<style type=”text/css”>
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ />
<img src=”klematis2.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ />
</body>
</html>

Image Transparency

klematis2

klematis

Example 8

CSS Align Block Elements

This document  describes the alignment of the text.

<html>
<head>
<style type=”text/css”>
.center
{
margin:auto;
width:50%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div>
<p>In Windows, you can use a workspace that looks similar to the workspace in Macromedia® HomeSite® from Adobe, with the panel groups docked on the left side of the main window instead of on the right side. In this workspace layout, the Property inspector is collapsed by default, and the Document window appears in Code view by default.</p>
</div>
<p><b>Tab Size Determines how many characters wide each tab character appears in Code view. For example, if Tab Size is set to 4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With is set to 3 Tabs, then code generated by Dreamweaver is indented using three tab characters for every level of indentation, which appears in Code view as a twelve-character-wide blank space.</p>
</body>
</html>

In Windows, you can use a workspace that looks similar to the workspace in Macromedia® HomeSite® from Adobe, with the panel groups docked on the left side of the main window instead of on the right side. In this workspace layout, the Property inspector is collapsed by default, and the Document window appears in Code view by default.

Tab Size Determines how many characters wide each tab character appears in Code view. For example, if Tab Size is set to 4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With is set to 3 Tabs, then code generated by Dreamweaver is indented using three tab characters for every level of indentation, which appears in Code view as a twelve-character-wide blank space.

EllaHax

Advertisements
Posted in: Coding, CSS