Here is an example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-align: center; text-transform: uppercase; color:#000;}
p {text-indent: 50px; text-align:left; letter-spacing:3px;}
a {text-decoration:underline;}
</style>
</head>
<body>
<h1>Header</h1>
<p>The text is styled with some text properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. And the link is underlined: <a href="http://j-smith-site.blogspot.com">John Smith's Blog</a></p>
</body>
</html>
The above arrangement will generate the below content.
Header
The text is styled with some text properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. And the link is underlined: John Smith's Blog
|
Now let's discuss about the properties.
Text Color Property
Color property is used to specify the color of a text. It's most often specified by a Hex Value, Rgb, or even Color Name. Take a look at my previous post for a complete list of Color Values. - And as a Css, you can place it in the body selector as described on the first example i made above. - And to comply with W3C, it is recommended that you define the background color property if you define the text color property for the page.
Text Align Property
The text-align property is used to set the horizontal alignment of a text. Text can be centered or aligned to the left, right, or even justified which means the text is set to an equal width, and the left and right margins are straight as in magazines and newspapers. Example:
<!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">December, 1994</p>
<p class="main">Css Text Align Example: H1 is center aligned, date is right aligned, and main is left aligned.</p>
</body>
</html>
It should generate the below content.
Css Text Align ExampleDecember, 1994 Css Text Align Example: H1 is center aligned, date is right aligned, and main is left aligned.
|
The text-decoration property is used to set or remove decorations from text. The text-decoration property is often used to remove underlines from links, but can also be used to decorate texts of course. Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link without underline: <a href="http://j-smith-site.blogspot.com">John Smith's Blog</a></p>
</body>
</html>
<!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>This is heading 1: text decoration is overline</h1>
<h2>This is heading 2: text decoration is line-through</h2>
<h3>This is heading 3: text decoration is underline</h3>
<h4>This is heading 4: text decoration is blink</h4>
<p>Each heading above have a different text decoration one another.
<b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari. And that it is not recommended to underline text that is not a link, as it could confuse the reader.</p>
</body>
</html>
The above arrangements will generate the below contents.
|
Link without underline: John Smith's Blog |
This is heading 1: text decoration is overlineThis is heading 2: text decoration is line-throughThis is heading 3: text decoration is underlineThis is heading 4: text decoration is blinkEach heading above have a different text decoration one another. |
The text-transform property is used to specify if the the text is styled with uppercase or lowercase letters. Means it can turn every text into uppercase or lowercase letters, or even capitalize the first letter only. Example:
<!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">This is text with uppercase style.</p>
<p class="lowercase">This is text with lowercase style.</p>
<p class="capitalize">This is text with capital style.</p>
</body>
</html>
The above arrangement will generate the below content.
|
This is text with uppercase style This is text with lowercase style This is text with capitalize style
|
The text-indent property is used to specify the indentation of the first line in a paragraph. Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<p>Here is a sample paragraph styled with text-indent property. The first line should arrange a bit shorter than the lines after.</p>
</body>
</html>
The above arrangement will generate the below content.
|
Here is a sample paragraph styled with text-indent property. The first line should arrange a bit shorter than the lines after.
|
Specify the space betwen each letter
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-5px;}
</style>
</head>
<body>
<h1>This is heading 1: the space betwen each letter is set to 2px width.</h1>
<h2>This is heading 2: the space betwen each letter is set to -5px width.</h2>
</body>
</html>
The above arrangement will generate the below content.
This is heading 1: the space betwen each letter is set to 2px width.This is heading 2: the space betwen each letter is set to -5px width. |
<html>
<head>
<style type="text/css">
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>This is a paragraph with a standard line-height. By default, the line height in most browsers is set to approximately 110% to 120%.</p>
<p class="small">
This is a paragraph with a smaller line-height. The line height is set to 70%. This is a paragraph with a smaller line-height. The line height is set to 70%.</p>
<p class="big">
This is a paragraph with a bigger line-height. The line height is set to 200%. This is a paragraph with a bigger line-height. The line height is set to 200%.<br/> </p>
</body>
</html>
The above arrangement will generate the below content.
|
This is a paragraph with a standard line-height. By default, the line height in most browsers is set to approximately 110% to 120%.
This is a paragraph with a smaller line-height. The line height is set to 70%. This is a paragraph with a smaller line-height. The line height is set to 70%.
This is a paragraph with a bigger line-height. The line height is set to 200%. This is a paragraph with a bigger line-height. The line height is set to 200%.
|
This one is used to change the text direction of an element. The property is "direction". Example:
<html>
<head>
<style type="text/css">
div.example {direction:rtl;}
</style>
</head>
<body> <div>Here is text with default writing direction.</div>
<div class="example">Here is text styled with rtl direction.</div>
</body>
</html>
The above arrangement will generate the below content.
|
Here is text with default writing direction. Here is text styled with rtl direction.
|
It's used to specify the space between words in a paragraph. Example:
<html>
<head>
<style type="text/css">
p { word-spacing:30px; }
</style>
</head>
<body>
<p>Example text with space betwen words specified.</p>
</body>
</html>
The above arrangement will generate the below content.
|
Example text with space betwen words styled to 30px.
|
It's used to disable text wrapping in an element. Example:
<html>
<head>
<style type="text/css">
p { white-space:nowrap; }
</style>
</head>
<body>
<p>Sample text with text-wrapping disabled.</p>
</body>
</html>
The above arrangement will generate the below content.
|
Sample text with text-wrapping disabled.
|
It is used to set the vertical alignment of an image among text. Example:
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>Hello.. <img src="" alt="example: image with default alignment"/> This an image with a default alignment.</p>
<p>Hello.. <img class="top" src="" alt="example: image with text-top alignment"/> This an image with text-top alignment.</p>
<p>Hello.. <img class="top" src="" alt="example: image with text-bottom alignment"/> This an image with text-bottom alignment.</p>
</body>
</html>
The above arrangement will generate the below content.
|
Hello..
 This is an image with a default alignment.Hello.. This is an image with text-top alignment.Hello.. This is an image with text-bottom alignment. |
