1 00:00:00,000 --> 00:00:02,990 In this chapter, I want to spend some time going over some of the common CSS 2 00:00:03,000 --> 00:00:06,990 concepts that you are likely to encounter when using style sheets. 3 00:00:07,000 --> 00:00:10,990 While the main focus will be to provide you with a broad overview of topics, 4 00:00:11,000 --> 00:00:15,990 we will spend some time exploring syntax and best practices to use when authoring styles. 5 00:00:16,000 --> 00:00:18,990 I want to start by focusing on fonts. 6 00:00:19,000 --> 00:00:21,990 Controlling typography is often the first thing the designers learn to do when 7 00:00:22,000 --> 00:00:24,990 using CSS, and for good reason. 8 00:00:25,000 --> 00:00:28,990 Typography is so important to your design and what you're trying to communicate 9 00:00:29,000 --> 00:00:30,990 that it's just a natural starting point. 10 00:00:31,000 --> 00:00:34,990 Remember, if you don't specify a font and format your text, your content will 11 00:00:35,000 --> 00:00:38,990 receive the browser's default styling. I highly doubt that that's the look 12 00:00:39,000 --> 00:00:39,990 that you are going for. 13 00:00:40,000 --> 00:00:42,990 The first thing that you will need to decide when choosing a font for your site 14 00:00:43,000 --> 00:00:47,990 is whether you want to use the older, more widely supported system fonts or take 15 00:00:48,000 --> 00:00:50,990 advantage of the emerging technique of using web fonts. 16 00:00:51,000 --> 00:00:53,990 Let's take a moment to discuss the differences between the two. 17 00:00:54,000 --> 00:00:58,990 Now in the past, designers have been limited to using a small set of fonts that 18 00:00:59,000 --> 00:01:00,990 are preinstalled on almost every machine. 19 00:01:01,000 --> 00:01:04,990 These are called system fonts, and I have no doubt that you have used them at 20 00:01:05,000 --> 00:01:05,990 one time or another. 21 00:01:06,000 --> 00:01:12,990 Fonts like Arial, Helvetica, Verdana, Times, Times New Roman, and Courier, and yes, 22 00:01:13,000 --> 00:01:17,990 even Comic Sans, are so common on the web that you're more likely than not to 23 00:01:18,000 --> 00:01:21,990 encounter at least one of them every time you go online. 24 00:01:22,000 --> 00:01:24,990 So, why are these fonts so popular? 25 00:01:25,000 --> 00:01:28,990 Well, it has very little to do with the popularity or quality of the fonts, 26 00:01:29,000 --> 00:01:32,990 although most of them are quite good, and everything to do with their ubiquity. 27 00:01:33,000 --> 00:01:37,990 Until recently, HTML and CSS contained no mechanisms for displaying a font that 28 00:01:38,000 --> 00:01:40,990 wasn't already installed on the client's machine. 29 00:01:41,000 --> 00:01:44,990 You could certainly specify that you wanted your web pages to use Garamond, but 30 00:01:45,000 --> 00:01:48,990 unless the person viewing your page had Garamond installed, it would fall back to 31 00:01:49,000 --> 00:01:50,990 the system's default font. 32 00:01:51,000 --> 00:01:53,990 You can see this concept illustrated most clearly by looking at the syntax for 33 00:01:54,000 --> 00:01:55,990 declaring font families. 34 00:01:56,000 --> 00:01:58,990 Now at first glance, this may look a little odd. 35 00:01:59,000 --> 00:02:03,990 Here the designer seems to be asking for more than one font for all paragraphs. 36 00:02:04,000 --> 00:02:08,990 In reality, what this syntax allows designers to do is to provide fallback fonts 37 00:02:09,000 --> 00:02:12,990 in case the first one requested isn't found on the client's system. 38 00:02:13,000 --> 00:02:16,990 In this case, the first choice would be Arial. 39 00:02:17,000 --> 00:02:19,990 If Arial wasn't installed, it would then request Helvetica. 40 00:02:20,000 --> 00:02:23,990 If Helvetica wasn't found, it would then request Verdana. 41 00:02:24,000 --> 00:02:27,990 And if in the unlikely event that one of those three fonts weren't found, it 42 00:02:28,000 --> 00:02:31,990 would finally ask for the system's default sans-serif font, 43 00:02:32,000 --> 00:02:35,990 so that at least the text would display in the style that the designer wanted. 44 00:02:36,000 --> 00:02:38,990 Now is there anything wrong with that? 45 00:02:39,000 --> 00:02:40,990 No, actually there isn't. 46 00:02:41,000 --> 00:02:44,990 Many of the system fonts, like Georgia and Verdana, were designed specifically for 47 00:02:45,000 --> 00:02:48,990 the screen, making them very functional choices for web sites. 48 00:02:49,000 --> 00:02:53,990 However, recent advances to CSS and browser support now make it possible to use 49 00:02:54,000 --> 00:02:55,990 a much wider array of fonts. 50 00:02:56,000 --> 00:02:58,990 By now you've probably heard of web fonts. 51 00:02:59,000 --> 00:03:02,990 Web fonts is simply the term typically used to describe the technique of 52 00:03:03,000 --> 00:03:07,990 embedding font files in web pages using the @font-face method. 53 00:03:08,000 --> 00:03:10,990 This allows web authors to use fonts without worrying about whether they're 54 00:03:11,000 --> 00:03:13,990 installed on the client machine or not. 55 00:03:14,000 --> 00:03:18,990 The CSS @font-face rule has actually been around for quite some time, 56 00:03:19,000 --> 00:03:23,990 but only recently has browser support, font formats, and licensing issues reach 57 00:03:24,000 --> 00:03:26,990 the stage where it's actually feasible to use. 58 00:03:27,000 --> 00:03:31,990 Web fonts typically work by having an @font-face rule, such as this one, in your 59 00:03:32,000 --> 00:03:34,990 styles that point to an external font resource. 60 00:03:35,000 --> 00:03:39,990 Now, this could be a font that you host yourself or one that's hosted through any 61 00:03:40,000 --> 00:03:44,990 number of recent font hosting services that have appeared to support web fonts. 62 00:03:45,000 --> 00:03:49,990 Now, I know that this syntax looks a little complicated, but trust me, it's not 63 00:03:50,000 --> 00:03:50,990 as bad as you think. 64 00:03:51,000 --> 00:03:54,990 There are also plenty of online resources that can help you find fonts and even 65 00:03:55,000 --> 00:03:56,990 generate the syntax for you. 66 00:03:57,000 --> 00:03:59,990 I'll list some of those in the final chapter. 67 00:04:00,000 --> 00:04:03,990 If you want a deeper look into web fonts, check out my lynda.com title, 68 00:04:04,000 --> 00:04:05,990 Web Fonts First Look. 69 00:04:06,000 --> 00:04:09,990 What all this means is that when you are working with fonts in CSS, you have 70 00:04:10,000 --> 00:04:10,990 three basic choices: 71 00:04:11,000 --> 00:04:15,990 first, you could rely on the browser to supply the user's default font; 72 00:04:16,000 --> 00:04:20,990 second, you can specify a preferred system font and then provide fallback fonts 73 00:04:21,000 --> 00:04:24,990 all the way down to specifying the generic font family to use in case the client 74 00:04:25,000 --> 00:04:30,990 machine doesn't have the defined fonts installed; or third, you can use @font-face 75 00:04:31,000 --> 00:04:33,990 to supply custom fonts to the browser. 76 00:04:34,000 --> 00:04:36,990 You could also use a blended approach, where you use web fonts but provide 77 00:04:37,000 --> 00:04:41,990 fallback system fonts to the user agent if it doesn't support web fonts. 78 00:04:42,000 --> 00:04:44,990 Okay, now that we have we talked little bit about some of the different ways you 79 00:04:45,000 --> 00:04:48,990 can use fonts with CSS, we will move on and talk about some of the options for 80 00:04:49,000 --> 00:04:59,000 formatting fonts, and we'll do that next.