Tutorial 4
Formatting Text
Objectives
•
•
•
•
XP
Create a spread heading
Indent text
Change the line spacing
Change text capitalization
New Perspectives on Blended HTML, XHTML, and CSS
2
Objectives
XP
• 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
Using CSS to Format Text
XP
• 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
Using CSS to Format Text
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
5
Using the Text Properties
XP
• 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
Using the Text Properties
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
7
Using the Text Properties
XP
• The text-align property aligns text horizontally
– Left (the default)
– Center
– Right
– Justify
New Perspectives on Blended HTML, XHTML, and CSS, 2e
8
Using the Text Properties
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
9
Using the Text Properties
XP
• 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
Using the Text Properties
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
11
Using the Text Properties
XP
• The text-transform property can change the
case of text
– Uppercase
– Capitalize
– Lowercase
– None
New Perspectives on Blended HTML, XHTML, and CSS, 2e
12
Using the Text Properties
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
13
Using the Text Properties
XP
• 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
Creating and Using Classes
XP
• 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
Creating and Using Classes
XP
• Independent classes format several XHTML element selectors in
the same way
New Perspectives on Blended HTML, XHTML, and CSS, 2e
16
Creating Pseudo-Elements
XP
• 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
Creating Pseudo-Elements
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
18
Creating Pseudo-Elements
XP
• 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
Using Pseudo-Class Selectors
XP
• 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
Changing the Appearance of Lists
XP
• 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
Changing the Appearance of Lists
XP
• 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, upperroman, lower-alpha, and
upper-alpha)
New Perspectives on Blended HTML, XHTML, and CSS, 2e
22
Changing the Appearance of Lists
XP
• 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
Changing the Appearance of Lists
XP
• 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
Changing the Appearance of Lists
XP
• A marker appears to the left of the list item text
New Perspectives on Blended HTML, XHTML, and CSS, 2e
25
Changing the Appearance of Lists
XP
• The vertical-align property positions images and
other elements vertically with text
New Perspectives on Blended HTML, XHTML, and CSS, 2e
26