Styling6:57 with Craig Dennis
CSS is the way to avoid repeating yourself in design. Let's learn how to apply it.
You may have heard of Cascading Style Sheets, or CSS, before, and 0:00 most likely in regards to web development. 0:05 Well, a little known fact is that CSS can be used in just about any markup language. 0:07 Now it's super power is the ability to separate presentation, the way something 0:12 looks, from the structure of your markup, what something means. 0:17 We saw hints of a common design problem starting to rear its head. 0:21 We were about to start repeating ourselves. 0:25 And on top of that bad practice, 0:27 we were also about to start locking ourselves into design decisions. 0:29 That was only one screen, too. 0:33 Imagine if our app had 30 plus screens. 0:35 Now CSS provides a great way to define styles for groups of elements. 0:38 In many cases, we can make a single change and 0:42 give the entire app a new look, or skin. 0:45 I'm gonna show you some styling concepts first, and 0:48 then we'll flip into even better practices after that. 0:51 Let's set up some default styling for our awesome app. 0:55 All right. Again, 0:58 I want to show you some bad form first, just to hammer home some concepts. 1:00 It's like training wheels to kind of get the feeling of the balance on a bike, 1:05 before you go out and pop a wheelie. 1:09 So it's possible to add inline styles on elements. 1:11 Now the best idea, of course is to use an external style sheet in a separate file. 1:15 But for now, let's use this in line method. 1:19 So every node has a style attribute, and 1:23 in the value, you can actually set any valid CSS expression. 1:25 So let's make a new style attribute, so I'll say style. 1:31 In CSS, that looks like property and then colon and then value. 1:36 So JavaFX adds a prefix of -fx- before setting a property. 1:39 Now property names on elements are CamelCased, and here, they're dasherized. 1:46 So remember how we set the font before using set Font? 1:51 So we would do font-family. 1:55 Family was the parameter that was passed in there, it's describing the type here. 2:01 So Papyrus. 2:06 So now let's run that. 2:10 And see how everything is in that font? 2:12 Everything looks like that Avatar font Cool, right? 2:14 Now that's because children inherit the parent's style. 2:17 Just like we see in the object oriented world. 2:22 And just like in that world, 2:25 you can override specific values on specific elements. 2:26 So let's override the default font size on the title and make it larger. 2:31 Also know that you can separate different CSS statements with a semicolon, so 2:36 let's make this, let's make the font size larger here. 2:40 So we'll say style. 2:43 Fx-font-size, let's make that 80 pixels. 2:48 And then we are going to go ahead and do a semicolon, 2:55 cause we want to put two in here, and we'll do -fx. 2:59 And then to set the background color you fill it with a color, so 3:02 we want to fill it and there's a word called Aqua. 3:06 I'll show you how you can find that sort of stuff, and 3:08 what you can do to things here. 3:12 It's in the reference. 3:15 And let's take a look at that really quick actually. 3:17 Let's flip over there. 3:18 It's in the teacher's notes. 3:20 So this is the reference and 3:22 it is a little bit strange that it's a CSS reference and it's not styled very well. 3:24 We'll let it slide. 3:31 One of the most important concepts I think to grasp here is that 3:31 the FXML naming structure is just like the Java structure, but 3:38 instead of being camel cased, it's dasherized, okay, and 3:43 it all starts with the -fx style. 3:47 There's some great stuff to read here. 3:50 What I want you to know too, is that CSS 3:52 normally of course doesn't have have this -fx-, but you can live within it. 3:56 You can have other CSS living inside this file. 4:00 So you might share a CSS file between a web application, 4:02 as well as your Java FX application. 4:07 And any thing with -fx- will be fx, your app, specific. 4:09 So if we scroll through here, you'll see some naming conventions, and 4:14 it will show you what the defaults are here. 4:19 So let's go ahead and let's take a look and 4:21 see what can happen up here on a grid pane. 4:24 So this is what's really nice is you can come in here and 4:28 you can see what can you do to a grid pane. 4:30 So you can set the h gap if you do -fx-gap and 4:33 you'll see here that it defaults to zero. 4:38 If you click here, this is the type that is expected from the XML and 4:40 it will explain to you how they work. 4:44 So this is a number and you can do .px which you saw that's what I did for 4:46 pixels. 4:49 And you can do these different things here. 4:50 It will explain through different bits here. 4:52 Here you can set the grid lines visible. 4:55 Remember how we did that? 4:57 And you can do boolean, and boolean's either a true or a false. 4:58 Also, you can see here that it inherits properties from right, 5:01 because this is mimicking basically Java classes, ciz it kind of has to. 5:04 So it's going to call these sets, just like we're doing, the attributes there. 5:09 So if we click this pane, we come here and it says the pane expose's region, 5:12 there's nothing here so you click region, and then here there's a whole bunch of 5:16 stuff that you can do to all the different types of panes. 5:19 And this is a nice way to look through things to find out what it is 5:22 that you could do. 5:25 I wanted to let you know that this is here, 5:26 there's a lot of exploration that you can do to make things look different. 5:28 So let's scroll back a bit to where that grid pane was. 5:33 And it looks like we could set the alignment and the h gap and the v gap, 5:37 all those that we were setting, we were setting those in those attributes. 5:40 So let's go ahead and let's flip back and let's put those all in the style. 5:43 So we'll say -fxalignment is center and 5:46 then -fx-hgap : 10 and 5:55 -fx-vgap: 10. 6:01 And then we can get rid of all of these attributes. 6:06 So that's kind of powerful. 6:09 One thing that we can do is we can copy and paste this style 6:10 through every one of the grid panes we created, but that's not great. 6:15 We don't want to have to do that. 6:20 It sure would be nice if we could default every grid pane 6:22 ever created on our app, wouldn't it? 6:25 Well we can. 6:28 Let's take a look at putting these definitions into an external resource. 6:29 CSS is a very powerful tool to have at your disposal. 6:34 We're just going to scratch the surface of it. 6:36 But like always, 6:38 there is a ton of content on Treehouse that will help expand your CSS skills. 6:39 Now, I've linked to some of my faves in the Teacher's Notes. 6:44 All right, so 6:47 I promised you that I'd show off the best practice of file-based CSS rules. 6:48 But before we do that, 6:52 let's learn about resources, right after this quick exercise. 6:54
You need to sign up for Treehouse in order to download course files.Sign up