Code Testing

AlisonRobin's picture


EXTERNAL CSS GUIDE
So Much Better than Style Tags!


INTRODUCTION

I've been using external CSS for a long time ever since I realized that it was possible to embed .css files here. GMSuerte the Mathmagician was doing it and I asked something to the effect of, "What's the HTML to embed the CSS?" and he replied something like, "Link tag." And I've been doing it externally ever since.

Most people here use HTML style tags to accomplish what most websites use .css files do. You can attach a .css file to your page much like attaching a picture to it with only one snippet of HTML. In this way, it is vastly superior to using style tags. Additionally, it is easy to use paragraph breaks in .css files, so you won't have to hunt through chunks of info to edit them and you won't have to use comments to break them into workable info chunkies. Lastly, and this is my favorite part, you can edit your external .css files without having to update your page. Your trackers won't have to see updates of you tweaking tiny little details unless you also alter the HTML.

You will probably need an ok understanding of HTML and CSS in order to understand how to do this. I apologize if I have failed to make this more transparent. But you can always ask questions and I will do my best to help you!

You can use this anywhere for whatever, credit never ever necessary. Have fun and don't be afraid to ask questions if I am ever unclear with anything or if you have a specific issue, but I'm still learning myself. I want everyone to be able to make the kinds of pages they want to make.

It's possible I may update the code or page from time to time if there is an error or if there is something new I want to add or clarify. I hope my trackers won't mind too much.


EXAMPLE

This page is an example itself. The CSS that changes its look is not in a style tag. Feel free to right click the page (and any of my pages) and view page source to look at how it is put together--you will find no bulky style tag!

Click here to look at the CSS that is styling this page.

CODE

<head><link rel="stylesheet" type="text/css" href="YOURCSSURLHERE"></head>

EXPLANATION

This link tag allows you to embed files in your page. For instance, when I load special fonts onto pages, I use the link tag for that as well.

INSTRUCTIONS

Open Notepad or a similarly barebones text editor. (I would recommend a program called Notepad++ that is free and helpful for any kind of coding if you are a more advanced CSS user.) When you save your file in notepad, there will be a field for "Save as type:" and you should set your drop down to "All Files". Name your new .css anything you want so long as the file name ends with ".css"

It will look something like this before you save:

Now you have your .css file. Put your CSS from your page there, omitting the style tags. You can organize it however you please now because it no longer has to be on one line! You can take a look at how mine is organized here, and you are free to take what you need from it.

The next step is hosting it. A lot of sites will only host images. One service, Dropbox, will host any filetype you like. They are free and have an optional desktop app that allows you to edit files on your computer and they then sync automatically on Dropbox where they are hosted. This means that you can edit your CSS on your computer in notepad, and shortly after you save the file, it will update on your page here without your trackers getting clogged with things.

After it is hosted, use the link tag above to put it on your page. Make sure it goes under the cut and that you have your input format set to BBCode and you should be good to go!

SOURCES, RESOURCES, AND RECOMMENDED READING

W3Schools' Page on the Link Tag
W3Schools' CSS Tutorials and Help
Notepad++ Software Homepage
Dropbox Homepage

AlisonRobin's picture

Oh snap forgot to test

Oh snap forgot to test comments.
AlisonRobin's picture

Other one goes heeeere

Other one goes heeeere