Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
To control the size of your fonts you'll use the aptly named font size property. You know for the most part controlling the size of text is pretty straight forward, but there are some things to consider when deciding on which unit of measurement to use. So I want to take a look at not only the property but those considerations as well. Let's go ahead and open up the font-size.htm and you can find that in the 04_03 folder. Pretty basic page, kind of somewhat what we've been using before, we have an article with a heading and a couple paragraphs inside of it and not much else going on. And then we have some basic generic styles going on up in the head of the document.
So I want to focus on the heading and the paragraph first and take a look at using the font-size property. I am just going to create a new rule for heading one and inside that I want to use font-size and I want to set that to a value 24 pixels. I will do the same thing for my paragraph. I will create a paragraph rule, and we will do font-size, and let's take that to 16 pixels. So if I Save this and I preview this in one of my browsers, there is my text sized exactly the way that I wanted it to.
Right now, it's using the sort of absolute value of pixels, but there are a lot of different units of measurement that you can use for this. So if I go back to my code, one of the first things I want to explore is using keywords. So there are reserve keywords for font- size and it starts all the way down at xx-small, it goes all the way up to xx large. So if I am on h1 I could do xx-large for heading one, and for paragraphs we will do xx-small. So if I Save this, go back to my page and preview that, you can see the relationship that I have got here now, very large heading, very small text sizing.
This goes all the way from x-large to x- small, then we have large and small and then finally we just have medium in terms of reserve keywords. You can see they are exactly the same size, we just have our heading Bold at the moment. So essentially we have xx small, x small, small, medium large, x large and xx large. There are 7 reserved keywords and if you are one of those people that can remember all the way back to using the font tag in the early days of HTML, we had a font-size property, that we could set a number between one and seven.
There's a little bit of correspondence between those keywords and sort of those reserved size for fonts. Essentially, the specification recommends a scaling factor from one keyword to another. So it's really up to the user agents to determine what size to make these. So don't expect them to be the same size in every single browser, if you start using those keywords. Okay I want to take a look, we have used some absolute values and we have used some reserve keywords. I want to take a look at using relative units of measurement. Now we all know browsers have default style sheets that apply.
So the h1 and the paragraph elements, those already have a default size that is set within the browser. Any time I use this property I am overriding that. Well the default size that they have within the browsers is using a relative unit of measurement like ems. I want to take a look at how ems work. So if I go to my font-size for my heading and I say 1.8em and for paragraph I say 1em, if I save this and preview this on my browser again, I get the sort of relationship between my text. My heading is a good bit larger 1.8 times what my paragraph would be because my paragraph is at 1em.
1em is essentially telling the user agent, okay, just give me whatever your default font size may be. 1.8em is the headings way of saying, well give me slightly larger than that. Give me 1.8 times what that would be. So that value is going to be calculated. Now the value is calculated based on the parent element wherever the font size of the parent element may be. Since we don't have a font-size set on body, what our header and paragraph are doing is, they are just going after the user agent and saying, okay, I didn't see any font-sizes set what are your default sizes? Now we can change that, if I go into the body, for example, and I choose to apply a font-size here, I have a couple of options.
One, I could use a relative unit of measurement. Now if I did that, let's say I do something like 2em and I save this and I preview it. We still have the same relationship but man, it is a lot bigger right. Well the reason that this happens with the body when it uses the relative unit of measurement, it is first going out to the user agent and it's saying what's your default font size? For most browsers, the default font size is initially set to 16 pixels unless the user changes it that's pretty much where it sits. So as a designer you can use that size as more of a baseline for sizing your text.
So 2em is basically saying okay the default font-size is 36 pixels. That 36 pixels is being passed down to our paragraph, and then the heading is getting 1.8 times that. Maybe a better way to look at working with body is to use percentages instead. So if I come into body and I use say 120 % and I save and I test that and that's essentially again asking the user agent, hey, give me whatever your default font size is, give me 120% of that.
That also means that if I lower that and I go to say 90%, Save that, everything sort of scales down. This is the beauty of using ems. Whether it's the user scaling things up or down or whether it's in this case the body tags scaling things up or down, the relationship between these two elements remains the same. That means that whether you're looking at this on a mobile device or looking at it on a desktop browser the relationship between those two elements size wise is exactly the same. Now I mentioned that users have just as much control over this.
So if I get rid of the font-size on the body and Save this, and I go back to my browser again, it's giving the default font-size from the user agent itself. If I go into my Preferences and I go into the content tab notice that I have a default font and I have a default size and that is indeed set to 16 pixels. Well if I'm having a hard time reading the page, I might go in and change that default, so if I grab this and I go up to say 20 pixels, notice that the fonts on the page immediately change and scale up a little bit to represent that. If I go down and size it scales down accordingly as well.
So that's one of the other great things about using a relative unit of measurement like ems if the user has their user agent set to a larger or smaller size based on their personal preferences while the size of the text might change the relationship between the elements won't. So again, font-size property pretty easy to use, no really weird syntax going on there but when developing a sizing strategy for your site you need to think about whether you want to use a absolute size like those pixels or use relative units of measurement like we are using here to establish relationships between the elements while letting the body selector or the device itself define that baseline font-size.
There isn't really one answer for that it's all going to depend upon the specific goals of each project.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.