Tutorial 4

Formatting Text

XP

New Perspectives on Blended HTML, XHTML, and CSS 2

Objectives• Create a spread heading• Indent text• Change the line spacing• Change text capitalization

XPObjectives• Identify the differences between dependent and

independent classes• Use classes to style several elements• Apply classes to text• Create pseudo-elements and pseudo-classes

New Perspectives on Blended HTML, XHTML, and CSS 3

XPUsing CSS to Format Text• CSS provides formatting for a document– Setting the line spacing– Indenting text to create a tab indent– Setting margins

New Perspectives on Blended HTML, XHTML, and CSS, 2e 4

XPUsing CSS to Format Text

New Perspectives on Blended HTML, XHTML, and CSS, 2e 5

XPUsing the Text Properties• The letter-spacing property controls the amount

of white space between letters– Also known as kerning

• The word-spacing property controls the amount of white space between words

• Letter spacing and word spacing are commonly used together to create a spread heading, in which the letters of one word or several words are spaced apart.

New Perspectives on Blended HTML, XHTML, and CSS, 2e 6

XPUsing the Text Properties

New Perspectives on Blended HTML, XHTML, and CSS, 2e 7

XPUsing the Text Properties• The text-align property aligns text horizontally– Left (the default)– Center– Right– Justify

New Perspectives on Blended HTML, XHTML, and CSS, 2e 8

XPUsing the Text Properties

New Perspectives on Blended HTML, XHTML, and CSS, 2e 9

XPUsing the Text Properties• The text-indent property indents the first line of

paragraph text• The line-height property is used to change the

line spacing– For example, single spacing to double spacing

New Perspectives on Blended HTML, XHTML, and CSS, 2e 10

XPUsing the Text Properties

New Perspectives on Blended HTML, XHTML, and CSS, 2e 11

XPUsing the Text Properties• The text-transform property can change the

case of text– Uppercase– Capitalize– Lowercase– None

New Perspectives on Blended HTML, XHTML, and CSS, 2e 12

XPUsing the Text Properties

New Perspectives on Blended HTML, XHTML, and CSS, 2e 13

XPUsing the Text Properties• The text-decoration property is used to insert a

line above, through, or under text– underline– overline– line-through– blink– none

New Perspectives on Blended HTML, XHTML, and CSS, 2e 14

XPCreating and Using Classes• Class selectors format several instances of one or

more elements– Dependent classes style a particular element– Independent classes style any element

• Code for the crucial dependent class for the em element:

New Perspectives on Blended HTML, XHTML, and CSS, 2e 15

XPCreating and Using Classes• Independent classes format several XHTML element selectors in

the same way

New Perspectives on Blended HTML, XHTML, and CSS, 2e 16

XPCreating Pseudo-Elements• A pseudo-element formats a part of text that does not

directly relate to an XHTML element selector– :first-letter pseudo-element– :first-line pseudo-element

New Perspectives on Blended HTML, XHTML, and CSS, 2e 17

XPCreating Pseudo-Elements

New Perspectives on Blended HTML, XHTML, and CSS, 2e 18

XPCreating Pseudo-Elements• Styling Pseudo-Elements– To apply a style to the first letter of an element, use the

following syntax:selector.class:first-letter

where selector is an element in the document and class is a dependent class.

– To apply a style to the first line of an element, use the following syntax:selector.class:first-line

where selector is an element in the document and class is a dependent class.

New Perspectives on Blended HTML, XHTML, and CSS, 2e 19

XPUsing Pseudo-Class Selectors• The link pseudo-class selectors expand on the

concept that visitors to your Web site benefit from visual cues about the link state– a:link– a:visited– a:hover– a:active

New Perspectives on Blended HTML, XHTML, and CSS, 2e 20

XPChanging the Appearance of Lists• To specify the format of a list, enter the following code

where you want the list to appear:ul {

list-style-property: value;• Use the following properties to set the appearance of

the list:– list-style-type– list-style-image– list-style-position– list-style

New Perspectives on Blended HTML, XHTML, and CSS, 2e 21

XPChanging the Appearance of Lists• The list-style-type

property changes the appearance of the default solid bullet for unordered lists (disc, circle, or square), and the listing method for ordered lists (decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha)

New Perspectives on Blended HTML, XHTML, and CSS, 2e 22

XPChanging the Appearance of Lists• The list-style-position property changes the

position of the bullet included with a list

• The list-style-image property changes the bullet to a graphic image

New Perspectives on Blended HTML, XHTML, and CSS, 2e 23

XPChanging the Appearance of Lists• The list-style property is the shorthand property

to set the list-style-type, the list-style-image, and list-style-position

New Perspectives on Blended HTML, XHTML, and CSS, 2e 24

XPChanging the Appearance of Lists• A marker appears to the left of the list item text

New Perspectives on Blended HTML, XHTML, and CSS, 2e 25

XPChanging the Appearance of Lists• The vertical-align property positions images and

other elements vertically with text

New Perspectives on Blended HTML, XHTML, and CSS, 2e 26