Percentages

Transcript

You can change the width and height of a block tag with CSS. But you can't change the width and height of an inline tag as an inline tags width and height is always determined by its content. So let's look at how we can change the width of a block tag. I'm going to pull up the header from my project. I have a header, an h1 and a paragraph.

I want my header to take up about half of the page. My guess is that half the page is about 600 pixels. To change the width of a block tag like a header, you can use the width property, I'll give my header a width of 600 pixels. See how the width of its content shrunk to that's because the paragraph and heading are block tags.

So they take up 100% of the width of their parent, their parents width just change from 100% of the page to 600 pixels. That means they have a width of 600 pixels now to I kind of guesstimated that half of the page was 600 pixels. But if I really want the width of my tag to be some percentage of its parent,

I can use percentage values instead. If I replaced 600 pixels with 50% it's now exactly half the page. My next lesson, I'll begin converting my mockups into code