It is used to style text with a shadow effect. Here you can specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow. Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-shadow: 5px 5px 5px #0000FF;}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
The above arrangement will generate the below content.
Example Text With Shadow effect!Note: Internet Explorer does not support the text-shadow property. |
This one is used to break text that is too long to fit within an area, that which in such a condition the text would likely expand outside. In CSS3, the word-wrap property allows you to force the text to wrap, even if it means splitting it in the middle of a word. Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.test {width:11em; border:1px solid #0000ff; word-wrap:break-word;}
</style>
</head>
<body>
<p class="test">Example text that is too long and wouldn't break without word-wrap property specified: Exampletextthatistoolongandwouldn'tbreak.</p>
</body>
</html>
The arrangement above will generate the below content.
|
Example text that is too long and wouldn't break without word-wrap property specified: Exampletextthatistoolongandwouldn'tbreak.
|
-hanging-punctuation: Specifies whether a punctuation character may be placed outside the line box.
-punctuation-trim: Specifies whether a punctuation character should be trimmed.
-text-align-last: Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify".
-text-emphasis: Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text.
-text-justify: Specifies the justification method used when text-align is "justify".
-text-outline: Specifies a text outline.
-text-overflow: Specifies what should happen when text overflows the containing element.
-text-wrap: Specifies line breaking rules for text.
-word-break: Specifies line breaking rules for non-CJK scripts.
-word-wrap: Allows long, unbreakable words to be broken and wrap to the next line.
All Css Text Properties
*color: Sets the color of text.
*direction: Specifies the text direction/writing direction. The value Ltr, rtl, and inherit (ltr: left-to-right).
*letter-spacing: Increases or decreases the space between characters.
*line-height: Sets the height space betwen lines in a paragraph.
*text-align: Specifies the horizontal alignment of text.
*text-decoration: Specifies the decoration added to text. It has some values as figured below.
-none: Defines a normal text. This is the default value.
-underline: Defines a line belault value.
-underline: Defines a line below the text.
-overline: Defines a line above the text.
-line-through: Defines a line through the text.
-blink: Defines a blinking text.
-inherit: Specifies that the value of the text-decoration property should be inherited from the parent element.
*text-indent: Specifies the indentation of the first line in a text-block. It has some Values as listed below.
-length: Defines a fixed indentation in px, pt, cm, em, etc.
-%: Defines the indentation in % of the width of the parent element.
-inherit: Specifies that the value of the text-indent property should be inherited from the parent element.
*text-transform: Controls the capitalization of text. It has some values as listed below.
-none: No capitalization. The text renders as it is. This is the default value.
-capitalize: Transforms the first character of each word to uppercase.
-uppercase: Transforms all characters to uppercase.
-lowercase: Transforms all characters to lowercase.
-inherit: Specifies that the value of the text-transform property should be inherited from the parent element.
*vertical-align: Sets the vertical alignment of an element. It has some values as listed below.
-length: Raises or lower an element by the specified length. Negative values allowed.
-%: Raises or lower an element in a percent of the "line-height" property. Negative values allowed.
-baseline: Align the baseline of the element with the baseline of the parent element. This is the default value.
-sub: Aligns the element as it was subscript.
-super: Aligns the element as it was superscript.
-top: The top of the element is aligned with the top of the tallest element on the line.
-text-top: The top of the element is aligned with the top of the parent element's font.
-middle: The element is placed in the middle of the parent element.
-bottom: The bottom of the element is aligned with the lowest element on the line.
-text-bottom: The bottom of the element is aligned with the bottom of the parent element's font.
-inherit: Specifies that the value of the vertical-align property should be inherited from the parent element.
*white-space: Specifies how white-space inside an element is handled. It has some values as listed below.
-normal: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. And this is the default value.
-nowrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br/> tag encountered.
-pre: Whitespace is preserved by the browser. Text will only wrap on line breaks and Acts like the <pre> tag in Html code.
-pre-line: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary or when on line breaks.
-pre-wrap: Whitespace is preserved by the browser. Text will wrap when necessary or when on line breaks.
-inherit: Specifies that the value of the white-space property should be inherited from the parent element.
*word-spacing: Increases or decreases the space between words in a text. It has some values as listed below.
-normal: Defines normal space between words . This is the default value.
-length: Defines an extra space between words in px, pt, cm, em, etc. Negative values allowed here.
-inherit: Specifies that the value of the word-spacing property should be inherited from the parent element.
Note: IE7 and earlier do not support the value "inherit" and "blink", while IE8 requires a !DOCTYPE, and IE9 supports it already.
0 comments:
Post a Comment