Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
» EXAMPLE:
<html>
<head>
<style>
h1 {
color: blue;
}
h3 {
color: #00CC33;
}
p {
color: rgb(255,0,0);
}
</style>
</head>
<body>
<h1>This is blue heading.</h1>
<h3>This is green heading.</h3>
<p>This is red paragraph.</p>
</body>
</html>
» Result:
This is blue heading.
This is green heading.
This is red paragraph.
You can also set one color to all text in Your page. You have to define body color.
» EXAMPLE:
<html>
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<h1>This is blue heading.</h1>
<h3>This is green heading.</h3>
<p>This is red paragraph.</p>
</body>
</html>
» Result:
This is blue heading.
This is green heading.
This is red paragraph.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.
Try to resize the browser window to see how the value "justify" works.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.
Try to resize the browser window to see how the value "justify" works.
» EXAMPLE:
<html>
<head>
<style>
h1 {
text-align: center;
}
#demo {
text-align: right;
}
p.par {
text-align: justify;
}
</style>
</head>
<body>
<h1>This is blue heading.</h1>
<h3 id="demo">This is green heading.</h3>
<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:
This is blue heading.
This is green heading.
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.
Text Decoration
The text-decoration property is used to set or remove decorations from text.
It's mostly used to remove underlines from links.
» EXAMPLE:
<html>
<head>
<style>
a {
text-decoration: none;
}
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
</style>
</head>
<body>
Link to: <a href="http://easilylearnhtml.blogspot.com/2013/12/css-backgrounds.html">CSS Backgrounds(Without undeline)</a>
<h1>Underlined</h1>
<h2>Overlined</h2>
<h3>line-through</h3>
</body>
</html>
» Result:
Underlined
Overlined
line-through
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
You can turn everything into uppercase, lowercase, or capitalize the first letter.
» EXAMPLE:
<html>
<head>
<style>
h1 {
text-transform: lowercase;
}
h3 {
text-transform: uppercase;
}
p.par {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>This Is Heading IN lOweRcase.</h1>
<h3>this is heading in uppercase.</h3>
<p class="par">Here every word starts with uppercase letter.</p>
</body>
</html>
» Result:
This Is Heading IN lOweRcase.
this is heading in uppercase.
Here every word starts with uppercase letter.
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
» EXAMPLE:
<html>
<head>
<style>
p.par {
text-indent: 60px;
}
</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.
MORE EXAMPLES: CSS Additional text properties
MORE EXAMPLES: CSS Additional text properties
No comments:
Post a Comment