Thursday 19 July 2012

How to set Vertical alignment of an image inside text in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="your logo.gif" alt="name" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="your logo.gif" alt="name" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="your logo.gif" alt="name" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

Thursday 19 July 2012 by Unknown · 0

How to Disable text wrapping inside an element in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>

<p>
some text.some text.some text.
some text.some text.some text.
some text.some text.some text.
some text.some text.some text.
</p>

</body>
</html>

by Unknown · 0

How to Increase the white space between words in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is  text. This is  text.
</p>

</body>
</html>

by Unknown · 0

How to set Set the text direction of an element in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>Default writing direction.</div>
<div class="ex1">Right-to-left direction.</div>

</body>
</html>

by Unknown · 0

How to Specify the space between lines in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
standard line-height.<br />
standard line-height.<br />

</p>

<p class="small">
smaller line-height.<br />
smaller line-height.<br />
smaller line-height.<br />
smaller line-height.<br />
</p>

<p class="big">
bigger line-height.<br />
bigger line-height.<br />
bigger line-height.<br />
bigger line-height.<br />
</p>

</body>
</html>

by Unknown · 0

how to Specify the space between characters using css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
</body>
</html>

by Unknown · 0

how to Indent text in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>

<p>Ajith Kumar (born 1 May 1971) is an Indian film actor who works mainly in Tamil cinema. He began his career as a supporting actor in a Telugu film before gaining critical recognition in the Tamil thriller Aasai (1995).[2] A succession of high-grossing films followed where Ajith was usually depicted as a romantic hero, with Kadhal Kottai (1996), Aval Varuvala (1998), Kadhal Mannan (1998) and Unnai Thedi (1999) being the most notable.'</p>

</body>
</html>

by Unknown · 0

How to Control the letters in a text in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">some text.</p>
<p class="lowercase">some text.</p>
<p class="capitalize">some text.</p>
</body>
</html>

by Unknown · 0

How to Decorate the text using css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>

</body>

</html>

by Unknown · 0

How to Remove the line under links in css


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

<body>
<p>Link to: <a href="collegeprojectandtests.blogspot.com">Web tutorial</a></p>
</body>

</html>

by Unknown · 0

How to Align the text in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">june, 2009</p>
<p class="main">Cruise was born in Syracuse, New York, the son of Mary Lee (née Pfeiffer), a special education teacher, and Thomas Cruise Mapother III (died 1984),[6] an electrical engineer.[7] Cruise has three sisters, Lee Anne, Marian, and Cass'</p>

</body>

</html>

by Unknown · 0

How to Set the text color of different elements in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

by Unknown · 0

How to set Advanced background example using css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('your-img.png') no-repeat top left;
}

.container
{
text-align:center;
}

.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>

<body>
<div class="container">
<div class="center_div">
<h1>Hello viewers!</h1>

</div>
</div>
</body>
</html>

by Unknown · 0

How to set All the background properties in one declaration using css


<!DOCTYPE html>
<html>
<head>

<style type="text/css">
body
{
background:#ffffff url('yourimg.png') no-repeat right top;
margin-right:200px;
}
</style>

</head>

by Unknown · 0

how to fix a background image using css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

by Unknown · 0

How to position a background image in css


<head>

<style type="text/css">
body
{
background-image:url('yourimg.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>background no-repeat, set postion example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>

</body>

</html>

by Unknown · 0

How to repeat a background image only horizontally in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello viewer!</h1>
</body>

</html>

by Unknown · 0

How to set Set an image as the background of a page using css


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

<body>
<h1>Hello viewer!</h1>
</body>

</html>

by Unknown · 0

How to Set the background color of different elements using css


<!DOCTYPE html>
<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 its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

by Unknown · 0

How to set Set the background color of a page using css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>My CSS design!</h1>
<p>Hello world! This is a my site.com example.</p>

</body>
</html>

by Unknown · 0