Tip:
Highlight text to annotate it
X
What's going on everybody? Welcome to yet another great tutorial on HTML5 and CSS3.
My name is Jack Jenkins and this is Academy of One. Today we are going to be talking about
importing our own font. In this lecture we are going to talk about three diffrent things.
First off, we are going to be talking about importiong our font. Secondly we are going
to be aligning some text. Lastly we are going to be going over the border property. Alright,
before we actually importing our text we have to worry about file extensions, because browsers
don't know how to work together. The first, I'm going to be talking about the ones I use
and this will work for all of the browsers. First one is the .eot extension. And what
that will do, for anything above IE 4, which hopefully no one will be using by now, it
will work on all those. The next one is the .svg file. Which will work for Iphone, safari,
and the rest of those apple products. And lastly there is the .woff. W-O-F-F. And that
will work for everything else. Lets take a look at how you're going to import the font.
First you're going to need the @font-face selector. Secondly you're going to need the
font-family. Now the value of the font-family property in this case is what you're going
to be using to reference your font. You'll see it in a minite. Next is the source, url
then the path file of where your font is at. Now when you're calling it you have whatever
the selector is that you want to call it on. Then the font-family value [???] that you
put above. Now, you want to have a second font incase someone is using IE3 on windows
95. They're just not going to be able to use it. So thats why you have a diffrent font
in there. In this case you're going to be falling back on Tahoma. So the text align
property aligns text! Who woulda thunk! If there was a drinking game for how many times
I said that, oh man, you guys would be wasted. Now theres three diffrent ways to describe
[position] the font. Text align left, which puts the text left. Text align center, which
puts the text center. Then text align right which puts the text... right. Yeh, I know
this is simple stuff but, hey I got to fill this lecture out. So a border are lines that
rest around the element. Before we look at the code, lets look at some border-style values.
The first one I want to talk about is the border-style solid, which is just one thick
line. Border-style double is a little bit better. Infact some might say it's twice as
good as solid. HAHAHA!. And then the next one is dotted which my opinion, is the one
I use the most [That's a Fact, idiot!] because it looks nice when you have blocks of post
and then you have the bottom of it look all dotted, It looks pretty cool. And lastly there
is dashed which is just longer dots. But, used dotted. So the other two attributes you
need is border color and border size. And for a quick hint. Do not use any border size
larger than 5px, it looks ugly. And also this code sucks. You can have the border property
take all three. That's right, you can have three lines into one. Just put border 2px
solid pink, looks pretty nice. And lastly lets look at all of this together. Yes, I
know I forgot about text align but hey, I don't have alot of room here. Well, that's
it for another awesome tutorial on HTML5 and CSS3. Tune in next week when we talk about
advance selectors. Its gonna be a blast!