Managing Text in CSS

Transcript

Hey. Welcome back. 

The content at the top of my page is starting to look like the content I showed you on the final version of my page. We are making progress!

But there are some clear differences. The heading is in the center of the page. There's a short little message below the heading that summarizes what the page is about. And there seems to be more space between the lines in my paragraphs. We need to fix these.

Let start by learning how to center text, using the text align property. Text align tells a tag where to position its text and can do so with three values: Left, right, or center. But you'll never use text align right because it looks weird. Alert! Alert! Alert! Code garbage. 

Tags have text align left by default. That's why their text fills the page from left to right. But I'll need to give my heading the text align value center.  Watch, I'll retype my heading. See how the text starts from the center and slowly fills up the page in both directions. This keeps the text sandwiched in the middle of the page. 

Right below my H1, I have a paragraph tag with the text “Help a friendly bunch of pets find homes”. This is called a welcome message. It's usually at the top like this. And it should describe the webpages purpose in as few words as possible.

Notice that I gave my welcome message the text align center style too. It's common to use text align center for short phrases or headings.  But if the heading is right above a long paragraph, it's better to keep the heading left aligned. This way the text is lined up nicely. 

Most paragraphs should be text aligned left because this is how we're used to reading books. Here's an example with a left line paragraph.  And here's an example with a center line paragraph. See that Jagged Edge --  yikes! 

For the last change to my page, I'm going to put some space between the lines in the paragraph under the Our Pets heading. To do so I'll need the line height property. Let's look at two sentences in the paragraph. Line height put space between the bottom of sentence one and the top of sentence two. 

Line height takes a number value and I suggest a value between 1.4 and 1.6 for your paragraphs. As the number gets bigger, it spaces them out more and the value between 1.4 and 1.6 spaces than just enough to make a text easier to read. I used 1.4 for the paragraphs on my page.

Let's quickly review what we've learned. 

You can use text align to position text. Either values center or left can be used for headings in short sentences. But left should be used for long pieces of text.  You can use a Welcome Message to help users quickly understand what your page is all about.  And line height between 1.4 and 1.6 for your paragraphs can make them easier to read.

Lets continue with styling text in the next lesson.

I’m looking forward to it!