CSS Comments

Just like in HTML, we can write comments in CSS to add explanatory notes or 0:00 prevent the browser from interpreting parts of the style sheet. 0:06 Comments in CSS begin with a forward slash and 0:10 an asterisk, and end with an asterisk and a forward slash. 0:14 And everything that's in-between those opening and 0:19 closing characters is ignored by the browser. 0:22 CSS comments are useful for 0:26 including helpful notes and hints that let us know what's going on in our code. 0:28 So, for instance, above our type selectors, 0:33 we can add a comment for type selectors. 0:37 And we can do the same for id selectors, class selectors and pseudo classes. 0:42 So I'm just going to go ahead and copy the comment we just wrote and 0:46 right above the main-footer id, I'm going to add a comment that says id selectors, 0:50 and I will do the same above our main-header rule here. 0:57 And this time the comment will say, class selectors and so forth. 1:01 Now when using CSS comments, we need to be careful where we start and 1:06 end the comment. 1:12 So, for instance, if we accidentally leave out the closing asterisk or 1:13 slash, it also comments out the CSS rules below. 1:19 Or if we forget any of the opening character, 1:25 it also effects the CSS rules that follow. 1:27 Now another way we can use comments is to write actual comments or notes in our CSS. 1:31 And these are really helpful when learning new things about CSS. 1:37 We can use comments to indicate what certain things do. 1:41 So for example in this main header class rule, 1:44 we can add a comment after the background property that says, 1:48 this makes our header background orange. 1:55 And the browser will ignore this comment. 2:02 It's just there for us, or other developers. 2:05 Now we can also use comments to comment out parts of our code, 2:08 mostly for testing purposes and debugging. 2:13 So for instance, if we want to temporarily disable the 90 2:17 pixel font size in our H1, well we can wrap it in a comment. 2:21 And when we see it turn grey, that means that it is commented out. 2:28 So if we save our style sheet and take a look at it again in the browser. 2:33 As we can see, the H1 text size goes back to the browser's default text size for H1. 2:37 Most text editors have a shortcut for creating or removing comments. 2:46 In workspaces, and in most editors, the shortcut is 2:51 Command forward slash on a Mac, or Control forward slash on a Windows. 2:55 So, for example if we select the font size declaration, 3:00 then hit command forward slash, we can see how the comment characters are removed. 3:04 Now if we select it again, and 3:11 hit hit command forward slash, then once again it comments it out. 3:13 I am going to go ahead and remove the comments and move them forward. 3:16 Now, if we need to select and 3:20 comment out large chunks of CSS, we can do that as well, the same way as before. 3:22 So, I'm gonna select these three rules, then hit Command forward slash and 3:27 now they're commented out. 3:32 Then, once again, I'll hit Command forward slash to uncomment them. 3:33 Finally, we can also write multi-line comments that span multiple lines. 3:38 Again, as long as it's between the opening and 3:44 closing characters, it can span however many lines we need it to be. 3:47 So, I'm going to hit Command forward slash to create the comment. 3:52 Then inside I could start writing comments on multiple lines. 3:58 So let's quickly review some of what we've learned so far about CSS selectors. 4:13 A type, or element selector is what we use to select the type of element on the page, 4:18 like the body or a heading. 4:24 So we use the HTML element tag as the selector. 4:26 Class Selectors can be reused anywhere in the HTML and 4:30 an element can have more than one than class. 4:33 And it's also good practice to give classes meaningful names that can 4:36 explain their purpose. 4:40 When using IDs, keep in mind that they're not reusable. 4:42 An element can only have one ID, and 4:46 a page can only have one element with the same ID name. 4:48 But they can also be used as fragment identifiers for creating landmarks or 4:52 anchors and pages. 4:56 We can also create descendant selectors to target elements that are descendants of 4:58 other elements. 5:03 And we can use pseudo-classes to style elements based on user interaction, 5:04 like on the hover or active states. 5:08 So far in this course we've used certain CSS properties and 5:11 values to style the elements we've selected. 5:15 We'll learn more about those coming up next. 5:18