Welcome back to Knowledge City's course on Cascading Style Sheets. I'm Cliff Brozo, and today we're going to talk all about aligning text. Now, everybody knows about centering text and making it left aligned and right aligned. But we're also going to talk about padding and spacing and how we can move things around on the web page to make them not only look more attractive, but to put them in the spot where we need them to be. Aligning text to the left center and right is really pretty easy. There is a text align feature in CSS that allows us to specify left center, right, or justify. And I'm sure that you've used word processing software before, and you know that left aligned text has a straight margin along the left side. Centered text looks just that is centered. Text that is right aligned has a right straight margin, and justified text looks nice except when it doesn't. Sometimes the word processor inserts more space than we really want in order to make the line fit. And as you can see down at the bottom of the paragraph, adding too much space makes it look strange. When we have aligned text, we always have to decide what to do with the last line of the paragraph. How should it look? Should it be the same as what the paragraph is? Should it be going left if the direction is left to right? And should it be on the right if the direction is right to left? For example, if you're right aligning text, should that last line also be right aligned? And do we decide to put it at the end, meaning that if it's going from left to right, it's the same, and if it's going from right to left, it's the same. Lots of times we would like to turn text on its side. Vertical text can be very useful. However, you should be careful because if you overdo it, it looks really bad. There are times where we want to put boxes on the screen, and we want to put text inside those boxes. One way is to have the text right up against the border of the box. Another way is to put some padding around the text so that the text does not appear right up against the wall of the box. We will look at both of these styles. The text decoration feature gives us the ability to put lines above and below text. We can put lines through the text. And as you can see over here, we have some underlining. We have some overlining, and we have a line that goes through the text. Most browsers, but not Internet Explorer or Edge, allow us to do some fancy things with the lines with the lines that we're producing above and below. We can put wavy lines. We can put dotted lines. We can put double lines. We can put dashed lines. And we can change the color of these lines. Now on the bottom half of this screen, you might say to yourself, oh, he took an image and just resized it smaller and smaller and smaller. But that's not true. Instead, what I've done is create something called flex sizing. And as the browser window changes, the size of the boxes will also change. I'll draw your attention to the space in between knowledge and city here. And it's just the same as each individual letter. When I squeezed the browser a bit, this space got smaller and smaller. And as I change the browser window, each of the boxes wound up shrinking in width. We'll see how to go about doing that. There are times where you would like to put a box on the screen, a color box, and put some text in it. And we can specify the maximum width of a box. And a good thing to know is if there's a max anything, most likely there's a min as well. And if we're talking about width, most likely we also can talk about height. So I have a max height, a max width, a min height, a min width, and a regular height and a regular width. When we're talking about putting things on a page, we like to think in boxes. The outside box is the margin of the page. Typically the margin of the page is white space, but it would be the same as whatever the background color the page has. We can then have a border. Inside the border, we will have some padding, which is also space, and then some content for whatever we're trying to show on that page. We are able to position text in different locations on the screen. There is static positioning, which is the default where the text is normally placed on the screen. We can use relative text to indent paragraphs. We can use fixed text, which will not move when you scroll the screen. We can use absolute text, which is similar to fixed text, except that when you do scroll, the text disappears. And we can use sticky text that will stay put even when you're scrolling through long text passages. Let's recap what we're about to learn. We talked about alignment, left center, right, and justify. We talked about the orientation of text where we can make it vertical and we could put spacing around it. That space can have padding, regular spacing. It can be centered. We can decorate text by putting lines above and below through. We talked about putting boxes that change in size, and we talked about margins and borders. And finally we discussed positioning, static and relative positioning, fixed and absolute positioning, and sticky positioning. I hope you'll join me for the coding part of the lesson. See you soon.
