Letter Spacing
When we want to set spaces between every letter we use letter-spacing property.
» EXAMPLE:
<html>
<head>
<style>
h3 {
letter-spacing: 10px;
}
h3.head {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h3 class="head">This is heading..</h3>
<h3>This is heading..</h3>
</body>
</html>
» Result:
This is heading..
This is heading..
Space between lines
» EXAMPLE:
<head>
<style>
p.par {
line-height: 70%;
}
</style>
</head>
<body>
<p class="par">Web design encompasses many different skills and disciplines in the production and maintenance of websites.<br /> The different areas of web design include web graphic design; interface design; authoring, including standardised<br /> code and proprietary software; user experience design; and search engine optimization.
</p>
</body>
</html>
» Result:
Web design encompasses many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.
The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.
Increase white space between words
» EXAMPLE:
<html>
<head>
<style>
h3 {
word-spacing: 20px;
}
</style>
</head>
<body>
<h3>This is heading and we will use word-spacing.</h3>
</body>
</html>
» Result:
This is heading and we will use word-spacing.
Vertical alignment of an image
» EXAMPLE:
<html>
<head>
<style>
img.demo {vertical-align:text-top;}
img.demo2 {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="bg.jpg" width="70" height="50" /> image with a default alignment.</p>
<p>An <img class="demo" src="bg.jpg" width="70" height="50" /> image with a text-top alignment.</p>
<p>An <img class="demo2" src="bg.jpg" width="70" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
» Result:
image with a default alignment.An
image with a text-top alignment.An
image with a text-bottom alignment.Text Shadow
» EXAMPLE:
<html>
<head>
<style>
p.par {
text-shadow: 2px 2px 10px #39C;
}
</style>
</head>
<body>
<p class="par">Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. </p>
</body>
</html>
» Result:
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.
No comments:
Post a Comment