1 00:00:00,000 --> 00:00:03,990 When authoring your CSS, you have a few options available to you, as to where 2 00:00:04,000 --> 00:00:04,990 you can write your styles. 3 00:00:05,000 --> 00:00:10,990 In this movie, I want to cover those options and how they're going to impact your overall site. 4 00:00:11,000 --> 00:00:15,990 Now basically, styles can be located in one of three different locations. 5 00:00:16,000 --> 00:00:19,990 First, you can place styles in their own separate CSS file. 6 00:00:20,000 --> 00:00:23,990 This is usually referred to as an external style sheet. 7 00:00:24,000 --> 00:00:27,990 Secondly, you can place styles in the head of an existing HTML document. 8 00:00:28,000 --> 00:00:31,990 This is usually referred to as an embedded style. 9 00:00:32,000 --> 00:00:35,990 Finally, you can also apply styles directly to an HTML element, which is 10 00:00:36,000 --> 00:00:38,990 referred to as an inline style. 11 00:00:39,000 --> 00:00:42,990 Let's take a look at each of these styles in a little bit more detail. 12 00:00:43,000 --> 00:00:47,990 External style sheets are simply text files with a .css extension. 13 00:00:48,000 --> 00:00:50,990 Typically, they'll hold multiple styles that are designed to control an entire 14 00:00:51,000 --> 00:00:53,990 site or section of a site. 15 00:00:54,000 --> 00:00:58,990 You apply these styles to pages by using a link tag in the head of a document. 16 00:00:59,000 --> 00:01:01,990 Using a link tag, you can even specify what type of media you would like to 17 00:01:02,000 --> 00:01:05,990 apply the styles to, giving you a way to apply different sets of styles to 18 00:01:06,000 --> 00:01:08,990 printers, desktops, and mobile devices. 19 00:01:09,000 --> 00:01:12,990 Using external style sheets is the most efficient way of applying styles 20 00:01:13,000 --> 00:01:14,990 across an entire site. 21 00:01:15,000 --> 00:01:19,990 Embedded styles only apply to the documents they're found in, which make them 22 00:01:20,000 --> 00:01:23,990 inefficient for site-web styling, but perfect for targeted styles that are 23 00:01:24,000 --> 00:01:25,990 specific for that page. 24 00:01:26,000 --> 00:01:30,990 Inline styles are styles that are added to an element as an HTML attribute. 25 00:01:31,000 --> 00:01:35,990 The syntax can be a little cumbersome, as you start with a style attribute and 26 00:01:36,000 --> 00:01:39,990 then follow that with a semicolon-separated list of CSS rules. 27 00:01:40,000 --> 00:01:43,990 For the most part, using inline styles are discouraged, as they're inefficient 28 00:01:44,000 --> 00:01:46,990 and can be very hard to override or maintain. 29 00:01:47,000 --> 00:01:49,990 Editing an inline style requires you to track down the element that the style is 30 00:01:50,000 --> 00:01:53,990 applied to and edit the HTML code directly. 31 00:01:54,000 --> 00:01:56,990 This can be even more difficult if you are having to update somebody else's 32 00:01:57,000 --> 00:02:00,990 code, as there's no way to tell where the styles have been applied without first 33 00:02:01,000 --> 00:02:02,990 looking at the code itself. 34 00:02:03,000 --> 00:02:06,990 The only place where inline styles are still used extensively is in HTML emails, 35 00:02:07,000 --> 00:02:10,990 where older email clients offer weaker CSS support. 36 00:02:11,000 --> 00:02:13,990 For the most part, you'll find almost all of your projects will rely heavily 37 00:02:14,000 --> 00:02:20,990 on external CSS files with the occasional embedded style used to override global styles. 38 00:02:21,000 --> 00:02:24,990 Regardless of where you place your styles, the most important thing is to have 39 00:02:25,000 --> 00:02:28,990 an overall strategy that controls styling side wide, and makes it easy for you to 40 00:02:29,000 --> 00:02:31,990 maintain or edit the styles when necessary. 41 00:02:32,000 --> 00:02:36,990 This is a little easier to do if you understand how browsers apply styles, and 42 00:02:37,000 --> 00:02:47,000 that's something we're going to explore in more detail in our next movie.