CSS is accepted as the standard for defining the presentation of content in HTML pages. This session explains about text formatting and styling of text
6.3 Inline Span
Concepts
Session 6
Formatting Using Style Sheets
Figure 6.5 displays a CSS code that specifies the text properties for the BODY and H3 elements. The word-spacing property is set to 2px for the BODY element. This will display each word by leaving a distance of two pixels. The text-decoration property is set to underline for the H3 element. This will underline the heading in the Web page.
Figure 6.5: CSS Code of text-decoration Property Figure 6.6 shows an output of heading tag with underline.
Figure 6.6: Output of Heading Tag with Underline
In figure 6.6, the header is underlined and each word in the header and the paragraph is displayed by leaving a distance of two pixels between them.
6.3 Inline Span
The <span> tag groups inline-elements in a document. For example, if one word in a sentence need to be bold or colored without using the <b> tag then a <span> tag is used which can be present within an existing tag.
Code Snippet 1 demonstrates CSS inline style for <span> tag.
Code Snippet 1:
<p>My mother has <span style=”color: lightblue”>light blue</span>
eyes.</p>
Or
<span class=”eyesonly”>light blue</span>
Code Snippet 2 demonstrates CSS external style for <span> tag.
Code Snippet 2:
.eyesonly {font-color: lightblue}
Concepts
Session 6
Formatting Using Style Sheets
The span tag has different attributes; it supports JavaScript event attributes also. Table 6.8 lists different attributes and values used in <span> tag.
Attribute Value Description
class classname It is used in specifying the text direction for the content in an element.
dir rtl
ltr
It is used in specifying the text direction for the content in an element.
id id It is used in specifying a unique id for an element.
lang language_code It is used in specifying a language code for the content in an element.
style style_definition It is used in specifying an inline style for an element.
title text It is used in specifying extra information about an element.
xml:lang language_code It is used in specifying a language code for the content in an element, in XHTML documents.
Table 6.8: Different Attributes and Values Used in <Span> Tag
6.3.1 Indenting Paragraph
Indenting is the process of setting off the text from its normal position, either to the left or to the right. In paragraph style, there are three types of indentation:
First line indent - The text–indent property is used in the CSS for indenting the first line of a paragraph. Code Snippet 3 demonstrates inline style for <p> tag and an internal CSS code for first line indent.
Code Snippet 3: Inline style
<p style=”text-indent: 50px”>
Internal CSS
p {text-indent: 50px}
Concepts
Session 6
Formatting Using Style Sheets
Code Snippet 4 demonstrates the use of the text–indent property in the HTML file.
Code Snippet 4:
<!DOCTYPE HTML>
<html>
<head>
<title>Font Gallery</title>
<style>
p {text-indent: 150px}
</style>
</head>
<body>
<p>The font styles properties allow you to specify the font for the text. They allow you to change the different font attributes of the text such as font, size, and style of the text. The browser must support the font specified by the font properties.
Otherwise, it will display the default font, which is dependent on the browser.
</p>
</body>
</html>
Figure 6.7 shows the output of text-indent property.
Figure 6.7: Output of text-indent Property
Padding - The padding property is used to add a specified amount of space between the border of an element and its contents.
Concepts
Session 6
Formatting Using Style Sheets
Code Snippet 5 demonstrates the inline style for <p> tag and an internal CSS code for padding property.
Code Snippet 5: Inline style
<p style=”padding: 20px”>
Internal CSS p {padding: 20px}
Code Snippet 6 demonstrates the use of the text–indent property in the html file.
Code Snippet 6:
<!DOCTYPE HTML>
<html>
<head>
<title>Font Gallery</title>
<style>
p {padding: 20px }
</style>
</head>
<body>
<p>The font styles properties allow you to specify the font for the text. They allow you to change the different font attributes of the text such as font, size, and style of the text. The browser must support the font specified by the font properties.
Otherwise, it will display the default font, which is dependent on the browser.</p>
</body>
</html>
Figure 6.8 shows the padding property.
Concepts
Session 6
Formatting Using Style Sheets
Margin - The margin property is used to add a specified amount of white space around an element, on the outside of the element.
Code Snippet 7 demonstrates the inline style for <p> tag and an internal CSS code for margin property.
Code Snippet :
Inline style
<p style=”margin: 20px”>
Internal CSS p {margin: 20px}
Figure 6.9 shows the output of margin property.
Figure 6.9: Margin Property