CSS3 Text
CSS3 Basics – Part 4
Forward: In this part of the series, I give you some word processing features that CSS3 offers.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Text Indentation
In an html element, all the lines of text begin from the left end of the element. You can make the first line to start at a distance to the right. This is text indentation. You need the, “text-indent” property and a length or percentage value for this. The length value can be a number in pixels. If you use a percentage value, the value will be relative to the width of the element that has the text. Try the following code, which illustrates this in percentage:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {width:50%; text-indent:10%}
</style>
</head>
<body>
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</body>
</html>
The body element has a paragraph, which has text. From the style sheet, we see that the first line is indented by 10%. This is 10% of the paragraph width. From the style sheet, the width of the paragraph is 50% the width of the body element.
Note: some browsers may interpret the 10% wrongly, as 10% of the element (body) containing the paragraph, instead of 10% of the Paragraph element itself.
The text-align property is used to Left Justify, Right Justify, Center Justify or Double Justify text in an html containing element. You should know what these terms mean from your word processor lessons. The alternative text-align values are as follows:
left
For left Justification.
Right
For right Justification.
center
For center Justification.
justify
For double Justification.
The following code gives an example for double justification:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {width:50%; text-align:justify}
</style>
</head>
<body>
<p>
I am a man. You are a woman. What is his name? Is he the man we saw with the blue jacket in the party? Many people of this town use this street. Today is a bright day. Could this mean some good luck in my endeavors? There are about 400 countries in the world. With the advance of technology the world keeps becoming relatively smaller and smaller.
</p>
</body>
</html>
Try the above code if you have not already done so, and note that the text lines flush to the left and right ends of the Paragraph (rectangular) element. Replace the value, “justify” with “left” and then “right” and then “center” to see the effect.
Text Decoration deals with underlining of text, over-lining (opposite of underline) of text, drawing a line across text and making a text to blink. To achieve any of these options, you need the “text-decoration” property and any of the following values; each value gives its particular effect:
none
Produces no text decoration; this is the same as in the case where the “text-decoration” property is absent.
underline
Each line of text in the element (containing element) is underlined
overline
Each line of text in the element (containing element) has a line above it.
line-through
Each line of text in the element (containing element) has a line through the middle
blink
Text in the element (containing element) blinks (alternates between visible and invisible).
The following shows an underlining example for a span element:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
span {text-decoration:underline}
</style>
</head>
<body>
<p>
In Europe, Football is a very important sport. <span>Good players</span> are extremely rich.
</p>
</body>
</html>
The following example would show an h4 heading blinking.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h4 {text-decoration:blink}
span {text-decoration:underline}
</style>
</head>
<body>
<h4>Act Now!</h4>
<p>
In Europe, Football is a very important sport. <span>Good players</span> are extremely rich. Act now by sending your kid to a football school.
</p>
</body>
</html>
Try the above two examples if you have not already done so. In the last example, there are two CSS rules: one for h4 and one for span. The number of rules you can have in your style sheet can be very big; here we have just two.
Sometimes you would want to space out the characters (letters) of a Heading or span element or some other element. You use the “letter-spacing” property. This is followed of-course by a colon, then a length value. There are three common CSS units: the pixel, the percentage and the em. Here, use the em unit (see meaning later). The following example shows the spacing of characters of an h3 element of 0.2em and of a span element of 0.1em (try the code):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h3 {letter-spacing:0.2em}
span {letter-spacing:0.1em}
</style>
</head>
<body>
<h3>Section Two</h3>
<p>
In this section, we look at the second problem affecting life in the <span>University</span>.
</p>
</body>
</html>
Word Spacing
Instead of separating characters, you can separate words. You use the “word-spacing” property followed of-course by a colon, then a length value measured in em. You can still use some other unit, but em would do. Nothing stops you from combing letter and word spacing. When you separate the characters of words in a phrase, you would have to separate the words, so that the separation between characters should not be the same as the separation between words. The following example illustrates this for the phrase in an H3 element (try the code).
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h3 {letter-spacing:0.2em; word-spacing:1em}
</style>
</head>
<body>
<h3>Section Two</h3>
<p>
In this section, we look at the second problem affecting life in the University….
</p>
</body>
</html>
The first CSS rule property above separates the characters and the second one separates the words. Note that a space of 0.1em for letter spacing is not the same as a space of 0.1em for word spacing. Also note that for letter and word spacing we have used decimal (less than 1) values for the length value and not whole numbers.
You might want all the letters of a phrase to be in uppercase or in lowercase. You might also want only the first letter of each word to be in uppercase while the rest of the letters are in lowercase. All this is the text transformation feature. You need the text-transform property for this. This is of course followed by a colon and then a value. You have to choose one of the following values:
uppercase
This value puts all the characters of the containing element in uppercase.
lowercase
This value puts all the characters of the containing element in lowercase.
capitalize
This value puts the first character of each word in the containing element in uppercase.
none
No transformation effects. Same as if you did not have the text-transform property.
The following code shows the use of two of these values (try the code):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h4 {text-transform:capitalize}
span {text-transform:uppercase}
</style>
</head>
<body>
<h4>a summary of john smith biography</h4>
<p>
<span>John Smith</span> was born in 1930. His parents ...
</p>
</body>
</html>
Wow, if you have read through the series from the beginning to this point, then you are beginning to get the feel of presentation with CSS.
Let us stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT