Tip:
Highlight text to annotate it
X
What's going on everybody? Welcome to this Tutorial on HTML5 and CSS3 my name is Jack
Jenkins and this is academy of one. Today we are going to talk about CSS text modification.
In this lecture we are going to talk about four things. First off, how do you do color
with css? Secondly, how to do size with css. Thirdly [not a word] how to do font with css.
And then I got a challenge for you. They're are three ways to do color with css. The first
way is the RGBa, which we already talked about but lets have a quick little recap. The first
three values are the r, g, b respectably, And the last one is a value from zero to one.
And that displays the opacity, or alpha. The second way to do it is via RGBHex. Now RGBHex
is the same as writing the RGB values except it is in a) hexadecimal and b) there is no
alpha. So what you see is what you get. The last way of doing it is by just saying the
name. for instance, if you want the color blue, then just type blue. Of course there
are limitations as not every color you want is going to be pre-built in the browser. Some
times you want an obscure mixture of pink yellow black and red. Which would be just
black. Much how you can measure temperature in many different units, you can measure size
with css in a plethora [good word] of units. I'm going to talk about the three most common.
Pix, em, and of course pt. px, or pixels, or picture elements are tinny tinny little
dots on your screen. They are fixed units which means no matter the size, if you're
going from a giant 60-inch TV to a small
little phone. Which can cause some issues. The next unit, em, is a scalable unit. Which
means know matter the screen size the text will scale to it. It is good, but it can have
some problems. For instance, how it works 1em is equal to the default text size. For
instance, on an h4 element, the default is 16, so when you're calling an h1 [I mean H4]
as a selector, you're going to have 1 em equal to 16, 2em equal to 32 and so on. The problem
arises when you're using IE4 or IE6 and IE4 has a different size unit [default] but hopefully
no one is using IE4 again. Please don't use IE4. The last common unit of measurement is
the pt or point and don't use this. Alright, the problem with it is 1/72 of an inch and that is bad, you know why? Because, what
if you're in Brittan and you're like "What the hells an inch, fish and chips". They don't
know what that is so don't use points stay with em or pixels. but mostly em. So here
are three different ways to use them, and note that they are all the same size. For
instance, 19px will be 1.1875em and in pt it will be 14pt. So you can change the font
by using the font-family property and the name of the font you want to have. In the
next unit [I mean video] We will be importing our own fonts. Instead of just using the browser
ones. Lets put it all together now. We have this, It's pretty nice. It's pretty cool but
it is wrong. You know why? because the font-size and the font-family can be summed up in one
property. The font property. No more having two properties [????] for one. And that brings
us to our code challenge. Practice using both em and px. try changing the browser size and
see what happens. Don't use pt. That's it for this week, tune in next week when we talk
about border, text-align and importing our own font.