Text Styles6:52 with Guil Hernandez
Text has a significant effect on how we view a web page. In this video, we'll cover common properties for defining text styles.
Let's us control the horizontal alignment of text.
Changes the case of text – whether it's uppercase, lowercase, or capitalized.
Sets the line decoration of elements. We'll commonly use this property to remove underlines in links.
Sets how thick or thin the characters are displayed.
Text has a significant effect on how we view a web page. 0:00 And CSS has several properties for defining text styles. 0:04 Many of them use keyword values, so 0:07 a lot of it is easily understandable at first glance. 0:09 So first up, 0:12 the text-align property lets us control the horizontal alignment of text. 0:14 Now, earlier, we gave our primary-content element a text-align property 0:19 to center align the content in that div, as we can see here. 0:24 Now, we also want to center align the content in our main header. 0:29 And we can do that by grouping the primary-content selector with 0:34 the main header class selector. 0:38 So I'm going to add a comma after the primary-content selector, and 0:40 right below, I'm going to target main header. 0:44 So now when we save our CSS file and refresh the browser, 0:49 we can see how the header is now nicely centered on the page. 0:54 The default value for the text-align property is left, but 0:59 text-align can accept other keyword values like right, which as we can see, 1:03 aligns our content to the right. 1:09 It also accepts the value justify. 1:11 And when we take a look at that, we can see how it gives our lines of text in 1:16 a paragraph an equal width, similar to a book or magazine alignment. 1:20 But we're gonna keep our text alignment set to center. 1:25 And remember that earlier, we set our primary and 1:29 secondary content containers' widths to 60%. 1:32 So that's why we're seeing this big whitespace area over to the right. 1:37 But we're gonna fix that soon. 1:41 Next, we can use the text-transform property to change the case of text. 1:43 So whether it's uppercase, lowercase, or capitalized. 1:48 So let's make the text in our h1 here all uppercase. 1:51 So we'll go back to our CSS file, and let's scroll up to the h1 rule. 1:56 And right under the color declaration, 2:02 we're going to add a text-transform property. 2:04 [BLANK_AUDIO] 2:08 And we're going to set the value to uppercase. 2:11 So let's save our style sheet and refresh the browser. 2:15 And we can see how that value converts the text to all uppercased letters, 2:20 even though we didn't type it that way in the HTML. 2:24 And we could also use the values lowercase and capitalize. 2:31 So go ahead and try those out to see what they do. 2:35 [BLANK_AUDIO] 2:37 We can also use the text-decoration property to 2:39 set the line decoration of elements. 2:42 And we'll commonly use this property to remove underlines in links. 2:44 So for example, let's go over to our CSS file and scroll down to our link styles, 2:48 and let's give our link rule here a text-decoration property. 2:55 So, we're gonna write text-decoration, and 3:00 we're gonna set the value to the keyword none. 3:05 So, once we save our style sheet and 3:09 refresh the browser, we can see how the underlines in our links are now gone. 3:12 [BLANK_AUDIO] 3:17 But we can also use the text-decoration property on just about any element. 3:21 So for instance, let's scroll up to our h2 rule, and 3:25 below the font size declaration, let's add a text-decoration property. 3:29 And this time, we're gonna set the value to underline. 3:36 So when we take a look at it again in the browser preview, 3:40 we can see how it adds the underline underneath the heading text. 3:44 [BLANK_AUDIO] 3:48 Finally, the font-weight property lets us set the weight style of text, so 3:51 it sets how thick or thin the characters are displayed. 3:55 Now, the two most common values the font-weight property accepts 3:58 are the keywords normal and bold. 4:02 So all headings by default are set to bold. 4:04 So if we give them a font-weight property and 4:08 set the value to normal, let's see what happens. 4:10 So we'll go over to our style.css file. 4:12 And in our h1 rule, 4:16 we're going to add a font-weight property by typing font-weight. 4:18 And then we're going to set the value to normal. 4:24 And I'm gonna go ahead and copy the declaration we just wrote. 4:27 And we're gonna paste it right below, in the h2 rule. 4:31 So now when we save our style sheet and refresh the browser, 4:36 we can see how the two headings are no longer bold. 4:40 But say we want to target all paragraphs on the page and 4:44 set their font weight to bold. 4:48 Well, let's go back to our style sheet, and 4:51 right beneath the h3 rule, let's target all paragraphs by typing p. 4:54 Then as the declaration, we're going to add a font-weight property, 4:59 and set the value to the keyword bold. 5:04 So now when we save and 5:09 take a look at it again, we have bold paragraphs all over the page. 5:10 Now, bold text is a little too difficult to read as body text, so 5:15 let's leave the font weight as the default normal value by removing this 5:19 font-weight declaration altogether. 5:23 Keep in mind that font-weight also accepts two other keyword values. 5:31 So besides normal and bold, 5:35 it also accepts the values lighter and bolder, which lightens or 5:39 darkens the font weight of a text element depending on its inherited font weight. 5:44 Now, these values will only work if the font we're 5:48 using includes those particular weights. 5:51 That's why they're not as commonly used as the normal and bold values. 5:53 And we're also able to use these numeric font-weight values listed here 6:01 of 100 to 900. 6:06 Depending on the font we use, 6:07 they give us a few more options than simply normal or bold. 6:09 So, in that numeric scale of values, the value 100 6:13 is the thinnest weight and the value 900 is the heaviest weight. 6:18 Now, 400 or 500 give us medium to normal weights. 6:24 Again, these numeric values also depend on whether or 6:29 not the font we're using can render those particular weights. 6:32 In our case, the browser's default font is not able to render many of 6:35 these numeric weights. 6:40 So we'll keep our font-weight value as normal. 6:41 To learn more about font and 6:46 text properties, make sure to also check out our course on web typography. 6:47
You need to sign up for Treehouse in order to download course files.Sign up