i1 00:00:00,000 --> 00:00:05,302 [MUSIC] 2 00:00:05,302 --> 00:00:09,280 In our previous stage, we saw a bit of CSS in action, but 3 00:00:09,280 --> 00:00:12,850 now it's time to learn the parts of the language. 4 00:00:12,850 --> 00:00:16,752 Writing CSS means learning how to write CSS rules, 5 00:00:16,752 --> 00:00:21,544 which tell browsers how to render HTML elements. 6 00:00:22,544 --> 00:00:26,015 A CSS rule is made up of two main parts, 7 00:00:26,015 --> 00:00:30,583 the selector followed by the declaration block. The selector 8 00:00:30,583 --> 00:00:35,876 is the part of the CSS rule that targets HTML elements. 9 00:00:35,876 --> 00:00:39,655 It's what actually lets us select the content we want to style. 10 00:00:39,655 --> 00:00:43,903 After the selector comes the declaration block, which 11 00:00:43,903 --> 00:00:49,881 begins with a left curly brace and ends with a right curly brace. 12 00:00:49,881 --> 00:00:54,778 Inside those curly braces is where we write the declarations 13 00:00:54,778 --> 00:00:56,993 that style the element we're selecting. 14 00:00:56,993 --> 00:01:02,008 Each declaration consists of a property name and 15 00:01:02,008 --> 00:01:05,563 a value, separated by a colon. 16 00:01:05,563 --> 00:01:10,440 The property indicates the part of the element we want to change, 17 00:01:10,440 --> 00:01:14,729 and the value describes how it's changed. As you'll learn throughout 18 00:01:14,729 --> 00:01:20,071 this course, we can write as many declarations as we want, 19 00:01:20,071 --> 00:01:24,069 as long as we separate each one with a semicolon. 20 00:01:25,069 --> 00:01:29,899 We can think of selectors as patterns that allow us to target 21 00:01:29,899 --> 00:01:33,190 HTML elements and apply styles to them. 22 00:01:33,190 --> 00:01:37,174 When we define a selector in our style sheet, we're instructing 23 00:01:37,174 --> 00:01:43,171 the browser to match every instance of that selector in the HTML. 24 00:01:43,171 --> 00:01:48,785 We've actually already written a few CSS selectors in the previous stage, 25 00:01:48,785 --> 00:01:50,990 when we added CSS to our page. 26 00:01:50,990 --> 00:01:55,900 Now that we're familiar with the syntax of a CSS rule, 27 00:01:55,900 --> 00:02:00,720 let's start writing some style with CSS selectors. In our workspace, 28 00:02:00,720 --> 00:02:07,432 Developer Diane's resume is once again completely unstyled. 29 00:02:07,432 --> 00:02:13,945 We'll be working in our external stylesheet, in a file called style.css. 30 00:02:13,945 --> 00:02:17,503 If you still have styles written here from our previous stage, 31 00:02:17,503 --> 00:02:21,633 go ahead and delete them all so we can start from scratch. 32 00:02:22,633 --> 00:02:26,739 As we progress, don't worry too much about the aesthetic 33 00:02:26,739 --> 00:02:29,957 value of the changes we're making. Developer Diane may 34 00:02:29,957 --> 00:02:34,197 not emerge with the most legible resume at the end of these lessons, 35 00:02:34,197 --> 00:02:40,540 but our goal here is to learn to apply CSS rules with confidence. 36 00:02:40,540 --> 00:02:43,854 Once we can do that, we can use what we've 37 00:02:43,854 --> 00:02:48,706 learned to design better-looking products down the road. 38 00:02:48,706 --> 00:02:53,236 The very first selector we'll cover is called the universal selector. 39 00:02:53,236 --> 00:02:58,569 It's called a universal selector because it selects every 40 00:02:58,569 --> 00:03:03,911 element on the page at once, and applies the styles we set. 41 00:03:03,911 --> 00:03:09,434 To create a universal selector, we use an asterisk as our selector, 42 00:03:09,434 --> 00:03:13,750 followed by the declaration block contained within a set 43 00:03:13,750 --> 00:03:19,439 of curly braces. Inside these curly braces is where we write the styles 44 00:03:19,439 --> 00:03:23,743 we'd like to apply universally to our page. 45 00:03:23,743 --> 00:03:28,236 Let's write our first declarations using the universal selector. 46 00:03:28,236 --> 00:03:33,544 We'll use the margin and padding properties, 47 00:03:33,544 --> 00:03:40,189 and set the value of both to 0, and make our text color red. 48 00:03:40,189 --> 00:03:44,402 The universal selector will apply these styles to every element 49 00:03:44,402 --> 00:03:47,215 in our project. Let's take a look. 50 00:03:47,215 --> 00:03:52,077 We can see that by setting margin and padding to 0, 51 00:03:52,077 --> 00:03:57,054 we're telling the browser to remove all margins and 52 00:03:57,054 --> 00:04:01,237 all padding from every element on the page, 53 00:04:01,237 --> 00:04:05,553 then change all text color from black to red. 54 00:04:05,553 --> 00:04:07,635 So all the default margin and 55 00:04:07,635 --> 00:04:12,417 padding we normally see in the user agent style sheet is now gone. 56 00:04:12,417 --> 00:04:18,418 Developers don't tend to use the universal selector all that often, 57 00:04:18,418 --> 00:04:23,614 as in most cases it's better to be more precise with our selectors. 58 00:04:23,614 --> 00:04:29,785 Declaring that every single HTML element should have red text, 59 00:04:29,785 --> 00:04:34,137 as I've done here, is pretty inefficient. 60 00:04:34,137 --> 00:04:35,834 So let's go ahead and remove 61 00:04:35,834 --> 00:04:40,560 this universal selector rule from our style sheet. 62 00:04:40,560 --> 00:04:43,732 Next up, we'll talk about type selectors. 63 00:04:43,732 --> 00:04:48,580 A type selector is what we use to select an element type on the page. 64 00:04:48,580 --> 00:04:52,404 They're also called element selectors, 65 00:04:52,404 --> 00:04:57,827 because we only use the element's HTML tag as the selector. 66 00:04:57,827 --> 00:05:02,839 We used type selectors in the previous stage when we styled 67 00:05:02,839 --> 00:05:07,456 the body element, the header, and the h1 element. 68 00:05:07,456 --> 00:05:12,510 Let's try this out. To target every paragraph element on the page, 69 00:05:12,510 --> 00:05:15,746 we need to use the p element as our selector. 70 00:05:27,007 --> 00:05:31,076 This targets every paragraph on the page 71 00:05:31,076 --> 00:05:35,940 and applies the styles we defined. 72 00:05:35,940 --> 00:05:40,728 If we want to change the background colors of the header and footer, 73 00:05:40,728 --> 00:05:50,222 we can target both the header element and the footer element 74 00:05:58,083 --> 00:06:00,752 by writing header and footer as our selectors. 75 00:06:10,180 --> 00:06:13,944 Now you might be wondering, did those declarations need to go 76 00:06:13,944 --> 00:06:19,604 in that order? My header comes before my footer in my HTML. 77 00:06:19,604 --> 00:06:22,854 What happens if I switch the order in my CSS? 78 00:06:31,624 --> 00:06:36,527 As you can see, switching the order didn't have any effect 79 00:06:36,527 --> 00:06:39,808 when viewing the page in the browser. 80 00:06:39,808 --> 00:06:43,846 Keeping the header above the footer in your CSS, 81 00:06:43,846 --> 00:06:49,167 to reflect the order of your HTML, probably will make more sense 82 00:06:49,167 --> 00:06:54,509 to you as a developer, and will keep your CSS better organized. 83 00:06:54,509 --> 00:06:57,349 But in this situation, the order doesn't matter. 84 00:06:57,349 --> 00:07:03,088 Sometimes the order of your CSS does make a difference, 85 00:07:03,088 --> 00:07:06,385 but we'll discuss this later, when we learn how 86 00:07:06,385 --> 00:07:10,795 the cascade works in CSS. If I wanted to change the 87 00:07:10,795 --> 00:07:16,971 appearance of my links, perhaps by changing the color and removing 88 00:07:16,971 --> 00:07:22,445 the underline, I would target the a element with my selector. 89 00:07:42,608 --> 00:07:46,603 Feel free to experiment with some more type selectors on your own. 90 00:07:46,603 --> 00:07:50,531 And again, don't worry too much about making a mess. 91 00:07:50,531 --> 00:07:55,688 We're here to learn. Up next, we'll see how we're able to make 92 00:07:55,688 --> 00:08:00,426 our selectors more specific with ID selectors.