CSS Text Basics
CSS Basics – Part 4
CSS Course
Foreword: In this part of the series, I give you some word processing features that CSS offers.
By: Chrysanthus Date Published: 15 Dec 2015
Introduction
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 (px). If you use a percentage value, the value will be relative to the width of the element that has the text. A pixel is the smallest dot on the screen. Try the following code, which illustrates this in px:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {width:50%; text-indent:100px}
</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 100px. The width of the paragraph is 50% the width of the body element.
Text Alignment
The text-align property is used to Left, Right, Center or Justify alignment of 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 Justification.
The following code gives an example for 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 code 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 with 0.2em and of a span element with 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 combining 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 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 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 appreciate presentation with CSS.
Let us stop here and continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT