1 00:00:00,640 --> 00:00:07,340 CSX allows many different text formatting options we've worked with some of them in the past but others 2 00:00:07,340 --> 00:00:08,420 will be new to you. 3 00:00:09,460 --> 00:00:13,330 We'll go through a number of them in this lecture to begin. 4 00:00:13,330 --> 00:00:18,700 Please open the exercise file located in the download folder corresponding to this lesson. 5 00:00:19,910 --> 00:00:23,210 Once open lets preview this file in our web browser 6 00:00:31,960 --> 00:00:35,560 we can see that the file consists of a number of paragraphs of text 7 00:00:43,910 --> 00:00:56,760 each block of text is contained within an open and div tag. 8 00:00:56,780 --> 00:01:04,600 We also have a style sheet that contains a number of classes relevant to text formatting the classes 9 00:01:04,600 --> 00:01:12,370 are contained within The Open enclosed style tags we'll go through each definition contained within 10 00:01:12,370 --> 00:01:22,300 the classes to explain what they're used or the first class contains a color style declaration we've 11 00:01:22,300 --> 00:01:23,640 worked with this in the past. 12 00:01:23,710 --> 00:01:27,570 The color declaration will change the color of the text it is applied to. 13 00:01:28,630 --> 00:01:32,650 Let's go ahead and apply this class to the first paragraph. 14 00:01:40,090 --> 00:01:43,470 Now save the file and previewed in the browser 15 00:01:49,350 --> 00:01:53,250 so we can see here that the first paragraph has changed the color red 16 00:02:00,690 --> 00:02:08,880 the next two classes are almost identical to the first they are color declarations. 17 00:02:08,940 --> 00:02:12,440 The difference is these two declarations used color codes. 18 00:02:13,300 --> 00:02:19,900 The first declaration uses a web color code and the second uses an RG color code. 19 00:02:19,900 --> 00:02:21,610 If you're unsure what this means. 20 00:02:21,610 --> 00:02:26,680 Please review our lecture on color codes. 21 00:02:27,060 --> 00:02:34,040 Let's go ahead and update our class reference to the second class. 22 00:02:34,390 --> 00:02:43,610 So text color to now save the file and just refresh your browser and we can see that the color is now 23 00:02:44,180 --> 00:02:45,640 green for the first paragraph. 24 00:02:49,110 --> 00:02:53,010 As you probably guessed the third class will do the same thing 25 00:02:55,980 --> 00:03:02,400 we'll just save that and refresh the browser and we can see that the text color is now purple 26 00:03:12,800 --> 00:03:18,200 the next class has a letter spacing declaration. 27 00:03:18,380 --> 00:03:24,500 This allows us to adjust the amount of space between each character in a word sentence or block of text 28 00:03:26,470 --> 00:03:29,710 this declaration has a value of 10 pixels. 29 00:03:29,710 --> 00:03:36,220 You can increase this value for more spacing or decrease it for less let's apply this class to the second 30 00:03:36,220 --> 00:03:39,630 paragraph of text. 31 00:03:39,720 --> 00:03:40,580 I'll just copy it. 32 00:03:43,020 --> 00:03:46,440 So that Wade ensures I don't make any spelling mistakes when I'm entering it in 33 00:03:50,750 --> 00:03:55,810 and then save the file and I'll refresh the browser. 34 00:03:55,810 --> 00:04:02,050 So now we can see we have a 10 pixel space in between each character in this block of text 35 00:04:14,290 --> 00:04:15,880 in addition to letter spacing. 36 00:04:15,880 --> 00:04:18,310 We also have the word spacing declaration. 37 00:04:18,340 --> 00:04:22,360 This allows us to adjust the spacing between words rather than letters 38 00:04:25,220 --> 00:04:29,900 let's apply this declaration or sorry this class to the third paragraph. 39 00:04:45,430 --> 00:04:50,990 We'll save the file and reload our browser. 40 00:04:51,050 --> 00:04:56,410 So now we can see the 10 character the 10 pixel spacing between each word in this paragraph 41 00:05:06,910 --> 00:05:13,390 the next class we have is the text a line plot declaration. 42 00:05:13,440 --> 00:05:22,660 This allows us to align our text using left right center or justified is the value the default is left. 43 00:05:22,660 --> 00:05:26,230 So let's go ahead and change this to center and see what happens. 44 00:05:32,820 --> 00:05:38,640 We'll also need to apply this class to any one of the paragraphs 45 00:05:50,200 --> 00:06:07,930 then we'll say that and refresh the browser so we can see the alignment is now centered. 46 00:06:07,940 --> 00:06:11,780 Next we have the text declaration declaration. 47 00:06:11,870 --> 00:06:13,450 We've worked with this one before. 48 00:06:13,550 --> 00:06:17,060 The value of this declaration is currently underline. 49 00:06:17,120 --> 00:06:23,480 Other possibilities include overlying line through and blink. 50 00:06:23,480 --> 00:06:29,290 You can replace the underline with each one and apply the class to a paragraph to see the results. 51 00:06:33,400 --> 00:06:41,490 We also have the text transform declaration which allows us to change text to capitalized letters. 52 00:06:41,500 --> 00:06:48,050 You can also change the value to lowercase by replacing capitalized with lowercase 53 00:06:57,260 --> 00:07:16,200 so we'll go ahead and apply this class. 54 00:07:16,240 --> 00:07:19,030 Now we'll just refresh our browser. 55 00:07:19,030 --> 00:07:26,740 There's only a couple of capital letters in this paragraph so you can see that we've switched to lower 56 00:07:26,740 --> 00:07:27,280 case now 57 00:07:46,970 --> 00:07:55,070 and this time I'll change it to capitals and refresh and we can we can see that the first letter of 58 00:07:55,070 --> 00:08:05,550 each word is now capitalized if you want to change all the letters to uppercase characters then you 59 00:08:05,550 --> 00:08:06,900 can use the uppercase 60 00:08:12,120 --> 00:08:12,810 declaration 61 00:08:19,390 --> 00:08:21,190 and now all the characters are uppercase.