CSX allows many different text formatting options we've worked with some of them in the past but others
will be new to you.
We'll go through a number of them in this lecture to begin.
Please open the exercise file located in the download folder corresponding to this lesson.
Once open lets preview this file in our web browser
we can see that the file consists of a number of paragraphs of text
each block of text is contained within an open and div tag.
We also have a style sheet that contains a number of classes relevant to text formatting the classes
are contained within The Open enclosed style tags we'll go through each definition contained within
the classes to explain what they're used or the first class contains a color style declaration we've
worked with this in the past.
The color declaration will change the color of the text it is applied to.
Let's go ahead and apply this class to the first paragraph.
Now save the file and previewed in the browser
so we can see here that the first paragraph has changed the color red
the next two classes are almost identical to the first they are color declarations.
The difference is these two declarations used color codes.
The first declaration uses a web color code and the second uses an RG color code.
If you're unsure what this means.
Please review our lecture on color codes.
Let's go ahead and update our class reference to the second class.
So text color to now save the file and just refresh your browser and we can see that the color is now
green for the first paragraph.
As you probably guessed the third class will do the same thing
we'll just save that and refresh the browser and we can see that the text color is now purple
the next class has a letter spacing declaration.
This allows us to adjust the amount of space between each character in a word sentence or block of text
this declaration has a value of 10 pixels.
You can increase this value for more spacing or decrease it for less let's apply this class to the second
paragraph of text.
I'll just copy it.
So that Wade ensures I don't make any spelling mistakes when I'm entering it in
and then save the file and I'll refresh the browser.
So now we can see we have a 10 pixel space in between each character in this block of text
in addition to letter spacing.
We also have the word spacing declaration.
This allows us to adjust the spacing between words rather than letters
let's apply this declaration or sorry this class to the third paragraph.
We'll save the file and reload our browser.
So now we can see the 10 character the 10 pixel spacing between each word in this paragraph
the next class we have is the text a line plot declaration.
This allows us to align our text using left right center or justified is the value the default is left.
So let's go ahead and change this to center and see what happens.
We'll also need to apply this class to any one of the paragraphs
then we'll say that and refresh the browser so we can see the alignment is now centered.
Next we have the text declaration declaration.
We've worked with this one before.
The value of this declaration is currently underline.
Other possibilities include overlying line through and blink.
You can replace the underline with each one and apply the class to a paragraph to see the results.
We also have the text transform declaration which allows us to change text to capitalized letters.
You can also change the value to lowercase by replacing capitalized with lowercase
so we'll go ahead and apply this class.
Now we'll just refresh our browser.
There's only a couple of capital letters in this paragraph so you can see that we've switched to lower
case now
and this time I'll change it to capitals and refresh and we can we can see that the first letter of
each word is now capitalized if you want to change all the letters to uppercase characters then you
can use the uppercase
declaration
and now all the characters are uppercase.