Comments, Selectors, and Syntax2:36 with Joy Kesten
Use an external stylesheet to break down how CSS is organized, including comments, selectors, and syntax.
It's time to dive into our CSS and our external style sheet. 0:00 We'll begin by breaking down the organization of CSS, including comments, 0:04 selectors, and syntax. 0:08 In your external style sheet, you will find it's been nicely organized with 0:11 comments to help you identify which CSS rules go with what HTML elements. 0:15 These comments should look different than what you've seen in HTML, like up here. 0:22 Because in CSS, all it uses a forward slash and 0:28 a star to open the comment, and a star and a forward slash to close the comment. 0:31 In our first comment, you can see it says Top Bar color here. 0:36 When you look at it in the page, it's this color here on top. 0:41 Right now, it's only 20 pixels, but if I change it to 100, save, and 0:46 refresh the page, you can see it's a much thicker bar across the top of our browser. 0:52 This is a great time to point out the structure of CSS. 0:59 For all the basic selectors we are using, it's very consistent. 1:02 You have a [SOUND] selector, a [SOUND] property and a [SOUND] value. 1:07 [SOUND] Selectors select a part of the HTML document so 1:10 you can change how it looks. 1:14 Inside the [SOUND] curly braces, you have a property. 1:16 This identifies what you want to change. 1:19 And lastly, you have a [SOUND] value, 1:22 which says how you want a particular property to change. 1:25 Let's add a new property to our HTML selector. 1:28 And we can start up here and change the background. 1:32 Let's say background and scroll down to color. 1:36 And let's change the whole thing to orange. 1:41 And save that out and refresh the page. 1:45 And oh, man. 1:48 That is terribly ugly. 1:50 But it's just something you can try and do. 1:52 Before I'll go, I'll change it to, let's say, lightblue. 1:54 Save. 2:01 Refresh. 2:02 And that's a little better, but I think I like the white better. 2:04 Another thing you might want to try and play around with is the margin in padding. 2:07 Margin applies space outside of an element. 2:12 Padding works in a similar way, 2:15 only padding applies space inside of an element before the border. 2:17 Using margins and 2:22 padding are a great way of adding space between elements on a webpage. 2:23 Feel free to play with these values a bit on your own and come back for 2:28 a quick quiz before moving into colors and fonts in the next video. 2:32
You need to sign up for Treehouse in order to download course files.Sign up