Tutorial 4 Formatting Text

XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a spread heading Indent text Change the line spacing Change text capitalization

XP Objectives 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 CSS3

XP Using 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, 2e4

XP Using CSS to Format Text New Perspectives on Blended HTML, XHTML, and CSS, 2e5

XP Using 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, 2e6

XP Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e7

XP Using the Text Properties The text-align property aligns text horizontally – Left (the default) – Center – Right – Justify New Perspectives on Blended HTML, XHTML, and CSS, 2e8

XP Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e9

XP Using 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, 2e10

XP Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e11

XP Using 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, 2e12

XP Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e13

XP Using 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, 2e14

XP Creating 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, 2e15

XP Creating and Using Classes Independent classes format several XHTML element selectors in the same way New Perspectives on Blended HTML, XHTML, and CSS, 2e16

XP Creating 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, 2e17

XP Creating Pseudo-Elements New Perspectives on Blended HTML, XHTML, and CSS, 2e18

XP Creating 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, 2e19

XP Using 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, 2e20

XP Changing 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, 2e21

XP Changing 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, 2e22

XP Changing 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, 2e23

XP Changing 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, 2e24

XP Changing the Appearance of Lists A marker appears to the left of the list item text New Perspectives on Blended HTML, XHTML, and CSS, 2e25

XP Changing the Appearance of Lists The vertical-align property positions images and other elements vertically with text New Perspectives on Blended HTML, XHTML, and CSS, 2e26