⌊ K™¦krizzna.web.id ⌉
Sekedar coretan seorang nyubi
Css Text
Css Text
CSS Text
Basics of CSS2 – Part 7
Introduction
This is part 7 of my series, Basics of CSS2. In this part of the series, I give you some word processing features that CSS offers. However, it is the web designer to implement the word processing features and not the web page user. We shall talk about Text Indentation, Text Alignment, Text Decoration, Text Letters and Word Spacing, and Text Transformation.
Text Indentation
In an HTML (or XHTML) 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:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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.
Text Alignment
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:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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.
Text Decoration
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:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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. The blinking value does not work with all browsers.
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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 this 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.
Letter Spacing
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. In part 4 of these tutorials I said there are three common 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):
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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).
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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.
Text Transformation
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):
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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
To arrive at any of the parts of this series, just type the corresponding title below in the Search Box of this page and click Search (use menu if available):
Getting Started with CSS2
Style Sheet
CSS Backgrounds and Colors
CSS Box
CSS Surrounding Element Properties
CSS List
CSS Text
CSS Classification
CSS Dimensions and Resolutions
Positioning HTML Elements with CSS and Layering
Basics of CSS Fonts
Pseudo-Elements
Pseudo-Classes
Basics of CSS Selectors
Written by Chrys
Find More Css Articles
Tags: Text
Recent Comments