1 00:00:00,000 --> 00:00:04,990 It's hard to understate how important HTML and CSS are to web design. 2 00:00:05,000 --> 00:00:09,990 Since both languages have syntax that is relatively easy to learn, and since both 3 00:00:10,000 --> 00:00:11,990 are such fundamental parts of web site architecture, 4 00:00:12,000 --> 00:00:16,990 I always recommend that new web designers start out my learning HTML and CSS 5 00:00:17,000 --> 00:00:19,990 first, before moving on server- side scripting or JavaScript. 6 00:00:20,000 --> 00:00:25,990 And typically, people tend to learn HTML first, and then learn parts of CSS along the way, 7 00:00:26,000 --> 00:00:30,990 eventually getting comfortable enough with it to start tackling some of CSS's 8 00:00:31,000 --> 00:00:34,990 more advanced concepts. While this approach is pretty standard, the importance 9 00:00:35,000 --> 00:00:39,990 of the relationship between the structure of HTML documents and how they are 10 00:00:40,000 --> 00:00:41,990 styled with CSS often gets lost along the way. 11 00:00:42,000 --> 00:00:47,990 I want to take a moment and discuss how CSS works with HTML structure, in hopes 12 00:00:48,000 --> 00:00:49,990 that it'll help you write more efficient CSS. 13 00:00:50,000 --> 00:00:53,990 I'm going to be referencing a lot of the selectors that we discussed in the 14 00:00:54,000 --> 00:00:57,990 previous movie, so if you haven't watched the Basic selectors movie yet, go 15 00:00:58,000 --> 00:01:00,990 back, watch it, and then come back to this one. 16 00:01:01,000 --> 00:01:04,990 Now remember that to style elements in your documents, you'll need to write 17 00:01:05,000 --> 00:01:06,990 selectors that target those elements. 18 00:01:07,000 --> 00:01:10,990 It should go without saying that if you don't have efficient logical HTML code, 19 00:01:11,000 --> 00:01:14,990 it's considerably more difficult to write efficient CSS. 20 00:01:15,000 --> 00:01:19,990 CSS works with the structure of your HTML document, allowing the browser to 21 00:01:20,000 --> 00:01:23,990 parse the HTML code, find the right element, and style it accordingly. 22 00:01:24,000 --> 00:01:27,990 Having a well structured consistent HTML and being familiar with that structure 23 00:01:28,000 --> 00:01:31,990 makes it a lot easier to write the CSS for it. 24 00:01:32,000 --> 00:01:35,990 With that in mind, I want to give you a few best practices that you can follow 25 00:01:36,000 --> 00:01:39,990 when authoring HTML and talk about how this can impact to your CSS. 26 00:01:40,000 --> 00:01:43,990 First, don't use classes and ID attributes arbitrarily. 27 00:01:44,000 --> 00:01:46,990 And I'll take this example. 28 00:01:47,000 --> 00:01:50,990 Here the author has used classes and IDs to define styling for each of the 29 00:01:51,000 --> 00:01:51,990 individual elements. 30 00:01:52,000 --> 00:01:56,990 As you can imagine, there are corresponding selectors in the CSS that define 31 00:01:57,000 --> 00:01:57,990 the element styling. 32 00:01:58,000 --> 00:02:02,990 Now, as far as functionality goes, this would work just fine, but it terms of 33 00:02:03,000 --> 00:02:06,990 proper HTML structure, this have some serious problems. 34 00:02:07,000 --> 00:02:10,990 You know, HTML should help define your content and give it meaning. Take 35 00:02:11,000 --> 00:02:13,990 this class, redText. 36 00:02:14,000 --> 00:02:16,990 You know, by itself it means absolute nothing. 37 00:02:17,000 --> 00:02:20,990 In fact, this is one of the biggest mistakes that I see new web designers make. 38 00:02:21,000 --> 00:02:25,990 They rely too heavily on classes and IDs, and they end up with a considerable 39 00:02:26,000 --> 00:02:29,990 amount of unnecessary markup that's hard to maintain or update. 40 00:02:30,000 --> 00:02:34,990 Classes and IDs should be descriptive, and they should be used to add additional 41 00:02:35,000 --> 00:02:35,990 meaning to your markup. 42 00:02:36,000 --> 00:02:39,990 Now, take a look at an updated version of our example. 43 00:02:40,000 --> 00:02:43,990 Here, several of the classes and IDs have been replaced with descriptive values, 44 00:02:44,000 --> 00:02:47,990 and in other places, they've been removed altogether. 45 00:02:48,000 --> 00:02:52,990 In fact, this structure can be styled with fewer CSS rules than before. 46 00:02:53,000 --> 00:02:57,990 The descriptive ID and class names also allow us to get a much clearer picture 47 00:02:58,000 --> 00:03:01,990 of exactly what we're styling in our document as well. 48 00:03:02,000 --> 00:03:03,990 Now you might also want to make sure that your HTML is structured 49 00:03:04,000 --> 00:03:05,990 consistently across your site. 50 00:03:06,000 --> 00:03:11,990 New authors often structure the same content in different ways on different pages. 51 00:03:12,000 --> 00:03:15,990 This makes it considerably more difficult to write global styles for the entire site. 52 00:03:16,000 --> 00:03:17,990 Now take this pull quote, for example. 53 00:03:18,000 --> 00:03:21,990 On one page it's structured within a div tag; on another page it's structured in 54 00:03:22,000 --> 00:03:26,990 a blockquote; and on this page, it's just represented in a normal paragraph. 55 00:03:27,000 --> 00:03:31,990 To style this consistently across the site, you need several different rules 56 00:03:32,000 --> 00:03:34,990 that are essentially doing exactly the same thing. 57 00:03:35,000 --> 00:03:39,990 By establishing a guideline for how content should be structured and then making 58 00:03:40,000 --> 00:03:42,990 sure that you're consistent and following those guidelines, you can make the 59 00:03:43,000 --> 00:03:45,990 process of writing styles much easier for yourself. 60 00:03:46,000 --> 00:03:50,990 You know, the best piece of advice I can give you is to write your HTML so that 61 00:03:51,000 --> 00:03:53,990 you're giving clean, efficient structure to your content. 62 00:03:54,000 --> 00:03:57,990 As best you can, try to structure the code so that you're adding meaning to the 63 00:03:58,000 --> 00:04:00,990 content without even thinking about the styling. 64 00:04:01,000 --> 00:04:04,990 Now this is sometimes difficult for new web designers and a little bit 65 00:04:05,000 --> 00:04:09,990 counterintuitive, as many visual designers code their pages with styling in mind. 66 00:04:10,000 --> 00:04:13,990 However, remember, the purpose of HTML is to provide a structure for your 67 00:04:14,000 --> 00:04:16,990 content that helps convey meaning. 68 00:04:17,000 --> 00:04:20,990 If you're able to do this for your content, you'll find that you end up with 69 00:04:21,000 --> 00:04:24,990 leaner, more descriptive code that is a lot easier to style. 70 00:04:25,000 --> 00:04:27,990 It also means that you'll find yourself having to modify your code for styling 71 00:04:28,000 --> 00:04:31,990 purposes much less frequently, if ever at all. 72 00:04:32,000 --> 00:04:35,990 Understanding how selectors work and how they relate to your HTML document 73 00:04:36,000 --> 00:04:38,990 structure is a crucial part of writing CSS. 74 00:04:39,000 --> 00:04:43,990 If you focus on those concepts early in the process of learning CSS, you'll find 75 00:04:44,000 --> 00:04:47,990 that you write cleaner, more maintainable styles, and avoid a lot of the 76 00:04:48,000 --> 00:04:58,000 pitfalls that trip up many novice web designers.