Guide: External CSS (You'll Never Need Style Tags Again!)

AlisonRobin's picture


EXTERNAL CSS GUIDE
So Much Better than Style Tags!


INTRODUCTION

Please note that with changes to dropbox public folder functionality, I no longer know a way to do this for free. The guide is here for posterity and anyone who is willing to pay money for hosting things.

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

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

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, not many will host css files. I used to recommend that people use dropbox, but that is no longer an option. I currently use Rackspace because I also use them for other things, but they charge fees. You may be on your own here.

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 DEFUNCT

Questions always welcome.

hadoukin's picture

Oh my god thank you I have

Oh my god thank you I have wanted to this for the longest time

tracking this for later ooo

tracking this for later ooo
Hallinish's picture

Yes. Thank you. /Bookmarked

Yes.

Thank you. /Bookmarked
bullings's picture

Oh very exciting! I've been

Oh very exciting! I've been wondering for ages if having a separate CSS was even possible. I'm pretty new to CSS in general and wading through a huge pile of code becomes frustrating after awhile especially with it having to be all in one line.

I do have a question though, its probably a really stupid one, but, for example - if you are using fonts from somewhere like Google Fonts and you need to link back to that stylesheet to grab your font, where exactly do you put that now?
AlisonRobin's picture

Good to know people find this

Good to know people find this useful. Smiling I should have made this earlier but I was lazy.

Bullings--you can have as many link tags as you want on your page, so you can have the link for the external CSS plus as many link tags as you like for fonts as well. For example, the TEFc site, even without our meddling on the pages, has about ten link tags in it.
Beaumont13's picture

Gonna track this!

Gonna track this!

Sig Icons by Aihnna
SoliloquyChryseis's picture

I wonder if this could work

I wonder if this could work for like, signatures....

this is useful, but goes over my head right now xD
AlisonRobin's picture

I do believe It could work in

I do believe It could work in signatures, but the big problem with that would be that you'd risk overwriting what's on the person's page to begin with, same as in comments... and even if you made one to only affect signatures, I think the css would carry to every signature on the page and you'd risk screwing up others' pages.

As it is now, you can style signatures with the stuff in style tags, with external css (for instance, I'm using this exact post to make sig text appear red right now), and pretty much anything as long as the blog they show up in is set to BBCode. Sometimes you see a sig with an unclosed tag or something that fusses with all the subsequent posts on the page.

SoliloquyChryseis's picture

I guess I meant having a ton

I guess I meant having a ton of links in a file with one link in the signature, because I know people would LOVE to have little pix of their characters, each with a link to their bio, but the sig length hinders it. Does that make sense? /shot
AlisonRobin's picture

I think that with Javascript

I think that with Javascript that would be possible. Just like CSS, it's possible to link to .js files that are hosted elsewhere (I do that too but there are so few people here who write their own functions that I don't think it's worth it to write a tutorial for that, it was also kind of a pain in the rear to do since the HTML tag necessary to load it onto the page is forbidden by the site and you have to use javascript to create the HTML tag to make the javascript accessible externally).

One could write a lengthy function in Javascript that would create elements within the signature that are images with links. But all that would go in the signature would be a style tag with javascript built in to create an HTML tag that would load external Javascript that would create the pictures and links.

There may be an easier way to do it but that's the only way that seems possible to accomplish it at my baby level of Javascript, and I don't think I'd be able to do it myself.
SilverBlood0801's picture

Let me just Love this for now

Let me just
Love this for now
Skype: SilverBlood (user nerolivers)
Character Hub
Evern's picture

Track to read this later!

Track to read this later! Sounds awesome.

avatar by sithrim, sig by shey!

AlisonRobin's picture

(No subject)

Laughing out loud
Clare's picture

(No subject)

<3
Ravyn's picture

Did you know that you are

Did you know that you are freaking awesome!?
AlisonRobin's picture

Please do not feed the ego

Please do not feed the ego
Mis's picture

Loving this, wow! Hoping to

Loving this, wow! Hoping to experiment with it soon, this looks like a good way to keep my chaos tidy XD
Laiia's picture

Track, thank you !

Track, thank you !

Avatar & signature by Shimmyshimmy. ♥
AlisonRobin's picture

Yeah, the tidiness is the

Yeah, the tidiness is the best part of it. Fo sho.

'Cause like, at a certain point it's just so much text in the little teensy edit box that you have to do something about it, and it's especially annoying when it's in between all of the HTML elements and page content.
DistractedLemon's picture

Tracking. So helpful thanks

Tracking. So helpful thanks for making this.
Open for RP [YES] Skype@ DistractedLemon
Chromai's picture

Hi Alison. I made a new

Hi Alison. I made a new thread using Unplugged's black 1 layout, but the YouTube music players won't work?
ZakuroToshino's picture

tracks

tracks
Laryal's picture

Hello i know it has been a

Hello i know it has been a good while finaly found you lol. I was wondering if you remember me and saying you would make a bio for my Cheveyo? I have no idea where that thread is or i would have posted on that one sorry.
Laryal pic by EmiliaYO
GMSuerte's picture

This is a great guide. My

This is a great guide. My only input is that you don't need the <head> part; you can just place the link tags by themselves. If you'll notice by using your browser's web developer tool, the link tags you add don't actually appear in the head — they appear right where you put them. It doesn't work like that <body> trick I showed you that one time.
Eq's picture

bookmark

bookmark
Eq's picture

bookmark

bookmark