Tutorial 4 Formatting Text

1. Tutorial 4Formatting Text

2. Objectives • Create a spread heading • Indent text • Change the line spacing • Change text capitalization New Perspectives on Blended HTML, XHTML, and CSS

3. 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 CSS

4. 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, 2e

5. Using CSS to Format Text New Perspectives on Blended HTML, XHTML, and CSS, 2e

6. 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, 2e

7. Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e

8. 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, 2e

9. Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e

10. 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, 2e

11. Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e

12. 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, 2e

13. Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS, 2e

14. 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, 2e

15. 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, 2e

16. Creating and Using Classes • Independent classes format several XHTML element selectors in the same way New Perspectives on Blended HTML, XHTML, and CSS, 2e

17. 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, 2e

18. Creating Pseudo-Elements New Perspectives on Blended HTML, XHTML, and CSS, 2e

19. 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 selectoris an element in the document and classis a dependent class. • To apply a style to the first line of an element, use the following syntax: selector.class:first-line where selectoris an element in the document and classis a dependent class. New Perspectives on Blended HTML, XHTML, and CSS, 2e

20. 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, 2e

21. 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, 2e

22. 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, 2e

23. 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, 2e

24. 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, 2e

25. Changing the Appearance of Lists • A marker appears to the left of the list item text New Perspectives on Blended HTML, XHTML, and CSS, 2e

26. 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, 2e