5.3 Quicker Stylesheet References

Consider this fairly common process. I have some boiler plate code here and I need to add a style sheet. So you either right-click on CSS and choose a new file or if we have the side bar enhancements plugin installed, which I already covered in this course, I can hit option, command, N and type CSS/style.CSS. So now we have created this style sheet. The next step is a tedious one. You have to go back to your main page and include a reference to it, [BLANK_AUDIO] like this. So, granted, that doesn't take a long time, but it is a tedious process nonetheless. Well, Sublime Text can make this slightly easier on us. Now it's not as easy as, for example, Text Mate where you can just drag the file into the editor and that will automatically generate the reference. That's a very cool feature. Sublime Text does not have that. But it does have the ability to copy the relative path to the current file. So let's go back to the step where we created style.css. If I hit Shift+Cmd+P and I choose copy notice that it brings up these options here. Copy Name, well that will produce the name of the file. If we run Copy Path. That's going to give you the full path from your computer's root to the file. But most of the time you're going to want the path relative to the root of your project. And in that case we do Copy Path from Project. And now we have a relative path. Now we can make this better but for now this can be very helpful. You could then go back to index at HTML. You can add a link, and use Cmd+V to paste it in. And that's a little bit easier. But, we can go one further with Sublime Text. If we come back, I can also run Copy as Tag a, which would create an anchor tag. Paste that in, now you have an anchor tag to that page. Or, we can do as a tag style, and that will generate the necessary link tag, which you can then, of course, paste into your project. So I wish it didn't add the type equals text/css, but I'm sure we could root around the back end and find a way to remove that if we needed to. Altogether, it's not that big of a deal. So let's go through the process one more time. We will hit Cmd+Option+N. We're gonna create a new file called module.js. Now we're gonna copy this as a script, and we'll come back, paste it in at the bottom, and we're done. So it's not the easiest option, but that still is pretty flexible.