Getting Stylish with CSS: Pixels vs. Points
Picking the right color for your website and the differences between Pixels and other measurement units.
Video Transcript
00:00Alright so I took a break opened up Photoshop
00:01to show you this in action. If it's a new term for you
00:04which in most chances are it is really don't worry about it
00:07you don't have to memorise anything you just have to get the concept
00:10Alright, so if we see , we have a colour swatch here
00:14and if I go into my color options in Photoshop
00:17and I just click on it, so I'm going to click on it,
00:20it's going to open up a color picker when I open up the color picker
00:23you see this how my mouse turned into this kind of like a bird feeder
00:27kind of thing which it basically , it's going to squeeze out a color
00:30and then update that information to let you know what it's RGB value is.
00:35what it's Hexadecimal value. There's a lot of ways to represent color,
00:38so you don't have to memorise the information
00:41so e.g. If we wanted the background to be this blue background
00:44This beautifully blue background
00:46I could just grab this value which will be our RGB value
00:50I don't have to worry about what it actually means.
00:52I could always play with colours and find the colours that I want
00:55also with a color swatch if you're working with a professional color editor,
01:00but I'm sure you can find also some free versions out there
01:02without the need of Photoshop
01:04but if you're working in the industry now of HTML
01:06probably Photoshop will come in handy quite often
01:09Alright, so I selected a color I know this is the color I want to use
01:13so if I go back into my application
01:15now that I know the color that I want to use
01:17I can now put a real value inside, which will be this color.
01:22so now we're going to have a background color of that blue
01:24now if I save this informtion
01:26and I go back into my browser and click on refresh,
01:28I should be getting now a nice blue color
01:31-Much nicer. Much nicer.
01:33so next step is I want to really style my <h> tag
01:37We styled the background it's time for us to style our foreground
01:41so again I'm going to go into my editor and in my editor itself
01:44what I want to do is I want to talk directly to my <h1> tag
01:48and then I'm going to open up a curly brace or curly bracket
01:51what ever you want to call it and in my curly bracket, curly brace
01:55I'm going to put that information that I want to give the instructions
01:58that I want to give my <h1> tag
01:59Now there's a lot of different attributes that you can put in.
02:03If you're working with an editor such as the editor that we are working with
02:06which is called "Sublime Text 2" or you're working with Dreamweaver
02:11or any other fancy editor, you should be getting code hints
02:14as soon as you start typing. These code hints are going to become very handy
02:18now obviously we won't be able to cover every single CSS attribute
02:22but it's very logical many of then and you can just go through them
02:26and discover some of them as you go.
02:28We're only going to look at a few such as the font size
02:31because we want to make our <h1> tag, our headline, really big.
02:34I'm going to make it 120 points (pt) for points.
02:38Alright, before we continue being stylish do you have any questions?
02:42Yeah, I want to understand why in one you wrote the point
02:47on this one there you have point and the one below on the paragraph
02:51you have pixels what's the difference?
02:53Well normally, usually, you would only use points for copy.
02:57Now the reason is that you'd use points for copy
03:00is because really when you working on a computer
03:03a computer is defined by pixels, you actually,
03:05your resolution on your computer is defined by pixels
03:08if I actually go into, for a second here,
03:10inside of my Mac which I'm on a Mac, if I'll find it here on the Mac,
03:16that would be great. I think it would be in desktop, screensavers.
03:22No.
03:24-Why don't you just show me on the screen the difference?
03:26Well, it's kinda hard to show it in.. basically every monitor..
03:32-Ah I see.. I got you
03:34Every monitor.. and you know, it's kind of hard to..
03:35I can't find it right now in the definitions here
03:37but every monitor has a defined amount of pixels
03:40that it contains from one... up here to down here
03:43-Right and those pixels are defined
03:46When we are working on a website in general, we are working in pixels
03:50the reason why we're working with pixels is because we want to make sure
03:53that our relationship between our pixels is consistent
03:56through out Iphone, Mac, a PC, a large screen, a small screen,
04:01and so on and so forth.
04:02We want to work with pixels because we want ..
04:04it's not because we want something to be this size always
04:07but we want it to take the same amount of pixels,
04:09so that way when it's working in different devices,
04:11it has the same relationship and the same overview.
04:14Contrary to that, when we are working with fonts,
04:17many times we want the fonts to be a certain size.
04:20we don't want it to be.. to take a certain space on the screen,
04:24so for example, if we said 12 pixels (px),
04:2712 px might be like this size on an Iphone
04:30and like this size on an old computer
04:33-OK and on the contrary when we say points,
04:36we have this basic alignment, a basic size that is consistent,
04:39which is basically the size. It's more... it's almost like inches
04:42It's a size that is more defined.
04:44Now you can't really say, 10 px... 10 inches from the top,
04:50because you say 10 inches from the top on an Iphone
04:53you're already out of the device.
04:54when you say 10 inches on this screen, then that works perfectly. - OK
04:57But we really wouldn't want to align things inside of a website
05:01in a real world measurement amount, but on the other hand,
05:05when we want to make sure copy is legible and readable,
05:07we probably would want to use a real world number
05:10because that real world number would make sure
05:12that it's the specific size of legibility and it becomes really more important
05:16when you're talking about 10pt, 5pt, 8pt. the smaller it is, if you would use pixels,
05:23it would be a really drastic difference so usually fonts, we use points
05:26and for almost anything else when it comes to CSS
05:29and for alignment & size & positions, we use Pixels.
05:33That make sense? -Actually it does.
05:35-Cool