Percentages

We can also define number values more fluidly with percentage units, 0:00 because percentages by nature are always relative to something else. 0:04 [SOUND] When we use a percentage unit in CSS, 0:08 [SOUND] the percentage value is measured relative to a parent element's length. 0:10 So, it adjusts based on the parent element. 0:15 Many properties like width, margin, and 0:18 padding use percentages, and they're commonly used for 0:20 layout since they allow fluid sizing of elements relative to their container. 0:23 So, for example, if we go back to our work space, and in our CSS file. 0:28 If we change our main header elements width value to 50%. 0:33 When we save our style sheet and take a look at it in the browser, 0:38 notice how the header takes up half the browser's window width. 0:44 And if we resize the browser window, 0:48 notice how the header width adjusts according to the browser window's width. 0:51 And if we go back to our main-header rule, and give it a left margin and percentages, 0:57 so let's say margin-left, and we'll set the value to 10%. 1:03 When we save our style sheet and take a look at it again. 1:09 Notice the left margin gap that's taking up 10% of the full browser width. 1:15 But in our case, moving forward, we still want the main header width to 1:21 take up 100% of the browser width, and the left margin to be 0% or 0. 1:26 So we can actually go back and omit these properties for now. 1:31 But we're gonna revisit them later in the next stage on layout. 1:36 But what we will do is resize our primary content and secondary content divs with 1:41 a percentage, since we don't want them to span the width of the full browser. 1:47 That makes the content a little too difficult to read since it's so wide. 1:51 So first, to target both elements with one rule, 1:57 we're able to group multiple selectors, we just need to separate them with a comma. 2:02 So to select both the primary content and 2:07 secondary content classes, we'll write the primary-content class first. 2:11 Followed by a comma and a space. 2:19 Then right after that, we can target the secondary-content class. 2:21 [BLANK_AUDIO] 2:26 And I'm actually gonna bring the secondary-content class 2:33 below the primary-content class, just to keep things a little more readable. 2:37 And now, in the declaration block, 2:41 we're going to add a width property, and set the value to 60%. 2:44 So now let's go ahead and save our style sheet, and bring up the browser preview. 2:49 And when we refresh the page, 2:54 you can see that the main content areas now take up 60% of the browser width. 2:56 Finally, we can also use percentages for font sizes, 3:03 where the size of the text is directly related to the font size of its parent. 3:06 For instance, if we go back to our style sheet, and 3:11 if we target all paragraphs on the page with the p element selector. 3:14 Then set the font-size to 150 percent. 3:21 The font size of all paragraphs should now be 1.5 3:28 times larger than the default body text of 16 pixels. 3:32 So when we save our style sheet and take a look at again in the browser. 3:36 We can see how every paragraph's text size increase to a font 3:42 size equivalent to 24 pixels. 3:46 And if we go back to our style sheet and remove the font-size declaration from 3:49 the paragraph rule, I'm actually gonna get rid of the entire rule. 3:54 Then scroll up and apply it to the body element instead. 3:58 When we save and take a look at it again in the browser, 4:05 now all the text in the body's descendant elements increase in size. 4:09 All except for 4:13 those elements that have fixed pixel based font sizes, like our headings. 4:14 So again, percentages are a really flexible unit for 4:19 creating scalable content, and we'll see more of them in the next stage, 4:23 where we'll shape the actual layout of our page. 4:27 Next, we're gonna learn about a relative unit that's more suitable for font sizing. 4:30