Subtitles of the Movie

In this movie we take our Category-separated CSS rules and place them in separate files and establish the appropriate relationships with those files for our project. So here we have a different version of our CSS main file, so I've got this main underscore categorized and it contains information concerning our different styles based on color, and then if I jump down here I'll see Typography, and then Box Model information, Layout information, List information, and Images, and I believe there's also Tables. So yes. I did break it down so that we have a lot of Modular data here depending on the type of content. So if you decide not to include a section for just your table information you don't have to do that, it's completely up to you. So now that we have our different CSS rules set up into these different categories it's time to break this up into multiple files. So I'm going to need to create a new file for each one of our different content sections. So I'm going to go ahead here and copy everything that's in the Color section here, so copy that; then I'll go to the File Menu and click New, do I want to save changes Ð I'll go ahead and save changes to that Ð and then I'll paste in my color information. So then I will go File, and Save As, and then I need to make sure that I'm in the right location; I need to go back to my openSparks, and go into 18 into Styles, and here I'll do color.css, and then hit Save. Alright, so I now have my color. I'll go ahead and just do File, New here and then go back to my system browser and pull up that main categorized and then in the place where I have all these color styles I'll delete, but then I will establish my import. So, I'll Import color.css and there we go. So, for the rest of this, it's just a matter of copying and pasting. Now in the end we're going to just have a bunch of different files that contain specific information. So I'm just going to go ahead and scroll on down here, grab everything that's the typography, I'll go ahead and cut that, and paste it into this new file that got created, and I'll Save As into the appropriate folder there, typography.css. And then again, I'll just create a New File there, jump back into the main and do an at import for the typography.css. Then Next, we have the Box Model, grab everything that has to do with the box model is typically going to be the largest section, so I'll go ahead and cut that, jump over to my new file, paste that in, and save that as box.css, and one of the things about the Modularity here is if you look at what I'm doing and you think that's not really going to benefit you, you don't have to do this. This is optional. A lot of people swear by this. It does make it a little bit easier to maintain but it all kind of depends on how you think about your content. So, I'm going to go ahead and grab all my layout stuff, and cut that out, paste it, and save, and that'll be layout.css. We'll go ahead and create a new document, jump back into my group here, and I do an import, layout.css. Now because this document, it's going to end up being the main.css, it's already established to all my other documents so whatever I'm doing with this behind the scenes, you're not going to see any difference between what's going on here with what you're going to witness in the live site, so I'm going to go ahead and cut out my list, jump over here and I'm going to go ahead and combine my list with my tables and but those together. I'm going to go ahead and combine my list and my table information together because there's such few pieces of it, and I'll call that tables-lists.css. I'll create my final new one, jump back in here, and grab my images, cut that, paste that in, save that, and that's images.css, and I'll just go ahead and close that and then the very last thing I need to do here is do my two final imports, one for tables-lists.css and then at import images.css. So go ahead and save that. So as you can see we pretty much know exactly where we should go when we want to change the color, the placement, or the images on our web site, and so this way we don't have to search through a lot of irrelevant entries to find what we're looking for. So it does wind up being easier for us to maintain, and that might be something you want to do after all, but if it helps you to continue to think about these properties together as related to a single object in the document, then that's fine too. For some people it's actually easier to find things if they are grouped together like this and then built into our main.css as we have done here. Now, that concludes our last movie dealing with actual CSS techniques and information and this is typically going to be the last step you do for your site because you have everything set up the way you want it, this is just changing how it's controlled on the back end for you to update later on.