Boxing the Undead: Using the CSS Box Model

6 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $99.99
You save:  $30
List Price:  €92.99
You save:  €27.89
List Price:  £78.38
You save:  £23.51
List Price:  CA$137.45
You save:  CA$41.24
List Price:  A$151.16
You save:  A$45.35
List Price:  S$135.19
You save:  S$40.56
List Price:  HK$780.93
You save:  HK$234.30
CHF 62.75
List Price:  CHF 89.64
You save:  CHF 26.89
NOK kr746.44
List Price:  NOK kr1,066.40
You save:  NOK kr319.95
DKK kr485.47
List Price:  DKK kr693.57
You save:  DKK kr208.09
List Price:  NZ$162.71
You save:  NZ$48.82
List Price:  د.إ367.26
You save:  د.إ110.18
List Price:  ৳11,754.54
You save:  ৳3,526.71
List Price:  ₹8,355.11
You save:  ₹2,506.78
List Price:  RM471.70
You save:  RM141.52
List Price:  ₦148,504.56
You save:  ₦44,555.82
List Price:  ₨27,850.05
You save:  ₨8,355.85
List Price:  ฿3,667.15
You save:  ฿1,100.25
List Price:  ₺3,237.21
You save:  ₺971.26
List Price:  B$536.56
You save:  B$160.98
List Price:  R1,860.71
You save:  R558.27
List Price:  Лв181.88
You save:  Лв54.57
List Price:  ₩137,529.28
You save:  ₩41,262.91
List Price:  ₪370.54
You save:  ₪111.17
List Price:  ₱5,857.18
You save:  ₱1,757.33
List Price:  ¥15,730.09
You save:  ¥4,719.50
List Price:  MX$1,865.18
You save:  MX$559.61
List Price:  QR364.73
You save:  QR109.43
List Price:  P1,372.24
You save:  P411.71
List Price:  KSh12,798.72
You save:  KSh3,840
List Price:  E£4,765.16
You save:  E£1,429.69
List Price:  ብር5,766.54
You save:  ብር1,730.13
List Price:  Kz85,491.45
You save:  Kz25,650
List Price:  CLP$92,315.76
You save:  CLP$27,697.50
List Price:  CN¥710.65
You save:  CN¥213.21
List Price:  RD$5,945.67
You save:  RD$1,783.87
List Price:  DA13,466.25
You save:  DA4,040.28
List Price:  FJ$223.74
You save:  FJ$67.13
List Price:  Q777.11
You save:  Q233.15
List Price:  GY$20,940.43
You save:  GY$6,282.75
ISK kr9,731.40
List Price:  ISK kr13,902.60
You save:  ISK kr4,171.20
List Price:  DH993.14
You save:  DH297.97
List Price:  L1,776.17
You save:  L532.90
List Price:  ден5,723.02
You save:  ден1,717.07
List Price:  MOP$804.80
You save:  MOP$241.46
List Price:  N$1,868.71
You save:  N$560.67
List Price:  C$3,682.58
You save:  C$1,104.88
List Price:  रु13,372.54
You save:  रु4,012.16
List Price:  S/378.41
You save:  S/113.53
List Price:  K389.58
You save:  K116.88
List Price:  SAR375.05
You save:  SAR112.52
List Price:  ZK2,628.45
You save:  ZK788.61
List Price:  L462.80
You save:  L138.85
List Price:  Kč2,295.14
You save:  Kč688.61
List Price:  Ft36,685.32
You save:  Ft11,006.69
SEK kr732.55
List Price:  SEK kr1,046.55
You save:  SEK kr313.99
List Price:  ARS$90,190.46
You save:  ARS$27,059.84
List Price:  Bs691.24
You save:  Bs207.39
List Price:  COP$393,082.02
You save:  COP$117,936.40
List Price:  ₡53,058.41
You save:  ₡15,919.11
List Price:  L2,471.86
You save:  L741.63
List Price:  ₲752,814.07
You save:  ₲225,866.80
List Price:  $U3,886.51
You save:  $U1,166.07
List Price:  zł403.09
You save:  zł120.94
Already have an account? Log In


Okay, let's talk about fonts. So you can choose any font you want for your web page. It'll look great on your computer. But if other people don't have it, it's gonna look like undead puke. So, also, you need to be careful that changing the font without a good reason will increase the heart. Not a good idea to do unless you know what you're doing or are changing it from something else to the desired font type that's used elsewhere.

