Saturday, January 21, 2012

11:41 PM

Amimul islam rafi

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
} 
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

result

Add a description of the image here

11:35 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>

</html>

result

This is a paragraph with no specified margins.

This is a paragraph with specified margins.

11:32 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
p
{
border:5px solid red;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

result

This is some text in a paragraph.

11:28 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

result

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

11:24 PM

Amimul islam rafi

No comments

<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>



<p>Example of unordered lists:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

results

Example of unordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Example of ordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

11:18 PM

Amimul islam rafi

2 comments

<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>

<body>
<p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>

</html>

results

Link to: W3Schools.com

11:13 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif');}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

results

Hello World!

11:12 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>

</body>
</html>

results

CSS background-color example!

This is a text inside a div element.

This paragraph has it's own background color.

We are still in the div element.

11:09 PM

Amimul islam rafi

3 comments

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

result

Center-aligned heading

Center-aligned paragraph.

11:06 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

result

Hello World!

This paragraph is styled with CSS.

11:04 PM

Amimul islam rafi

No comments

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

</body>
</html>

result

CSS example!

This is a paragraph.

entertainment

Saturday, January 21, 2012

css link

Hello World!

CSS background-color example!

Center-aligned heading

CSS example!

Popular Posts

Blogger Tricks

Recent Posts

Blogger Themes

Blog Archive

Download