Since fonts aren't available on all systems, you should typically choose several fonts that will look similar if one isn't available. So for instance, here I have a content class and the rule font family is choosing which font we want to use. The first one that will be available as Helvetica, or that we would hope would be available is Helvetica. If that's not available, then I'll go with pradana. And if that's not available, then you can also change the font size. You can use a couple different types of units, pixels, percentages.

EMS and even a couple more. I tend to prefer EMS because their relative unit, one m is equal to the default font size. Typically that's 16 pixels. So EMS are relative units, which means that the child tags will inherit their parents font size, and the parents font size becomes the child's new default font size. So their one M is based upon the parents font size. So for instance, if a parent spot size is set to two M, and the child has also said to him, if we assume 16 pixels as the base, then the parents font size will be 32 pixels, but the child's font size will be 64 pixels because it's building two times the default size from its parent.

The benefit here is that things get bigger and smaller proportionately. So if, for instance, a user decides to change their default font size from 16 pixels to 24 pixels, or even if they go down from 16 pixels to 10 pixels or something like that, then all of the font sizes are going to change accordingly. So if we went down to 10 pixels. For instance, the parents font size would then be 20 pixels, and the child's font size would then be 40 pixels. And they're still gonna stay proportionate to what was originally set. If you set them with specific pixel numbers, they wouldn't change.

And that's not really great for the user. Because sometimes, designers can make things very small, which can be hard to read. Here's an example of a change of font size. In this case, we are changing the font size to 1.25 n, so we're upping it a little bit to about 20 pixels soon. 16 pixels was the default. Here we have the pixel version, font size 20 pixels.

And you can also use percentages, font size 125% font weights, you're probably familiar with bold, you know a heavier weight than the normal font, but there's quite a few other weights that you can use. So fonts come in many sizes and thicknesses font weight property, allows you to change this you can go from 100 to 900 increments of 100 400 as normal 700 is bold, most fonts do not have all nine weights. I would say it's a rare, rare number of fonts that have all nine, most will have at least 407 hundred, but there may be, sometimes you'll have a light and some of those sorts of things. You're also able to use the keywords normal and bold to also set them without having to remember the 407 hundred thing. So with the zombie way, here we have content font weight bold. You can also set the font weight to normal, and the equivalent in numbers here we have font weight of 700, and then finally to four.

Alright, so styling, so font style is how you italicize or italicize content from CSS. So we just font style italic sets. The font style to Italic and normal sets it back to by default, as I'm sure you've seen links are underlined in blue. Sometimes you'll want to remove the underline or even add it back. So that is used text decoration. So text decoration of none will remove the underline text decoration, underline will add it back, you can also change the color of the font.

And like changing the font family. You also want to make sure that you use this wisely and choose colors that are pleasing to the eye and not the sickly yellow green that you're probably gonna see me choose here. There are a lot of ways to set color in in CSS, we can use keywords as we saw in the last chapter, like blue and green, peach puff etc. There's also a hexadecimal notation which looks something like this. I don't even know what color that is. Don't worry, you don't have to know.

But if you know that this is a color for the hashtag before it shows you that it's a color, then you can get whatever color you want in a graphics program, then copy that hexadecimal value into your HTML in order to change the color. While the key words are helpful. They don't have nearly as many colors as the hexadecimal numbers allow for and again, as I said, anything graphics program should be able to help you get the hexadecimal value that you can then just plug into. Here's an example of setting the color to green. Here's another example using the hexadecimal notation. Notice that the hashtag is there and is required for doing hexadecimal numbers.

Alright, let's take a look at some code. All right here I just have a little paragraph that I've added a whole bunch of different things to here we have the font family, zombie killer. Being a font that does not actually exist, it's not gonna find it. So since a railway does exist on my computer, it's going to show me this in railway. If railway did not exist, as it may not on your computer, it'll choose Helvetica and if Helvetica is not available, then it'll choose some Sans Serif fonts, probably Arial but it really depends on your computer and what you're doing here we have make it bold. So I made this little thing bold to just set the puppet bold skinny text here zombie.

If you do not have real way on your computer, you're not going to see the skinnier text. Because railway is a font that happens to have multiple versions or multiple weights. So I was able to then show this as the zombie weight. Next we have normal text. So the font weight of normal insanely large text is this little guy thing. changing it to six m, you can also change things to very small so in this case, I changed the word website to just six pixels.

Oh, actually, yes, I'm sorry. This ensures that we have railway so you should still see railway within your, on your computer, even if you don't have it, because of the way that I set this up. But you can also getting back to font style, so tallix so I set this whole thing to italic. And then in the middle here I have just this word zombie that I'm making boring so I'm changing the font style but normal and it is no longer italicized. Alright, that's it for this section. Let's head on to the next

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.